score:25

Accepted answer

This issue is related to the react-hot-loader package. You are using an old version that relies on the ReactMount.js file being present in the node_modules/react/lib folder.

There is no easy one way fix for that but you have a few options which are:

  1. Try to follow the instructions here: https://github.com/gaearon/react-hot-loader/blob/v3.0.0-beta.6/docs/README.md#usage-with-external-react (but I have been unlucky so far)

  2. Remove the hot reloader for react (in your webpack.config remove the 'react-hot' loader)

  3. Update the react-hot-loader package to version 3 (here is how to do so: https://github.com/gaearon/redux-devtools/commit/64f58b7010a1b2a71ad16716eb37ac1031f93915). But note that this package has been in alpha for a while now...

  4. Rollback your react version to one that includes the ReactMount.js in the lib folder (15.0.1 used to have this file not sure when it stopped).

Update: React Hot Loader 3 is now in beta with a more comprehensive upgrade guide: https://github.com/gaearon/react-hot-loader/tree/v3.0.0-beta.7/docs#migration-to-30

score:0

Updating react-hot-loader didn't work for me, but removing the react-hot form the loaders list, by simply commenting it, fixed the issue:

{
    test: /\.js$/,
    exclude: /node_modules/,
    loaders: [
        // 'react-hot',
       'babel'
    ]
}

score:0

There are two issues at play:

  1. Properly upgrading all your dependencies, and,
  2. Use webpack v. 3.11.0, DO NOT upgrade to webpack v. 4.00,
  3. Downgrade ReactJS to React v. 15.6.2.

Open package.json, which will have a list of things like...

"dependencies": {
  "jquery": "^3.2.1",
  "jquery-ui": "^1.12.1",
  "react": "^15.6.1",
  "react-dom": "^15.6.1",
  "react-scripts": "1.0.10",
  "webpack": "^3.6.0"
  (etc.)

Then run a command like this in your package base directory, which has the same dependencies as listed above...

sudo npm install --save react@15.6.2 react-dom@15.6.2 react-scripts@latest webpack@3.11.0 jquery@latest jquery-ui@latest

TLDR ANSWER : ^^^ This is the one command you'll actually need to run.

Notice the webpack-specific version.

After this, everything worked for me! I I checked the ReactJS version , using this answer , https://stackoverflow.com/a/36994601/2430549 , and my package.json now looks like...

"dependencies": {
  "jquery": "^3.3.1",
  "jquery-ui": "^1.12.1",
  "react": "^16.4.0",
  "react-dom": "^16.4.0",
  "react-hot-loader": "^4.2.0",
  "react-scripts": "^1.1.4",

Source: Answer by JanTheHun, https://github.com/angular/angular-cli/issues/9793

score:0

For me it was an old version of react-dom.

I changed versions of react and react-dom to 16.X (to be exact : "react": "16.13.1", "react-dom": "16.13.1",), and then this problem went away for me.

score:2

This is probably just a dependency issue. It's either not getting the correct version of react or not installing it correctly.

# update npm
$ npm install -g npm

# reinstall the generator-react-webpack package (note the global tags)
$ npm install -g yo
$ npm install -g generator-react-webpack

Then attempt to generate your app.

score:2

I had the same problem and none of the solution worked. It then occurred to me that it seems that react is missing. I got the problem after I installed and uninstalled a package for postgreSQL.

So I added it. PS, I was using yarn

yarn add react

score:3

Thank you for all your answers. I have solved my problems.

" This issue is related to the react-hot-loader package. You are using an old version that relies on the ReactMount.js file being present in the node_modules/react/lib folder." said by cheesemacfly.

So here is the solution for me: 1) updating the react-hot-loader to the latest version

npm install --save-dev react-hot-loader@latest

but here is another problem linked with react-hot-loader enter image description here

2) so I removed the react-hot-loader from 'cfg/dev.js' change the code

loader: 'react-hot!babel-loader'

into

loader: 'babel-loader'

score:3

Many thanks to cheesemacfly, I was able to solve the same issue with your suggestion to remove 'react-hot' from the loader.

{
    test: /\.(js|jsx)$/,
    loaders: ['react-hot', 'babel'],
    exclude: /(node_modules|lib\/ckeditor)/
}

I Changed to:

{
    test: /\.(js|jsx)$/,
    loader: 'babel',
    exclude: /(node_modules|lib\/ckeditor)/
}

Remember to change the word 'loaders' to 'loader' since you are no longer referencing a list.

score:6

You are using an outdated react-hot-loader package that uses the internal react api throught react\lib\ReactMount. Now react doesn't allow this hence the problem.

Try updating it to the latest version:

$ npm install --save-dev react-hot-loader@latest

score:8

None of the above solutions worked for me. Spent the rest of the day in a rabbit hole of github issues/comments, weighing the pros/cons/feasibility of various hacky workarounds.

The quickest, simplest, "I just want to work on the original problem I intended to work on today" fix that worked for me comes from: https://github.com/gaearon/react-hot-loader/issues/417#issuecomment-261548082

In your webpack config, add the following alias to the resolve section:

resolve: {
  alias: { 'react/lib/ReactMount': 'react-dom/lib/ReactMount' }
}

This is not a stable long term fix, this is a development only fix so you can continue developing without being forced to deal with upgrade issues out of the blue.

I'm still not 100% sure why I'm seeing this problem in my one app and not another, both were generated from fountain.js react-redux generator and have identical package.json.


Related Query

More Query from same tag