I like the way vite sets up, builds and starts a react application. That’s why I fully switched to using vite in my new projects

Now I have an older project (2 years) which I wanted to migrate to vite following this description as detailed as possible: https://www.robinwieruch.de/vite-create-react-app/

It seemed to work fine, the project builds and runs, but in the browser console I see this

Uncaught TypeError: Unable to determine current node version
    versionIncluded index.js:51
    isCore index.js:68
    js core.js:9
    __require2 chunk-PLDDJCW6.js:17
    js index.js:2
    __require2 chunk-PLDDJCW6.js:17
    js index.js:5
    __require2 chunk-PLDDJCW6.js:17
    node_modules @fortawesome_fontawesome-svg-core_import__macro.js:25213
    __require2 chunk-PLDDJCW6.js:17
    <anonymous> 

Everything I found was related to some problem related to how vite and babel are setup together with the @vitejs/plugin-react. But the answers didn’t match my setup.

package.json

{
  "name": "myapp-frontend",
  "version": "0.9.0",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.2.0",
    "@fortawesome/free-regular-svg-icons": "^6.2.0",
    "@fortawesome/free-solid-svg-icons": "^6.2.0",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@radix-ui/react-checkbox": "^1.1.0",
    "@radix-ui/react-dialog": "^1.1.1",
    "@radix-ui/react-dropdown-menu": "^2.1.1",
    "@radix-ui/react-label": "^2.1.0",
    "@radix-ui/react-select": "^2.1.1",
    "@radix-ui/react-slot": "^1.1.0",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "babel-plugin-macros": "^3.1.0",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
    "flag-icon-css": "^4.1.7",
    "history": "^5.3.0",
    "i18next": "^21.9.1",
    "i18next-browser-languagedetector": "^6.1.5",
    "i18next-http-backend": "^1.4.1",
    "js-cookie": "^3.0.1",
    "lucide-react": "^0.396.0",
    "react": "^18.2.0",
    "react-beautiful-dnd": "^13.1.1",
    "react-dom": "^18.2.0",
    "react-i18next": "^11.18.6",
    "react-router-dom": "^6.3.0",
    "react-tabs": "^5.1.0",
    "reactflow": "^11.11.1",
    "rxjs": "^7.5.6",
    "styled-components": "^6.1.11",
    "tailwind-merge": "^2.3.0",
    "tailwindcss-animate": "^1.0.7",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^4.3.1",
    "tailwindcss": "^3.4.4",
    "vite": "^5.3.1"
  }
}

vite.config.js

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig(() => {
  return {
    define: {
      "process.env": {},
    },
    build: {
      outDir: "build",
    },
    plugins: [react()],
  };
});

babel.config.json

module.exports = function (api) {
  api.cache(true);
  return {
    plugins: ["macros"],
  };
};

babel-plugin-macros.config.js

module.exports = {
  "fontawesome-svg-core": {
    license: "free",
  },
};