react-hot-loader: `hot` could not find the `id` property in the `module` you have provided

^ that

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

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

Try import { hot } from 'react-hot-loader/root';.

Update I was able to get it working thanks to this thread https://github.com/gaearon/react-hot-loader/issues/911

This is just a “too many cooks in the kitchen” problem. My problem was I was enabled HotModuleReplacementPlugin() based on one doc AND hot: true for dev server. When you do this with the directions listed on react-hot-loader doc you get the error about how your system is not compatible with react-hot-loader/root which is a false positive, i believe. The maximum call size you might be seeing is because (I imagine) webpack is injecting hot reloading twice, causing infinite recursion.

You are doing your best to keep your system secret. react-hot-loader/root is 10 lines long, try to understand why it throws an error.

Because nobody provided any example to reproduce. Every time (like here - #1240) I am asking for it, but nobody ever provided it or tried to spend their time to debug the issue.

What you shall understand - there is a standard module API. It says

• there is a module variable. A global local for each module.
• that variable shall have .id, .filename or .i fields. That’s more bound to the actual system.
• that variable shall have .parents(webpack) or .parent(nodejs).
• require.cache shall contain a Map to these modules.

If there is no .idin themodule you provided - than you provided a wrong module, or HotModuleReplacementPlugin which injects some portions of that “module system” is not installed. Or something else, like two HotModuleReplacementPlugin installed.

In any case - the problem is with your code, and there is nothing I could fix from side of mine one. I am happy to help, once you provide example to play with. Without any example - please excuse my low telepathy skills - they are not working via network, yet.

If something is wrong with module variable, which is injected via webpack - feel free to open issue for webpack, but they would not say “thank you”. What about providing some information here - just list the content of it, and then we might try to understand where the .id went.

And yet again - “you” are the only one who have the issue and able to debug and mitigate it.

You are doing your best to keep your system secret. react-hot-loader/root is 10 lines long, try to understand why it throws an error.

Real nice.

I’m caught in the same conundrum here. Using ‘react-hot-loader/root’ gives me an error telling me to stop using that import path. Using the other import path gives me the same exception as OP.

Why is this closed? I don’t see any resolution in the issue.

I am getting the same error. However, when I try the solution proposed above I get: Uncaught Error: React-Hot-Loader: react-hot-loader/rootis not supported on your system. Please useimport {hot} from “react-hot-loader” instead

Update I was able to get it working thanks to this thread #911

This is just a “too many cooks in the kitchen” problem. My problem was I was enabled HotModuleReplacementPlugin() based on one doc AND hot: true for dev server. When you do this with the directions listed on react-hot-loader doc you get the error about how your system is not compatible with react-hot-loader/root which is a false positive, i believe. The maximum call size you might be seeing is because (I imagine) webpack is injecting hot reloading twice, causing infinite recursion.

Thanks @framerate. I had the same issue. ie. used webpack-dev-server --hot plus load the HotModuleReplacementPlugin webpack plugin inside my webpack config.

@bugs181 - I really need some help here. There is a parcel example here, and it just works. How it works - so - this is how it works…

From this image it’s clearly visible why react-hot-loader/root would not work - there is no parents field present, but I do have the module.id, and I have no idea why it could be not present. There is nothing special about my example, and nothing about React-Hot-Loader - module variable is provided by webpack, node or parcel. And if you don’t have it, or it’s has a different shape - try to understand WHY and share the results.

Trying to be as polite as possible, but I’ve invested some time trying to solve this issue and only asking you to do the same.