fix: ignore webpack warnings by source-map-loader

[Bnaya]

Some third party packages may ship miss-configured sourcemaps, that interrupts the build See: https://github.com/facebook/create-react-app/discussions/11278#discussioncomment-1780169

To trigger the error, simply install "[email protected]" add import {} from "stylis-plugin-rtl" somewhere in the code

before:

After:

[raix]

Not sure if everything should be ignored or only warnings regarding node modules?

[Bnaya]

Not sure if everything should be ignored or only warnings regarding node modules?

source-maps-loader is used 99.9% of cases for node_modules only I've changed the impl to use function, maybe this will work

[jd1048576]

You could use the suggested example of

ignoreWarnings: [/Failed to parse source map/]

from the source map loader docs https://github.com/webpack-contrib/source-map-loader#ignoring-warnings

[Bnaya]

https://github.com/webpack-contrib/source-map-loader#ignoring-warnings

This will not give us the desired feature of focusing on node_modules, But i'll let the maintainer to give his hint

[raix]

@Bnaya I've tried rerunning the tests, but seem to be an issue either with caching or lock file - When doing npm install in the create-react-app project does it generate a new package-lock.json?

[Bnaya]

@Bnaya I've tried rerunning the tests, but seem to be an issue either with caching or lock file - When doing npm install in the create-react-app project does it generate a new package-lock.json?

I've ran npm install (With npm 8.3) and committed the updated lock file. Lets see if the CI pass

[Bnaya]

CI passes

[denchen]

I don't know how relevant this is, but I had ejected after upgrading to CRA 5, and I wanted to implement this source-map-loader change, and for the most part it worked. Except every now and then, when the dev server hot-reloads, the dev server crashes with "Cannot read 'resource' of undefined."

So the fix for me was to change the relevant line to:

warning.module?.resource.includes('node_modules') &&

(Note the optional chaining)

I don't know under what circumstances warning.module would be non-existent, so hopefully someone more knowledgable than me can chime in.

[Bnaya]

I will add a null check there, even tho by webpack code/types module shouldn't be undefined. https://github.com/webpack/webpack/blob/c181294865dca01b28e6e316636fef5f2aad4eb6/lib/WebpackError.js

Regarding using optional chaining, eslint won't let me use it in the project, so i will go with old-style check

[denchen]

I will add a null check there, even tho by webpack code/types module shouldn't be undefined. https://github.com/webpack/webpack/blob/c181294865dca01b28e6e316636fef5f2aad4eb6/lib/WebpackError.js

I was able to replicate the issue. What I did was introduce an ESLint error into one of my TSX files by simply adding:

const unusedVar = 1;

and never actually using unusedVar. This of course violates @typescript-eslint/no-unused-vars. After saving the file, the dev server crashes on re-compile:

TypeError: Cannot read property 'resource' of undefined
    at ignoreSourcemapsloaderWarnings (/Users/denchen/git/ui/config/webpack.config.js:792:26)
    at /Users/denchen/git/ui/node_modules/webpack/lib/IgnoreWarningsPlugin.js:30:8
    at Array.some (<anonymous>)
    at /Users/denchen/git/ui/node_modules/webpack/lib/IgnoreWarningsPlugin.js:29:36
    at Array.filter (<anonymous>)
    at /Users/denchen/git/ui/node_modules/webpack/lib/IgnoreWarningsPlugin.js:28:22
    at Hook.eval [as call] (eval at create (/Users/denchen/git/ui/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:16)
    at Hook.CALL_DELEGATE [as _call] (/Users/denchen/git/ui/node_modules/tapable/lib/Hook.js:14:14)
    at Compilation.getWarnings (/Users/denchen/git/ui/node_modules/webpack/lib/Compilation.js:4659:37)
    at context.cachedGetWarnings (/Users/denchen/git/ui/node_modules/webpack/lib/stats/DefaultStatsFactoryPlugin.js:487:20)

(node:89082) UnhandledPromiseRejectionWarning: RpcIpcMessagePortClosedError: Cannot send the message - the message port has been closed for the process 89082.
    at /Users/denchen/git/ui/node_modules/fork-ts-checker-webpack-plugin/lib/rpc/rpc-ipc/RpcIpcMessagePort.js:47:47
    at processTicksAndRejections (internal/process/task_queues.js:81:21)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:89082) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:89082) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

As stated in my original comment, I have ejected CRA with very minimal config changes, so I don't know how relevant my error is for non-ejected CRA.

[yann-combarnous]

@Bnaya , to be on-par with CRA4 when it comes to webpack dev server logging, could you consider adding

stats: 'errors-warnings'

to webpack.config.json?

This will get rid of all the assets bundling verbosity introduced in CRA5, while keeping warnings and errors displayed.

[Bnaya]

@Bnaya , to be on-par with CRA4 when it comes to webpack dev server logging, could you consider adding

stats: 'errors-warnings'

to webpack.config.json?

This will get rid of all the assets bundling verbosity introduced in CRA5, while keeping warnings and errors displayed.

I think It's out of the scope of this PR

[imcodingideas]

Just a fly on the wall here, and following this topic as were affected by this as well.

