Vite 8 升级后 Emotion 报 init_emotion_react_browser_development_esm 未定义
Vite 8 依赖预构建遗漏跨 chunk 导入,可能让 Emotion 初始化符号未定义。核对版本与缓存,升级包含修复的组合后检查页面、热更新和生产构建。
Vite 8 升级后 Emotion 报 init_emotion_react_browser_development_esm 未定义
开发服务器已经显示 ready,浏览器却在加载页面时抛出下面的错误,页面随之空白:
Uncaught ReferenceError:
init_emotion_react_browser_development_esm is not defined
如果它紧接着 Vite 从 8.0.13 升到 8.0.14 出现,先检查依赖预构建结果。已知受影响的组合还包括 Vite 8.0.16、React 19.2.7 和 MUI 5.18.0。这些版本能帮助定位,但不能据此认定所有 Emotion 错误都属于同一回归。
这个名字通常来自打包器生成的模块初始化函数。它并不是需要在应用中手写或从 Emotion 导出的 API。相关 Rolldown 回归会让拆分后的预构建产物保留初始化函数调用,却漏掉跨 chunk 的导入绑定,模块一执行就遇到未定义符号。错误堆栈指向生成的 styles-*.js,也符合这个方向。
先记录项目实际安装的版本,尤其留意工作区有没有多个 Vite:
npm ls vite rolldown @emotion/react @mui/material react
使用 pnpm 的项目可以改用 pnpm list 和 pnpm why vite。不要只看 package.json 的范围;真正参与预构建的版本由锁文件和依赖树决定。
相关修复进入 Rolldown 1.1.2,并由 Vite 8.1.0 带入。对仍停留在 8.0.14 或 8.0.16 的项目,可以先在分支中升级到这个已确认的修复版本,完成回归检查,再决定是否继续采用更新的稳定版:
npm install -D vite@8.1.0
npm run dev -- --force
--force 会重新执行依赖预构建,避免继续读取旧产物。运行前停掉原开发服务器,刷新浏览器,并确认终端打印的 Vite 版本已变化。项目若配置了自定义 cacheDir,也不要只删除默认的 node_modules/.vite 就认定缓存已经清理。
只单独覆盖 Rolldown 版本不是等价的升级方案。Vite 与其打包器版本需要配合,旧版 Vite 单独强制使用 1.1.2 仍可能遇到构建崩溃。给 window 补一个同名空函数也会掩盖模块初始化步骤,不能修复缺失的导入。
验证时打开真正使用 MUI 或 Emotion 的页面,而不是只检查首页 HTTP 200。控制台应不再出现该符号错误,组件样式应正常;编辑一个组件后再确认热更新可用。随后运行生产构建和项目已有测试,检查升级是否引入其他行为变化。
这项修复针对依赖预构建的跨 chunk 初始化问题。如果升级并强制重建后仍失败,应保存新的符号名称、完整堆栈及实际依赖树。应用中重复安装 Emotion、不同 React 运行时或另一种打包回归,都需要另行诊断,不能继续套用这个版本结论。


