Typescript CRA 与 MSW：无法解析源 map

Question

I have created a Create React App application with typescript template build in, then i installed MSW with npm and created files based on MSW install guide. It's working perfectly for jest, but for browser when im using start script i got a bunch of warnings that are saying:

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

and simmilar...

I couldn't find any answers so Im asking you for help.

Answer 1

Are you using react-scripts 5 ? Webpack 5 used in that version of react-scripts is clashing with msw somehow.

You have a couple of options for now:

1. disable source maps by adding a .env file in the root of your project containing GENERATE_SOURCEMAP=false so that you can keep react-scripts 5 ;
2. downgrade react-scripts to v4 .

More on the github issue posted by kettanaito