fix: ignore webpack warnings by source-map-loader

[Bnaya]

Some third party packages may ship miss-configured sourcemaps, that interrupts the build
See: #11278 (comment)

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.

[adamkui]

Is anyone currently working on resolving the conflicts for this PR? I think there are many of us waiting for this fix :)

[KholdStare]

Waiting for this too. Any updates?

[Rishav-k]

I am getting this error and i am stuck

[k-funk]

Another case where dependencies produce warnings.

my project depends on

1. swagger-ui-react -> remarkable -> autolinker Failed to parse source map gregjacobs/Autolinker.js#396
2. swagger-ui-react -> ... -> unraw npm package distribution - source maps errors with webpack@5 and CRA iansan5653/unraw#33

[albanx]

any update on this PR? Can someone solve the conflicts and merge it?

[alleksei37]

😭😭😭😭

[saurabh-cimpress]

Any update on this please?

[reymundelosantosIII]

Any update pls.