reactjs - 找不到模块 : Can't resolve 'react/lib/React'

Question

我一直在尝试运行我在 Github 上找到的现有 React 项目。我遇到了一些问题。首先，我需要将 React 更新到 v 16.2.0 才能使 React.Fragment 正常工作。现在，完成更新后，我遇到了第二个问题:

./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'

从控制台:

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. 造成此错误的原因是什么？
2. 如何解决？

其他信息:

这是项目主文件夹。这是 package.json 文件:

{
  "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": {}
}

我通过输入 npm install 并使用 npm start 托管来创建 node_modules 文件夹。

我删除了node_modules并运行了npm install；再次npm start，错误稍微改为:

./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'

在控制台中:

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

来自控制台的附加堆栈跟踪:

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

Answer 1

你的情况显然是react和react-dom包不兼容。确保您的react和react-dom包具有相同的版本以避免不兼容。

package.json 现在:

...

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

...

package.json 与兼容的react-dom和react包:

...

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

...

自 react-v0.14-beta-1 React 和 React-dom 是独立的库，你应该使用相同的版本。

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