带有MSW的类型记录CRA :解析源映射失败

Question

我已经创建了一个应用程序，内置了类型记录模板，然后我用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

更新:在垃圾0.38.0中解决问题。

先前的答复：

您在使用react-scripts 5吗?在react-scripts的那个版本中使用的Webpack 5与msw发生了某种冲突。

你现在有几个选择：

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

更多关于github问题由凯塔纳托发布的信息

Answer 2

如果您不想使用react-app-rewired，降级为react-scripts v4或使用GENERATE_SOURCEMAP=false，您可以检查我的想法。它很丑，但很管用。

创建如下脚本：

const { readFileSync, writeFileSync } = require("fs");

const path = "node_modules/source-map-loader/dist/utils.js";
const regex = /.*throw new Error\(`Failed to parse source map from '\${sourceURL}' file: \${error}`\);*/;

const text = readFileSync(path, "utf-8");
const newText = text.replace(regex, `buffer="";sourceURL="";`);
writeFileSync(path, newText, "utf-8");

然后将其添加到package.json中：

  "scripts": {
    "start": "node removeSourceMapsWarning.js && react-scripts start"

显然，当source-map-loader更改错误消息时，此代码将停止工作。但我希望届时我们能找到一个真正的解决办法。