未找到模块：无法解决＆lt; / lib / React＆＃39;

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

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和react-dom是独立的库，因此你应该使用相同的版本。

  

目前，请使用相同版本的react和react-dom   应用程序，以避免版本问题 - 但我们计划删除它   要求以后。 （此版本包括反应中的旧方法   包含弃用警告的包，但它们将被完全删除   在0.15。）。

Answer 2

如果您未在Webpack配置中指定.js是可解析的扩展名，也会发生这种情况。

例如，当Webpack寻找./lib/React时，如果仅将./lib/React.js指定为可解析的扩展名，则它将不寻找.ts文件。

Source

Answer 3

有时，当您更新自己的react版本而不是react-dom版本时，就会发生这种情况。

因此，请始终确保package.json中的react和react-dom版本应该相同