Module build failed with devtool option to have source maps with original source quality

[ccambournac]

When using webpack's devtool option so as to obtain source maps with original source, like, e.g., eval-cheap-module-source-map, eval-source-map, or cheap-module-source-map, the build fails with the following error. (For bundled, generated, or transformed code, there is no error and the plugin works as expected.)

ERROR in ./src/index.js
Module build failed (from ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js):
Error: You must provide the URL of lib/mappings.wasm by calling SourceMapConsumer.initialize({ 'lib/mappings.wasm': ... }) before using SourceMapConsumer
    at readWasm (/Users/.../node_modules/@pmmmwh/react-refresh-webpack-plugin/node_modules/source-map/lib/read-wasm.js:8:13)
    at wasm (/Users/.../node_modules/@pmmmwh/react-refresh-webpack-plugin/node_modules/source-map/lib/wasm.js:25:16)
    at BasicSourceMapConsumer.then.that (/Users/.../node_modules/@pmmmwh/react-refresh-webpack-plugin/node_modules/source-map/lib/source-map-consumer.js:264:14)
 @ multi ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=true ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ErrorOverlayEntry.js ./src main[3]

We use a server-side application with a custom Express HTML server making use of Webpack Dev Middleware and Webpack Hot Middleware, like, e.g., at https://stackoverflow.com/a/41837779.

Plugin configuration is the following:

new ReactRefreshWebpackPlugin({
	forceEnable: true,
	overlay: {
		sockIntegration: 'whm',
	}
})

Versions used:
@pmmmwh/react-refresh-webpack-plugin 0.4.1
webpack 4.44.1
webpack-dev-middleware 3.7.2
webpack-hot-middleware 2.25.0

[pmmmwh]

I assume you're using some sort of fetch polyfill in Node?
This is unfortunately a bug upstream:

mozilla/source-map#349

[ccambournac]

Hi @pmmmwh, and thank you for the quick answer!

Indeed, I am using isomorphic-unfetch.

Any idea on how to avoid the error?

[ccambournac]

I assume I will have to get rid of the fetch polyfill...

[pmmmwh]

Any idea on how to avoid the error?

The simplest way right now is to use something else (e.g. cross-fetch) instead.

I could go around and patch the loader with an ugly hack I guess:

const originalFetch = global.fetch
delete global.fetch

// ... loader code

global.fetch = originalFetch

[ccambournac]

Let you choose then 👍

I confirm, however, that removing the fetch polyfill, does fix the issue.
Although features using fetch server-side are broken...

[pmmmwh]

Let you choose then 👍

I'll patch this in 0.4.2, probably today/tomorrow.

[ccambournac]

Would be great!

Thank you again @pmmmwh, both for the answer and of course the plugin itself.

[franciscocpg]

Same issue for me using isomorphic-unfetch.

[pmmmwh]

Released in v0.4.2.

[ccambournac]

Hi @pmmmwh,
I confirm there is no more build error when using source maps with original source quality!
Thank you!