使用Vite+Vue运行npm run dev时遇.node文件无加载器配置错误

报错信息 #

执行npm run dev时触发如下错误：

[ERROR] No loader is configured for ".node" files: node_modules/fsevents/fsevents.node

node_modules/fsevents/fsevents.js:13:23:
  13 │ const Native = require("./fsevents.node");
     ╵                        ~~~~~~~~~~~~~~~~~

详细错误日志 #

Error: Build failed with 1 error:
errors: [
    {
      detail: undefined,
      id: '',
      location: {
        column: 23,
        file: 'node_modules/fsevents/fsevents.js',
        length: 17,
        line: 13,
        lineText: 'const Native = require("./fsevents.node");',
        namespace: '',
        suggestion: ''
      },
      notes: [],
      pluginName: '',
      text: 'No loader is configured for ".node" files: node_modules/fsevents/fsevents.node'
    }
  ],
  warnings: []
}

Node.js v19.6.0

已尝试相关修复方案但无效，反而引发更多无明确说明的错误。

可行修复方案 #

方案1：排除fsevents的打包处理 #

在vite.config.js中添加优化配置，让Vite跳过对fsevents的转换：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  optimizeDeps: {
    exclude: ['fsevents']
  }
})

方案2：降级Node.js版本 #

fsevents在Node.js v19部分版本存在兼容性问题，可降级到稳定的v18 LTS版本：

• 用nvm切换版本：nvm install 18 && nvm use 18
• 重新安装依赖：rm -rf node_modules package-lock.json && npm install

方案3：配置.node文件的loader规则 #

若需保留当前Node版本，可在vite.config.js中指定esbuild对.node文件的处理规则：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  esbuild: {
    loader: {
      '.node': 'file'
    }
  }
})

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