6

I've been trying to run an existing React project that I found on Github. I've had some issues. First, I needed to update React to v 16.2.0 to get React.Fragment working. Now, having done the update, I'm getting this second issue:

./node_modules/react-dom/lib/ReactCompositeComponent.js
Module not found: Can't resolve 'react/lib/React' in '/Users/sahandzarrinkoub/Documents/Programming/DH2642/Sentify/repo/Sentify/node_modules/react-dom/lib'

from the console:

index.js:2178 ./node_modules/react-dom/lib/instantiateReactComponent.js
Module not found: Can't resolve 'react/lib/getNextDebugID' in '/Users/sahandzarrinkoub/Documents/Programming/DH2642/Sentify/repo/Sentify/node_modules/react-dom/lib'
__stack_frame_overlay_proxy_console__   @   index.js:2178
handleErrors    @   webpackHotDevClient.js:178
./node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage  @   webpackHotDevClient.js:211
./node_modules/sockjs-client/lib/event/eventtarget.js.EventTarget.dispatchEvent @   eventtarget.js:51
(anonymous) @   main.js:274
./node_modules/sockjs-client/lib/main.js.SockJS._transportMessage   @   main.js:272
./node_modules/sockjs-client/lib/event/emitter.js.EventEmitter.emit @   emitter.js:50
WebSocketTransport.ws.onmessage @   websocket.js:35
  1. What is the reason for this bug?
  2. How to fix it?

ADDITIONAL INFO:

enter image description here

Here is the project home folder. Here is the package.json file:

{
  "name": "Sentify",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "ajv": "^5.5.2",
    "cors": "^2.8.4",
    "dom": "0.0.3",
    "jquery": "^3.3.1",
    "jsdom": "^11.7.0",
    "mapbox-gl": "^0.44.1",
    "material-ui": "^0.20.0",
    "react": "^16.2.0",
    "react-d3-basic": "^1.6.11",
    "react-d3-core": "^1.3.9",
    "react-d3-shape": "^0.3.25",
    "react-dom": "^15.6.2",
    "react-router-dom": "^4.3.0-rc.2",
    "react-scripts": "1.1.1",
    "react-simple-pie-chart": "^0.5.0",
    "webpack": "^3.11.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {}
}

I'm creating the node_modules folder by typing npm install and hosting with npm start.

I removed node_modules and ran npm install; npm start again, and the error changed slightly to:

./node_modules/react-dom/lib/ReactMount.js
Module not found: Can't resolve 'react/lib/React' in '/Users/sahandzarrinkoub/Documents/Programming/DH2642/Sentify/repo/Sentify/node_modules/react-dom/lib'

in console:

index.js:2178 ./node_modules/react-dom/lib/instantiateReactComponent.js
Module not found: Can't resolve 'react/lib/getNextDebugID' in '/Users/sahandzarrinkoub/Documents/Programming/DH2642/Sentify/repo/Sentify/node_modules/react-dom/lib'
__stack_frame_overlay_proxy_console__   @   index.js:2178
handleErrors    @   webpackHotDevClient.js:178
./node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage  @   webpackHotDevClient.js:211
./node_modules/sockjs-client/lib/event/eventtarget.js.EventTarget.dispatchEvent @   eventtarget.js:51
(anonymous) @   main.js:274
./node_modules/sockjs-client/lib/main.js.SockJS._transportMessage   @   main.js:272
./node_modules/sockjs-client/lib/event/emitter.js.EventEmitter.emit @   emitter.js:50
WebSocketTransport.ws.onmessage @   websocket.js:35

Additional stack trace from console:

