Version 4.8.4 seems to break the new way of importing into app.js?

[Svendelmaus]

Description

Basically, 4.8.4 seems to force us to use the old syntax in our app.js in our setup.

As a background, we've been updating a bunch of modules in our existing apps, including react-hot-loader. In our package.json file, we've updated it to say:

"react-hot-loader: "^4.8.3",

And, following the documentation, we've updated our app.js to say:

import { hot } from 'react-hot-loader/root';
...
export default hot(App);

This was all working fine until recently.

Today, I was taking over work someone else had done, and ended up doing a fresh install of the modules; npm install pulled in 4.8.4 instead of 4.8.3, and the app stopped working.

Expected behavior

No change from 4.8.3.

Actual behavior

In the console, there is an error that says "react-hot-loader/root is not supported on your system". The app does not run.

Changing the app.js file back to:

import { hot } from 'react-hot-loader';
...
export default hot(module)(App);

allows the app to run again.

Once I worked out what appeared to be causing the problem, I updated our package.json to lock the version to 4.8.3; this allowed me to change the app.js back to the react-hot-loader/root way of doing things.

I'd prefer not to have to lock the version if we don't have to, however.

Environment

React Hot Loader version: 4.8.4

node -v: v10.14.2
npm -v: 6.9.0

Operating system: Ubuntu 16
Browser and version: Chrome 73

[theKashey]

🤔

[theKashey]

I would need some help from you here.

The condition to throw an exception is clear - if (!module.parents || !module.parents[0]) {. If these variables are not defined - nothing could work.

The question how it worked before.

[Svendelmaus]

I'm happy to provide whatever I can; but I'm not sure that I understand the question?

If we are using 4.8.3, we can pull the hot from /root, and use export default hot(App); (as the current documentation suggests).

If we are using 4.8.4, this stops working, and we have to go back to import { hot } from 'react-hot-loader'; and export default hot(module)(App);, which is the syntax we were using with... 4.3.12, I think?

Looking a bit further into the documentation, it suggests that:

The "new" hot is just hidding the first part - hot(module), giving you only the second (App).

For 4.8.4, import { hot } from 'react-hot-loader/root'; doesn't seem to work at all.

Is that helpful?

(If no-one else is having this issue, then maybe something odd has happened with the 4.8.4 we've grabbed... I'll just keep poking at stuff until I work out why it's not working.)

[theKashey]

🙍‍♂️, you are the only one with this exception. There is no way I could reproduce it, and understand what is wrong.

I am asking you to DEBUG the problem. By your self, as long as you are the only one who can.

[Svendelmaus]

Argh.

Now I can't reproduce it any more either. >:/

Hmm. At our end, we're not connecting to GitHub directly; so maybe there was an issue with our cached copy that has since been corrected? It looks like the behaviour we were seeing would be consistent with there being a problem with our copy of the root.js file... but I see no reason why that would happen. :/

Anyway, it looks like a local issue that has been resolved, so I'll just apologise for taking up your time. :(

[theKashey]

Feel free to reopen the issue if problem would strike again.

[ignatevdev]

I have caught the same error.

Seems like the problem was in the unnecessary HotModuleReplacementPlugin in my webpack configuration.

When using webpack-dev-server, you shouldn't include it in your plugins array.

Removing the plugin has solved the problem