引入一个只提供 CommonJS 的老包,浏览器控制台报 require is not defined,页面直接白屏。日志里能对上时间点,这种反而好排。

该包没有被预构建成 ESM,源码里的 require 原样进了浏览器,运行环境里没有这个函数。这一点先确认清楚,后面就不用反复试。

// vite.config.js
optimizeDeps: { include: ['some-cjs-lib'] }
rm -rf node_modules/.vite
npx vite --force

「vite 依赖预构建」改完先别急着全量,挑一台机器放半天,真有问题这段时间就能看出来。先做最小复现,能稳定跑出来的问题,排查成本会低一个数量级。

别只看报错的最后一行,往上看几行,真正的起因通常在上面。同类问题如果隔一段时间又出现,多半是某个定时任务或重启流程把改动冲掉了。

把这次用到的命令存进笔记,比记住结论有用,换个环境还能照着走。改完隔一天再看一次,当场正常不代表能稳住。

测试环境和线上的差别,往往就在版本号和那几行被忽略的配置上。

处理上按这个顺序:把这个包加进 optimizeDeps.include;确认它没有被 exclude 排掉;清掉预构建缓存后强制重启。

结果对不对很好判断,页面正常加载,控制台不再出现 require 未定义。

作者 9823189