[wasurocks]

Still affected by this.

[jeongmincho]

Bump. Any updates on this?

[nickodell]

Thanks @Bnaya, that fixed my problem. If you're impatient like me, you can add this fix by editing the file node_modules/react-scripts/config/webpack.config.js, and pasting this after the line performance: false,.

    ignoreWarnings: [
      // Ignore warnings raised by source-map-loader.
      // some third party packages may ship miss-configured sourcemaps, that interrupts the build
      // See: https://github.com/facebook/create-react-app/discussions/11278#discussioncomment-1780169
      /**
       *
       * @param {import('webpack').WebpackError} warning
       * @returns {boolean}
       */
      function ignoreSourcemapsloaderWarnings(warning) {
        return (
          warning.module &&
          warning.module.resource.includes('node_modules') &&
          warning.details &&
          warning.details.includes('source-map-loader')
        );
      },
    ],

[gabrielmicko]

This would solve my issue too.. Should be merged.

[gabrielmicko]

Temporary solution for projects using customize-cra & react-app-rewired: Change following file: config-overrides.js:

const { override } = require('customize-cra');

const addIgnoreSourcemapsloaderWarnings = config => {
  config.ignoreWarnings = [
    // Ignore warnings raised by source-map-loader.
    // some third party packages may ship miss-configured sourcemaps, that interrupts the build
    // See: https://github.com/facebook/create-react-app/discussions/11278#discussioncomment-1780169
    /**
     *
     * @param {import('webpack').WebpackError} warning
     * @returns {boolean}
     */
    function ignoreSourcemapsloaderWarnings(warning) {
      return (
        warning.module &&
        warning.module.resource.includes('node_modules') &&
        warning.details &&
        warning.details.includes('source-map-loader')
      );
    },
  ];
  return config;
};

module.exports = override(
  addIgnoreSourcemapsloaderWarnings
);

Also thanks for the author of this PR to come up with the solution.

[mstephenson6]

Thanks @Bnaya, that fixed my problem. If you're impatient like me, you can add this fix by editing the file node_modules/react-scripts/config/webpack.config.js, and pasting this after the line performance: false,.

    ignoreWarnings: [
      // Ignore warnings raised by source-map-loader.
      // some third party packages may ship miss-configured sourcemaps, that interrupts the build
      // See: https://github.com/facebook/create-react-app/discussions/11278#discussioncomment-1780169
      /**
       *
       * @param {import('webpack').WebpackError} warning
       * @returns {boolean}
       */
      function ignoreSourcemapsloaderWarnings(warning) {
        return (
          warning.module &&
          warning.module.resource.includes('node_modules') &&
          warning.details &&
          warning.details.includes('source-map-loader')
        );
      },
    ],

This silences repeated sourcemap warnings for @aws-sdk, thank you!

[sairam0903]

If you okay to lose the sourceMaps in local, Add GENERATE_SOURCEMAP=false in .env.developement file. So that until this fix is released, you can ignore warnings in your local and still have sourceMaps in other env

[TD-DO]

Is this any closer to being fixed or is there something I can do to suppress the warning on my end? Besides the excellent suggestion to edit webpack.config.js. I would do that but I delete and reinstall node modules frequently enough that it wouldn't make much sense

[austin-thrive]

Is this any closer to being fixed or is there something I can do to suppress the warning on my end? Besides the excellent suggestion to edit webpack.config.js. I would do that but I delete and reinstall node modules frequently enough that it wouldn't make much sense

@TD-DO if you want an extra band-aid, for the band-aid fix, you can also use https://www.npmjs.com/package/patch-package to automatically re-apply the fix anytime your modules are reinstalled.

[ganeshkrishnasharma]

Bump. Still affected. Can this be reviewed and merged?

[Minho-Lee]

Obligatory check in, as the month is now August... Can this please be merged?!

[k-funk]

Bump.

These are not useful warnings for me, and are noise from seeing meaningful warnings. I've made an issue for the maintainers, but can only expect so much of other libraries.

WARNING in ./node_modules/@twilio/audioplayer/es5/EventTarget.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/.../node_modules/@twilio/audioplayer/es5/EventTarget.js.map' file: Error: ENOENT: no such file or directory, open '/Users/.../node_modules/@twilio/audioplayer/es5/EventTarget.js.map'

[Faotu]

The app will work even when those warnings are showing

[isabellachen]

Bump. Still affected. Can this be reviewed and merged?

[vladimirevstratov]

Any updates?

[harshith-venkatesh-freshworks]

We are indeed waiting for this PR to be updated and merged :)

[graeme-hill]

This is just a workaround, but FYI I was able to avoid these warnings by using craco. craco allows you to overlay configuration on create-react-app without ejecting. One of its features is customizing the webpack config. Based on the config change in this PR, I put this in my craco.config.js:

module.exports = {
  webpack: {
    configure: {
      ignoreWarnings: [
        function ignoreSourcemapsloaderWarnings(warning) {
          return (
            warning.module &&
            warning.module.resource.includes('node_modules') &&
            warning.details &&
            warning.details.includes('source-map-loader')
          )
        },
      ],
    },
  },
}