Vite+React项目遇.node文件无加载器配置错误求解决方案

问题详情 #

项目此前运行正常，近期突然触发以下错误：

未配置“.node”文件的加载器：
node_modules/fsevents/fsevents.node
node_modules/fsevents/fsevents.js:13:23:

13 │ const Native = require("./fsevents.node");

环境信息 #

• 设备：MacBook Air Monterey 12.5（2020款M1芯片）
• package.json依赖配置：

"dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-range": "^1.8.14"
  },
  "devDependencies": {
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@vitejs/plugin-react": "^4.0.0-beta.0",
    "eslint": "^8.38.0",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.3.4",
    "sass": "^1.62.0",
    "vite": "^4.3.0"
  }

已尝试的无效操作 #

• 添加optimizeDeps: { exclude: ["fsevents"] }到vite.config.js：终端无报错，但浏览器空白，控制台报“caught SyntaxError: Invalid left-hand side in assignment”
• 配置node-loader、file-loader处理.node文件：无效果
• 删除vite.config.js相关导入语句：无对应语句，删除其他语句后出现新语法错误
• 彻底卸载重装Node.js：问题依旧
  注：所有操作均已删除node_modules并重新安装

可行解决方案 #

1. 锁定fsevents兼容版本并指定平台 #

fsevents是MacOS专属依赖，M1的ARM架构与部分高版本fsevents存在兼容性问题。在package.json中添加以下配置：

"resolutions": {
  "fsevents": "2.3.2"
},
"os": ["darwin"]

执行npm install（yarn用户执行yarn install），重装依赖后启动项目。

2. 配置Vite正确处理.node文件 #

通过rollup-plugin-copy将fsevents.node复制到正确目录，并配置Vite将其标记为外部依赖避免打包：

• 安装依赖：

npm install rollup-plugin-copy --save-dev

• 修改vite.config.js：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import copy from 'rollup-plugin-copy';

export default defineConfig({
  plugins: [
    react(),
    copy({
      targets: [
        { src: 'node_modules/fsevents/fsevents.node', dest: 'node_modules/fsevents/dist' }
      ]
    })
  ],
  optimizeDeps: {
    esbuildOptions: {
      external: ['fsevents']
    }
  },
  build: {
    rollupOptions: {
      external: ['fsevents']
    }
  }
});

重启开发服务器测试。

3. 降级Vite及React插件到稳定版 #

你使用的@vitejs/plugin-react是beta版本，可能存在兼容性bug。执行以下命令降级：

npm install @vitejs/plugin-react@^3.1.0 vite@^4.2.0 --save-dev

删除node_modules和package-lock.json，重新安装依赖后启动项目。

4. 确认终端为ARM原生模式 #

M1 Mac终端若运行在Rosetta（x86）模式，会导致依赖安装异常：

• 打开终端，执行arch命令，若输出i386则为Rosetta模式
• 右键终端应用→显示简介→取消勾选“使用Rosetta打开”
• 重启终端，删除node_modules和lock文件后重新安装依赖

内容的提问来源于stack exchange，提问作者Olivia