从CRA迁移至Vite遇报错：Uncaught TypeError: 无法确定当前Node版本

问题描述 #

将React项目从CRA迁移到Vite后，运行项目出现空白页面，控制台抛出以下错误：

Uncaught TypeError: Unable to determine current node version
    at versionIncluded (index.js:51:9)
    at isCore (index.js:68:28)
    at node_modules/resolve/lib/core.js (core.js:9:21)
    at __require2 (chunk-LK32TJAX.js?v=b6f66255:18:50)
    at node_modules/resolve/index.js (index.js:2:14)
    at __require2 (chunk-LK32TJAX.js?v=b6f66255:18:50)
    at node_modules/babel-plugin-macros/dist/index.js (index.js:5:17)
    at __require2 (chunk-LK32TJAX.js?v=b6f66255:18:50)
    at index.js:43:1

当前使用的Vite配置：

import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
import svgrPlugin from "vite-plugin-svgr";
import envCompatible from "vite-plugin-env-compatible";

// https://vitejs.dev/config/
export default defineConfig({
  envPrefix: "REACT_APP_",
  build: {
    outDir: "build",
  },
  resolve: {
    alias: {
      src: "/src",
    },
  },
  plugins: [react(), envCompatible()],
});

已尝试更新依赖、升级npm和Node版本，问题仍未解决。

解决方案 #

这个错误的核心原因是resolve包原本用于Node.js环境，在浏览器中无法获取Node版本信息，而babel-plugin-macros依赖了该包，Vite开发模式下误将其打包进浏览器环境导致报错。可通过以下方式解决：

方案1：优化Vite配置，外部化相关Node端包 #

修改Vite配置，在依赖预构建和打包阶段排除相关Node端依赖：

import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
import svgrPlugin from "vite-plugin-svgr";
import envCompatible from "vite-plugin-env-compatible";

export default defineConfig({
  envPrefix: "REACT_APP_",
  build: {
    outDir: "build",
    rollupOptions: {
      external: ["resolve", "babel-plugin-macros"],
    },
  },
  resolve: {
    alias: {
      src: "/src",
    },
  },
  optimizeDeps: {
    exclude: ["resolve", "babel-plugin-macros"],
  },
  plugins: [react(), envCompatible()],
});

方案2：添加Node环境模拟插件 #

安装rollup-plugin-node-polyfills来模拟浏览器缺失的Node环境变量：

1. 安装依赖：

npm install rollup-plugin-node-polyfills --save-dev

2. 修改Vite配置：

import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
import svgrPlugin from "vite-plugin-svgr";
import envCompatible from "vite-plugin-env-compatible";
import nodePolyfills from "rollup-plugin-node-polyfills";

export default defineConfig({
  envPrefix: "REACT_APP_",
  build: {
    outDir: "build",
    rollupOptions: {
      plugins: [nodePolyfills()],
    },
  },
  resolve: {
    alias: {
      src: "/src",
    },
  },
  plugins: [react(), envCompatible()],
});

方案3：检查依赖兼容性 #

排查项目中依赖babel-plugin-macros的第三方库（如styled-components、emotion等），确认其版本是否适配Vite，如有需要升级到兼容Vite的版本。

额外步骤 #

删除node_modules、package-lock.json（或yarn.lock），重新执行npm install，确保依赖安装干净。

内容的提问来源于stack exchange，提问作者I am Live