React项目中Mock Service Worker(MSW)报SyntaxError: Unexpected string错误求助

环境信息 #

• Node v16.19.1
• Vite v3.2.6 (linux-x64)
• React v18.2.0
• Mock Service Worker(MSW)

排查及解决步骤 #

1. 锁定MSW兼容版本 #

Vite 3.x属于较旧版本，新MSW版本可能使用了Node 16不完全支持的语法，建议降级到兼容版本：

npm install msw@1.2.1 --save-dev

2. 检查Mock文件语法错误 #

核心排查点：

• 所有handlers.js或mock逻辑文件中，是否存在字符串引号遗漏/不匹配、模板字符串语法错误
• 对象字面量是否有逗号遗漏、键名引号错误
• 箭头函数、展开运算符等ES6语法是否规范，比如setupWorker(...handlers)是否正确展开数组

3. 配置Vite转译MSW #

在vite.config.js中添加MSW到依赖预构建列表，确保Vite正确转译MSW代码：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    include: ['msw']
  }
})

4. 统一模块语法 #

确保项目中MSW相关文件统一使用ES Module语法（避免require和import混用），比如初始化代码：

import { setupWorker } from 'msw'
import { handlers } from './handlers'

export const worker = setupWorker(...handlers)

5. 清除依赖缓存 #

删除旧依赖及锁文件，重新安装：

rm -rf node_modules package-lock.json
npm install

6. 排查依赖冲突 #

若以上步骤无效，尝试创建最小复现项目（仅包含React、Vite、MSW），确认是否是项目中其他依赖（如babel插件、其他mock工具）与MSW冲突。

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