找不到模块:无法解析'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和托管来创建node_modules文件夹npm start.

我删除了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软件包具有相同的版本以避免不兼容.

package.json 现在:

...

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

...

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

...

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

...

由于react-v0.14-beta-1反应和react-dom是独立的库,你应该使用相同的版本.

目前,请在您的应用中使用相同版本的react和react-dom以避免版本控制问题 - 但我们计划稍后删除此要求.(此版本包含反应包中的旧方法和弃用警告,但它们将在0.15中完全删除.).