升级Storybook 6至7后Vue3应用出现process is not defined错误求助

问题场景 #

升级Storybook从v6到v7后，相关依赖已放入devDependencies，但运行Vue3主应用时无法正常显示，控制台报错：

[Vue Router warn]: Unexpected error when starting the router: ReferenceError: process is not defined
at node_modules/util/util.js (util.js:109:1)
at __require (chunk-AC2VUBZ6.js?v=2a7792e7:11:50)
at node_modules/assert/build/internal/assert/assertion_error.js (assertion_error.js:35:16)
at __require (chunk-AC2VUBZ6.js?v=2a7792e7:11:50)
at node_modules/assert/build/assert.js (assert.js:36:22)
at __require (chunk-AC2VUBZ6.js?v=2a7792e7:11:50)
at assert.js:631:31

报错触发于main.js的app.use(router);语句，简化后的main.js代码：

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

const app = createApp(App);
app.use(router);
app.mount("#app");

排查思路 #

• 检查构建工具的环境变量配置
  Vue3项目常用Vite或Webpack，Storybook7升级可能干扰了环境变量注入逻辑：

  • 若用Vite：在vite.config.js中添加define: { 'process.env': {} }，或把代码中依赖process.env的逻辑替换为import.meta.env；
  • 若用Webpack：在webpack.config.js中通过webpack.DefinePlugin注入process.env相关变量；
  • 注意：.storybook/main.js的构建配置可能和主应用冲突，需确保主应用的配置未被Storybook覆盖。

• 排查Node.js核心模块的polyfill缺失
  报错涉及util、assert等Node.js核心模块，浏览器环境需polyfill支持：

  • Vite项目可安装@esbuild-plugins/node-modules-polyfill，并在配置中引入；
  • Webpack项目可安装node-polyfill-webpack-plugin，添加到插件列表；
  • 检查第三方依赖，确认是否有旧版库错误地在浏览器环境引用Node.js核心模块。

• 验证Vue Router兼容性

  • 确保Vue Router版本为v4.x（适配Vue3的稳定版），若版本过低则升级；
  • 检查router/index.js是否有依赖process.env的逻辑（如根据环境切换路由模式），替换为构建工具支持的环境变量写法。

• 清理缓存并重装依赖

  • 删除node_modules、package-lock.json（或yarn.lock），执行npm install重装依赖；
  • 清理构建缓存：Vite用npx vite clear，Webpack删除dist及缓存目录，再重启主应用。

• 隔离Storybook的影响

  • 临时移除Storybook相关devDependencies，验证主应用是否正常运行，若正常则说明是Storybook的配置/依赖导致冲突；
  • 检查.storybook/main.js的addons、framework配置，排查是否有导致主应用加载额外Node.js模块的设置。

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