Vite+React项目中使用MSW遇rest导入语法错误求助

常见原因及解决思路 #

1. MSW版本升级导致导入路径变更 #

MSW从v2.x版本开始，rest API的导入路径发生了变化，不再从根模块msw导出，需要从msw/rest导入。

修改你的handler.js导入语句：

// 替换原来的 import { rest } from 'msw';
import { rest } from 'msw/rest';

同时如果你的MSW初始化代码（比如main.jsx）也使用了旧的导入路径，也要同步更新：

// 替换原来的 import { setupWorker } from 'msw';
import { setupWorker } from 'msw/browser';

2. 清除Vite依赖预构建缓存 #

Vite的依赖预构建缓存可能保留了MSW旧版本的模块信息，导致导出查找失败。执行以下操作：

• 停止当前开发服务
• 删除项目根目录下的node_modules/.vite文件夹
• 重新运行yarn start:mock启动服务

3. 确认MSW安装版本 #

检查package.json中的MSW版本，确认是否为v2.x及以上。如果是无意升级到v2但想继续使用旧写法，可以降级到v1.x版本：

yarn add msw@^1.3.0

降级后保持原导入路径即可正常使用。

4. 验证环境变量生效逻辑 #

确保在应用入口文件（如main.jsx）中，只有当VITE_MOCK=true时才加载MSW相关代码，避免非mock环境下的不必要加载：

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

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