ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

Vite 启动即崩:No loader is configured for .node files——一行多余 import 引发的血案(fsevents)

Vite 启动即崩:No loader is configured for .node files——一行多余 import 引发的血案(fsevents) 一、问题现象Vue3 Vite 5 项目JeecgBoot 前端pnpm 管理pnpm dev启动 dev server控制台先是正常打印了本地地址紧接着✘ [ERROR] No loader is configured for .node files: node_modules/.pnpm/fsevents2.3.3/node_modules/fsevents/fsevents.node node_modules/.pnpm/fsevents2.3.3/node_modules/fsevents/fsevents.js:13:23: 13 │ const Native require(./fsevents.node); ╵ ~~~~~~~~~~~~~~~~~ Error: Build failed with 1 error: node_modules/.pnpm/fsevents2.3.3/node_modules/fsevents/fsevents.js:13:23: ERROR: No loader is configured for .node files: ... at failureErrorWithLog (.../esbuild/lib/main.js:1472:15) ... Node.js v22.23.2整个 dev server直接崩溃退出页面能短暂打开但很快白屏。注意一个细节访问首页之前服务是正常的HTTP 200一访问页面就崩——这是重要线索说明是按需构建依赖时踩雷。二、排查过程1. fsevents 是什么为什么会进浏览器构建fsevents是 macOS 专用的原生二进制模块.node文件给 Node 端文件监听用的chokidar 的依赖跟浏览器代码八竿子打不着。它出现在报错里说明某条 import 链把 Node 端的包拖进了 Vite 的浏览器构建依赖预构建 optimizeDeps / esbuild bundle而 esbuild 不认识.node二进制文件直接失败。2. 用 vite --debug resolve 追踪元凶重启 dev server 加上 debug 参数npx vite--debugresolve/tmp/vite_resolve.log21访问页面触发崩溃后在日志里搜 fseventsvite:resolve 0.84ms chokidar - .../node_modules/chokidar3.6.0/index.js vite:resolve 1.40ms fsevents - .../node_modules/fsevents2.3.3/fsevents.js [ERROR] No loader is configured for .node files...找到了 resolve 记录但 debug 日志不直接显示 importer。继续搜附近谁引入了vite-plugin-mockvite:resolve 1.97ms vite-plugin-mock - .../dist/index.js3. 锁定根因链打开vite-plugin-mock的 ESM 入口dist/index.mjs顶部赫然写着importchokidarfromchokidar;而 chokidar 的lib/fsevents-handler.js里try{fseventsrequire(fsevents);}catch(e){...}于是在源码里全局搜谁 import 了 vite-plugin-mock找到了 7 个.vue页面grep-rlnfrom vite-plugin-mocksrc/# src/views/recruit/sentOffer/SentOfferList.vue# ...共 7 个这些页面里的写法是import{Recordable}fromvite-plugin-mock;只为引一个类型Recordable。而项目types/global.d.ts里早就有全局声明declaretypeRecordableTanyRecordstring,T;也就是说这个 import 完全多余。但它像一根引信.vue 页面 import vite-plugin-mock → vite-plugin-mock 入口 import chokidar → chokidar require(fsevents) → fsevents.node 二进制 → esbuild: 我不认识 .node 文件 类型本来会在编译期被擦除但 Vite 的依赖扫描不区分“只用了类型”——只要 import 语句在整条链就会被拉进预构建。三、解决删掉 7 个文件里的多余导入各 1 行sed-i/import.*Recordable.*from vite-plugin-mock;/d; /import.*Recordable.*from vite-plugin-mock;/d涉及的文件清缓存重启验证rm-rfnode_modules/.vitepnpmdev结果页面访问正常日志 0 个 ERROR进程稳定存活。四、总结与避坑项结论现象dev server 一访问页面就崩报.node文件无 loader根因业务代码import {类型} from vite-plugin-mock把 Node 端插件链拖进浏览器构建定位手段vite --debug resolve日志反查 fsevents/chokidar 的引入方修复删除多余 import类型已全局声明三条经验永远不要在前端业务代码里 import 构建工具/mock 插件等 Node 端包——哪怕只为了一个类型。类型要么用全局声明要么import type 确认编译期擦除Recordable这类通用类型JeecgBoot 项目已在types/global.d.ts全局声明直接用就行遇到“X 包为什么被打进构建”的问题vite --debug resolve是利器在日志里搜目标包名顺着 resolve 记录反查。一句话一行为了 IDE 补全而写多余import {Recordable} from vite-plugin-mock让 Vite 把 chokidar → fsevents 整条 Node 链拖进浏览器构建esbuild 碰到.node二进制直接崩——删掉这一行天下太平。
返回列表