带有 MSW 的 Typescript CRA：无法解析源映射

Question

我创建了一个内置打字稿模板的 Create React App 应用程序，然后我使用 npm 安装了 MSW 并根据 MSW 安装指南创建了文件。它对于玩笑来说工作得很好，但是对于浏览器来说，当我使用启动脚本时，我收到了一堆警告：

WARNING in ./node_modules/@mswjs/interceptors/lib/utils/uuid.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '<ROOT_DIR>\node_modules\@mswjs\interceptors\src\utils\uuid.ts' file: Error: ENOENT: no such file or directory, open '<ROOT_DIR>\node_modules\@mswjs\interceptors\src\utils\uuid.ts'
 @ ./node_modules/@mswjs/interceptors/lib/interceptors/fetch/index.js 167:13-40
 @ ./node_modules/msw/lib/esm/index.js 12:0-76 1568:14-28
 @ ./src/mocks/browser.ts 3:0-34 6:22-33
 @ ./src/index.tsx 8:0-41 10:0-12

以及类似的...

我找不到任何答案，所以我向你寻求帮助。

Answer 1

更新：msw 0.38.0中修复了问题。

之前的回答：

你正在用react-scripts 5吗 ？ Webpack 5那个版本中使用的react-scripts与某种方式发生冲突msw。

您现在有几个选择：

1. .env通过在项目的根目录中添加一个文件来禁用源映射GENERATE_SOURCEMAP=false，以便您可以保留react-scripts 5;
2. 降级react-scripts至v4.

更多关于kettanaito发布的github 问题