ReactDebugTool.js:14 Uncaught Error: Cannot find module "react/lib/ReactComponentTreeHook"
    at webpackMissingModule (ReactDebugTool.js:14)
    at Object../node_modules/react-dom/lib/ReactDebugTool.js (ReactDebugTool.js:14)
    at __webpack_require__ (bootstrap f031d93a2683340d518f:678)
    at fn (bootstrap f031d93a2683340d518f:88)
    at Object../node_modules/react-dom/lib/ReactInstrumentation.js (ReactInstrumentation.js:17)
    at __webpack_require__ (bootstrap f031d93a2683340d518f:678)
    at fn (bootstrap f031d93a2683340d518f:88)
    at Object../node_modules/react-dom/lib/ReactReconciler.js (ReactReconciler.js:12)
    at __webpack_require__ (bootstrap f031d93a2683340d518f:678)
    at fn (bootstrap f031d93a2683340d518f:88)
    at Object../node_modules/react-dom/lib/ReactUpdates.js (ReactUpdates.js:17)
    at __webpack_require__ (bootstrap f031d93a2683340d518f:678)
    at fn (bootstrap f031d93a2683340d518f:88)
    at Object../node_modules/react-dom/lib/ChangeEventPlugin.js (ChangeEventPlugin.js:15)
    at __webpack_require__ (bootstrap f031d93a2683340d518f:678)
    at fn (bootstrap f031d93a2683340d518f:88)
    at Object../node_modules/react-dom/lib/ReactDefaultInjection.js (ReactDefaultInjection.js:13)
    at __webpack_require__ (bootstrap f031d93a2683340d518f:678)
    at fn (bootstrap f031d93a2683340d518f:88)
    at Object../node_modules/react-dom/lib/ReactDOM.js (ReactDOM.js:14)
    at __webpack_require__ (bootstrap f031d93a2683340d518f:678)
    at fn (bootstrap f031d93a2683340d518f:88)
    at Object../node_modules/react-dom/index.js (index.js:3)
    at __webpack_require__ (bootstrap f031d93a2683340d518f:678)
    at fn (bootstrap f031d93a2683340d518f:88)
    at Object../src/index.js (discover.js:19)
    at __webpack_require__ (bootstrap f031d93a2683340d518f:678)
    at fn (bootstrap f031d93a2683340d518f:88)
    at Object.0 (welcome.js:22)
    at __webpack_require__ (bootstrap f031d93a2683340d518f:678)
    at ./node_modules/ansi-regex/index.js.module.exports (bootstrap f031d93a2683340d518f:724)
    at bootstrap f031d93a2683340d518f:724
Improve this question
2
  • I can say compatibility issues, can you let me know which GitHub project you upgraded the version to React 16.2.0. Commented Apr 11, 2018 at 14:55
  • The github project is this one: github.com/NiekBijman/Sentify . Please note that I've also removed the node_modules folder in my screenshot and re installed React for the project. That way I didn't need to upgrade React, but the problem persists! Commented Apr 11, 2018 at 14:59

4 Answers 4

Reset to default
15

Your case it is clearly react and react-dom packages incompatibility. Make sure that your react and react-dom packages have the same version to avoid incompatibility.

package.json now:

...

"react": "^16.2.0",
"react-dom": "^15.6.2", 

...

package.json with compatible react-dom and react packages:

...

"react": "^16.2.0",
"react-dom": "^16.2.0", 

...

Since react-v0.14-beta-1 react and react-dom are separate libraries and you are supposed to use the same version.

For now, please use the same version of react and react-dom in your apps to avoid versioning problems — but we plan to remove this requirement later. (This release includes the old methods in the react package with a deprecation warning, but they’ll be removed completely in 0.15.).

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

This can also happen if you do not specify that .js is a resolvable extension in your Webpack configuration.

When Webpack looks for ./lib/React, it won't look for the ./lib/React.js file if, for example, you only specify .ts as a resolvable extension.

Source

Improve this answer

Comments

0

This sometimes happens when you update yours react version but not react-dom version.

So, always make sure react and react-dom version should be the same in package.json

Improve this answer

Comments

0

In one of my projects, I was using lerna for mono-repo and had alias entries for react, react-dom. I removed the aliased and it worked out for me.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.