Vite项目集成MSW出现require未定义错误的解决方法

问题根源 #

Vite 默认采用 ES 模块（ESM）规范，而 require 是 CommonJS 模块系统的专属语法，浏览器环境本身不支持该语法，因此会抛出Uncaught ReferenceError: require is not defined错误。另外，Vite 不默认注入 process.env 对象，直接使用process.env.NODE_ENV判断环境也可能存在兼容性问题。

正确解决方法 #

方法1：使用ES动态导入（推荐）

改用 ES 模块的动态导入语法，同时用 Vite 内置的import.meta.env.DEV来判断开发环境：

if (import.meta.env.DEV) {
  import('../tests/mocks/browser').then(({ worker }) => {
    worker.start();
  });
}

动态导入会在满足条件时异步加载 MSW 的 Worker 代码，既符合 Vite 的模块规范，也能避免生产环境打包冗余代码。

方法2：静态导入配合环境控制

如果需要同步加载逻辑，可以通过静态导入结合环境判断实现，同时借助 Vite 的编译特性确保生产环境自动剔除相关代码：

// @vite-ignore
if (import.meta.env.DEV) {
  const { worker } = await import('../tests/mocks/browser');
  worker.start();
}

补充说明 #

MSW 官方文档的部分示例基于 Webpack 等支持 CommonJS 的构建工具编写，而 Vite 是 ESM 优先的构建工具，因此需要调整模块导入语法以适配 Vite 的环境。

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