在Next.js中集成MSW初始化代码时触发栈溢出错误求助

问题根源 #

你遇到的RangeError: Maximum call stack size exceeded是由于@cspotcode/source-map-support（MSW依赖库）与Next.js的source map处理逻辑、MSW自身的调用栈追踪功能发生无限递归调用：MSW的getCallFrame方法触发栈追踪时，会调用source-map-support的prepareStackTrace，而该方法又会再次触发栈追踪，形成循环导致栈溢出。

解决方案 #

1. 修正Next.js Webpack配置冲突 #

你的Webpack配置手动覆盖了mode属性，Next.js本身会根据NODE_ENV自动设置mode，手动修改可能破坏内部逻辑。同时需要针对客户端构建排除source-map-support的自动注入：

修改next.config.js中的webpack配置：

webpack: (config, { webpack, isServer, dev }) => {
  // 移除手动设置mode的代码，由Next.js自动处理
  if (!dev) {
    config.devtool = 'hidden-source-map'
  }
  // 客户端构建中禁用source-map-support，避免递归冲突
  if (!isServer) {
    config.resolve.alias['@cspotcode/source-map-support'] = false
  }
  return config
},

2. 禁用MSW的调用栈追踪功能 #

在MSW初始化时关闭调用栈追踪，避免触发递归逻辑。如果是在Pages Router的_app.js或App Router的layout.js中初始化：

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

const worker = setupWorker(...handlers)
worker.start({
  trackCallStack: false, // 禁用调用栈追踪
  captureConsole: false, // 可选：不需要捕获控制台输出可关闭
})

3. 升级MSW到兼容版本 #

旧版本MSW与Next.js的source map处理存在兼容性问题，建议升级到最新稳定版：

npm install msw@latest

4. 验证开发环境source map设置 #

开发环境下Next.js默认使用eval-source-map，不要手动修改devtool属性，保持Next.js默认配置即可避免source map解析逻辑异常。

验证修复 #

修改配置后，重启Next.js开发服务器，重新初始化MSW，检查是否还会出现栈溢出错误。如果问题仍存在，可尝试清除依赖和缓存后重新安装：

rm -rf node_modules .next package-lock.json
npm install

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