webpack loader creates circular dependency when used with webpack-plugin-serve

[aaronjensen]

If you are reporting a bug or having an issue setting up React Hot Loader, please fill in below. For feature requests, feel free to remove this template entirely.

Description

When attempting to run an ejected create-react-app app with react-hot-loader and webpack-plugin-serve, there is a circular dependency load which causes the app to fail to load.

The load appears to come from the register() function injected by react-hot-loader/webpack. It seems that the register() function is being run immediately after react.js is evaluated, but before it is fully exported.

If I wrap the register function in a setTimeout, it works fine because the circular dependency is broken.

Expected behavior

What you think should happen:

It should work out of the box.

Actual behavior

What actually happens:

It doesn't, see description.

Environment

React Hot Loader version: 4.8.4

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

1. node -v: 10.9.0
2. npm -v: 6.8.0

Then, specify:

1. Operating system: macOS 10.14.3
2. Browser and version: Chrome 73

Reproducible Demo

https://github.com/aaronjensen/hot-serve-repro

[aaronjensen]

I filed a related issue here: shellscape/webpack-plugin-serve#117 but I'm guessing the real problem is in react-hot-loader and webpack-plugin-serve is just doing something slightly different than the default webpack dev server which is causing this issue.

[theKashey]

Thanks for the demo. Probably I know what is broken.

[shellscape]

@theKashey can you go into detail on what you think the cause is? is it something that can be fixed from within the plugin?

[theKashey]

Yeah, sorry - I really forget about this task :(
It's quite easy to fix it both from your side and RHL side - just exclude /node_modules\/(react|react-hot-loader)([\/]|$) from webpack-loader.
The same rule exists inside the babel-plugin, but missing in webpack-loader code.

[theKashey]

So

• everything is bad. There is no way I could modify webpack-loader to break a cycle.
• everything is good. There is a simple way how to modify your code, to prevent a cycle.

import 'react-hot-loader' before React. In your case - it's index.js

import 'react-hot-loader'; // <-------
import React from 'react';
import ReactDOM from 'react-dom';
// .....
ReactDOM.render(<App />, document.getElementById('root'));

You can also do the same trick by prefixing your entry with react-hot-loader/patch.js.