从CRA迁移到vite：无法确定当前节点版本

Question

我喜欢 vite 设置、构建和启动 React 应用程序的方式。这就是为什么我在我的新项目中完全转向使用 vite

现在我有一个较旧的项目（2年），我想按照尽可能详细的描述将其迁移到vite：https://www.robinwieruch.de/vite-create-react-app/

它似乎工作正常，项目构建并运行，但在浏览器控制台中我看到了这个

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> 

我发现的所有内容都与 vite 和 babel 如何与 @vitejs/plugin-react 一起设置相关的一些问题有关。但答案与我的设置不符。

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",
  },
};

Answer 1

该错误几乎可以肯定是由 babel 引起的。这些步骤对我有用：

1. 从包文件中删除

   "babel-plugin-macros": "^3.1.0",

   。

2. 安装vite插件vite-plugin-babel-macros：

   npm install --save-dev vite-plugin-babel-macros

3. 将其添加到vite.config.ts中的插件中：

   plugins: [..., macrosPlugin()]

4. 保持

   babel-plugin-macros.config.js

   原样并尝试重建。