Typescript CRA with MSW: failed to parse source 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.

Amaleta

There's an open issue about this on GitHub. Please follow it there. Thanks. – Migratory

Answer 1

Update: Issue fixed in msw 0.38.0.

Previous answer:

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

Twelve

the most updated and useful answer so far – Stomacher

Answer 2

Instead of disable source maps you could disable the warnings trough react-app-rewired.

1. Add react-app-rewired as dev dependency

   yarn add -D react-app-rewired

2. Rename react-scripts into react-app-rewired in package.json start, test and build scripts

3. Add ignoreWarnings in config-overrides.js at the same level as package.json as documented in source map loader.

   // config-overrides.js
   module.exports = {
     webpack: function (config) {
       return { ...config, ignoreWarnings: [/Failed to parse source map/] };
     },
   };
   

Misdemeanor

Answer 3

If you do not want to use react-app-rewired, downgrade to react-scripts v4 or use GENERATE_SOURCEMAP=false you can check my idea. It is ugly but it works.

Create a script like so:

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");

And then add it to your package.json:

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

Obviously this code will stop working when source-map-loader changes the error message. But I hope we will a real solution for it by then.

Excellence