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

[tilwinjoy]

Uncaught Error: React-hot-loader: hot could not find the id property in the module you have provided

Expected behavior

The getting started guide works as expected

Actual behavior

What actually happens: above mentioned error is thrown

Environment

React Hot Loader version: 4.8.2

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

1. node -v: v8.9.4
2. npm -v: 5.6.0

Then, specify:

1. Operating system: MacOS Mojave
2. Browser and version: Chrome Version 73.0.3683.103 (Official Build) (64-bit)

Error is thrown from:

import React from 'react';
import { hot } from 'react-hot-loader';

const App = () => <div>Hello world!</div>;

export default hot(App);

which is taken from Getting started guide

[rybon]

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

[theKashey]

^ that

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

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

[Nitzperetz]

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

[theKashey]

So, what is your system? Try really use the first version of hot from the example above.

[Nitzperetz]

Tried with:
RHL: v4.8.2
node: v10.11.0
npm: v6.9.0

When using the example above, still getting:
Uncaught Error: React-Hot-Loader: `react-hot-loader/root` is not supported on your system. Please use `import {hot} from "react-hot-loader"` instead

[theKashey]

react-hot-loader/root is nodejs and webpack compatible. Not compatible with parcel or visa versa.

[Nitzperetz]

react-hot-loader/root is nodejs and webpack compatible. Not compatible with parcel or visa versa.

Not using parcel.

[theKashey]

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.

[mmmeff]

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.

[theKashey]

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 themoduleyou 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.

[bugs181]

Just discovered this library and Parcel about an hour ago. Trying to be as polite as possible, "figure it out" is NOT a solution to get people on board with your product.

I too am having the same issue as others in this thread. Each set of documentation says "refer to the other docs" and we're just suppose to figure it out. So much for Parcel's "zero configuration" and "Get started instantly" sales-pitch. I'd much rather go back to React because at least it works out of the box.

FWIW: I've tried every variation of the snippets mentioned in this thread and elsewhere and even though I can get it to run with no errors, I'm left with a blank page.

[theKashey]

@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.

[theKashey]

As I said - there is nothing React-Hot-Loader could do with the module variable.

According to the issue both webpack(@Nitzperetz "Not using parcel.") and parcel(@bugs181 using Parcel) bundlers are affected, but the real reason is unknown.

Long story short:

• (old API) import {hot} from 'react-hot-loader' + hot(module)(App) requires .id to exists of the module. RHL does not actually need it, it's just a check for expected module format - only module.hot is used
• (new API) import {hot} from 'react-hot-loader/root + hot(App) requires .parents to exists on the module, which is not a case for parcel bundler. Next it would call oldApi, so the rest is the same.
• module.id does not actually exists for webpack as a field - it's a getter you might loose with some transformations, but you shall never mutate/copy this _secret_ variable, and that shall not be the case.
• we had a few examples with global module shadowed by a local variable with the same name. It wasn't a case with example provided(first comment).
• you may setup HMR by your own using module.hot.accept(./App). See _your bundler_ documentation for details, or v3 docs.

The expectations from module system were explained here - https://github.com/gaearon/react-hot-loader/issues/1228#issuecomment-490795520

Local tests, examples and other users are not facing this issue, thus I am closing this one, as long as nobody provided an example and I am not able to confirm the issue.

[theKashey]

v4.8.5 might fix it, or provide a more understandable error.

[framerate]

https://github.com/secretcowlevel/scl-react-starter/commit/82c6affbc4fd7f585aeae211a4acbcbc1edf8321

There is a commit that seems simple enough to me, based on the documentation I see here and on webpack's site and I get the error that the new API is not compatible.

Maybe now you'll have the info you need to offer a solution? I was just trying to understand the current state of react-hot-loading and it seems like I'm not the only one ending up at a deadend based on documentation.

I'm sure it's just user error, though. Can you help fill in the gap?

Uncaught Error: React-Hot-Loader: `react-hot-loader/root` is not supported on your system. Please use `import {hot} from "react-hot-loader"

EDIT: This is the error I want to understand. Following the directions leads me to the bug listed here. And also the documentation is very clear that we should NOT be using the old API. So I want to understand the new one. I have latest webpack/react/etc as far as I can tell, so I'm having trouble figuring out why.

[framerate]

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.

[damienallen]

I had similar errors to those mentioned here, but with webpack. In my case the source was missing this key step from the readme:

Make sure react-hot-loader is required before react and react-dom

Switched the order of the imports and it started working.

[jperasmus]

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.