react-hot-loader may break the app in Webpack 5.0.0-beta.14 and up

[wojtekmaj]

Note: This has also been reported in Webpack repo.

Description

I'm getting an error "ReferenceError: exports is not defined" when running the application that uses with react-hot-loader and imports d3-array built with Wepack 5.0.0-beta.14 and up.

Expected behavior

"Uncaught ReferenceError: exports is not defined" not to be thrown when executing Webpack-bundled code.

Actual behavior

Here's the exact error:

Uncaught ReferenceError: exports is not defined
    at register (cross.js?0cbf:23)
    at eval (cross.js?0cbf:23)
    at Object.../node_modules/d3-array/src/cross.js (charts.js:376)
    at __webpack_require__ (src.js:6070)
    at fn (src.952fd4b1.js:6330)
    at eval (index.js:18)
    at Object.../node_modules/d3-array/src/index.js (charts.js:496)
    at __webpack_require__ (src.js:6070)
    at fn (src.js:6330)
    at eval (band.js:5)

Any of the following seem to unbreak the app:

• removing d3-array import (duh)
• export default hot(Root) -> export default Root
• applying react-hot-loader/webpack loader to /node_modules\/react-dom/ only and not /node_modules/

Tested other versions of Webpack, changing absolutely nothing but the Webpack version, and here's my findings:

Version	Crashes?
4.43.0	✅ No
5.0.0-beta.12	✅ No
5.0.0-beta.13	✅ No
5.0.0-beta.14	❌ Yes
5.0.0-beta.16	❌ Yes

Environment

React Hot Loader version: 4.12.21

Run these commands in the project folder and fill in their results:

1. node -v: 12.16.2
2. npm -v: 6.14.4

Then, specify:

1. Operating system: macOS Catalina
2. Browser and version: Chrome 81.0.4044.129

Reproducible Demo

Reproducible repo

[theKashey]

applying react-hot-loader/webpack loader to /node_modules/react-dom/ only

Is a good idea. There is no need to apply any "hot" stuff on the "static" node_modules

Additionally, you can pass noRegister option to webpack loader and it will skip the moment which is failing.

[kahirokunn]

Is there any progress?

[theKashey]

React-Hot-Loader is deprecated. There are newer variants based on FastRefresh compatible with wp5

• https://github.com/pmmmwh/react-refresh-webpack-plugin
• https://github.com/WebHotelier/webpack-fast-refresh

[kahirokunn]

@theKashey I see. Thank you!

[wojtekmaj]

@kahirokunn And also instructions for this deprecated package were updated to keep people from falling into this trap, see #1452.

[whw583]

React-Hot-Loader is deprecated. There are newer variants based on FastRefresh compatible with wp5

• https://github.com/pmmmwh/react-refresh-webpack-plugin
• https://github.com/WebHotelier/webpack-fast-refresh

but not support react 15.

[theKashey]

Not sure why you use still React 15 (at least in dev mode). 16 is 100% backward compatible.