logo标签列表

无法解析模块 'react-dom'

reactjswebpackreact-domreact-hot-loader
40

我看到了一些与这种错误相关的帖子，但是在我的情况下无法解决。

我的package.json文件：

"react": "~0.14.7",
"webpack": "^1.12.13",
"react-hot-loader": "^3.0.0-beta.6",
.
.

我在webpack上遇到了以下错误：

ERROR in ./public/src/main.js
Module not found: Error: Cannot resolve module 'react-dom' in C:\Users\react-example\public\src 
@ ./public/src/main.js 19:16-36

但是在命令行中当我执行了

npm -v react-dom

我使用的是3.10.10版本的React-DOM，但我不知道为什么还是会出现这个错误。

当我通过npm安装了React-DOM（"npm install react-dom"），然后运行webpack时，出现了以下错误：

ERROR in ./~/react-dom/lib/ReactDOMNullInputValuePropHook.js
Module not found: Error: Cannot resolve 'file' or 'directory' C:\Users\react-example/node_modules/react/lib/ReactComponentTreeHook in C:\Users\react-example\node_modules\react-dom\lib
 @ ./~/react-dom/lib/ReactDOMNullInputValuePropHook.js 13:29-72

ERROR in ./~/react-dom/lib/ReactDOMUnknownPropertyHook.js
Module not found: Error: Cannot resolve 'file' or 'directory' C:\Users\react-example/node_modules/react/lib/ReactComponentTreeHook in C:\Users\react-example\node_modules\react-dom\lib
 @ ./~/react-dom/lib/ReactDOMUnknownPropertyHook.js 15:29-72

ERROR in ./~/react-dom/lib/ReactDOMInvalidARIAHook.js
Module not found: Error: Cannot resolve 'file' or 'directory' C:\Users\react-example/node_modules/react/lib/ReactComponentTreeHook in C:\Users\react-example\node_modules\react-dom\lib
 @ ./~/react-dom/lib/ReactDOMInvalidARIAHook.js 14:29-72

ERROR in ./~/react-dom/lib/ReactDebugTool.js
Module not found: Error: Cannot resolve 'file' or 'directory' C:\Users\react-example/node_modules/react/lib/ReactComponentTreeHook in C:\Users\react-example\node_modules\react-dom\lib
 @ ./~/react-dom/lib/ReactDebugTool.js 16:29-72
请帮忙。
这个对我有帮助：https://dev59.com/kVYN5IYBdhLWcg3wQWMV#47722556 - hawkeye
12个回答
59

问题是未安装 react-dom，当你使用 npm -v react-dom 命令时，它会返回 npm 的版本号而不是 react-dom 的版本号。你可以使用 npm -v 或者 npm -v react-dom 来检查这一点，两者都会返回相同的结果。你正在错误地检查包版本。

如何正确安装 react 和 react-dom？

使用以下命令来安装 react 和 react-dom：

npm install react react-dom --save

完成后，您可以检查您的package.json文件。如果react和react-dom已正确安装，则会在其中找到相应的条目。

如何检查安装的包版本？

要检查所有本地安装的包的版本：

npm list

对于全局安装的包，也要使用 -g 参数:

npm list -g

要检查特定软件包的版本，请同时指定软件包名称：

npm list PackageName

For Example =>
   npm list react
   npm list react-router
在安装之后，您的 package.json 文件将会如下所示：
{
  "name": "***",
  "version": "1.0.0",
  "main": "***",
  "scripts": {
     ....
  },
  "repository": {
     ....
  },
  "keywords": [],
  "author": "",
  "dependencies": {
    ....
    "react": "^15.4.2",          //react
    "react-dom": "^15.4.2",      //react-dom
     ....
  },
  "devDependencies": {
     ....
  }
}

最新版本的 react-dom 是：15.4.2

参考链接：https://www.npmjs.com/package/react-dom

2
我在问题中说过，安装了react-dom后，我会遇到这些错误。现在情况仍然如此。 - User1230321
30

我这种情况下，在我的webpack.config.common.js文件中有一个别名：

 resolve: {
    extensions: ['.js', '.jsx'],
    alias: {
      'react-dom': '@hot-loader/react-dom',
    },
  },

我刚刚移除了这一行：

'react-dom': '@hot-loader/react-dom',

问题已经得到解决。

1
请确保已安装@hot-loader/react-dom。 - Michael Cox
1
那么你就无法从@hot-loader中受益了。 - Ben
随着人们转向react-refresh，这种情况会更加普遍。 - Shawn Erquhart
我爱你兄弟，我一直在寻找解决方案... 它很简单却很难找到，谢谢！ - Paweł Andruszków
6

我使用了“npm update”命令，解决了我的问题。

5
在我的情况下，是我在webpack.conf中设置的别名，它正在寻找@hot-loader/react-dom。
4

如果有人看到这篇文章无法理解，我也曾遇到同样的问题，最终通过安装"react-router" package来解决，只需运行以下命令即可：

浏览器应用程序： npm i react-router-dom --save

本机应用程序： npm i react-router-native

1
您也可以尝试通过更新react react-dom模块来解决此问题，尝试使用npm install react@latest react-dom@latest命令。
1

您可能需要更新react和react-dom。尽管实际上已安装react-dom，但在^15.5.4上出现了此问题，并且使用^16.8.6后问题消失：

$ # update the react and react-dom modules
$ yarn add react react-dom

请确保在package.json中两个版本完全匹配：

"react": "^16.8.6",
"react-dom": "^16.8.6",

删除 yarn.lock、node_modules 和 yarn，再次执行此操作。
rm -Rf yarn.lock node_modules && yarn
0
尝试使用以下命令：rm -rf node_modules && yarn 或者 rm -rf node_modules && npm install（如果你使用的是npm而不是yarn）来解决问题。
0
0

我遇到的问题是：

错误：./src/index.js模块未找到: 错误：无法解析 'eact-dom' 在'C:\Users\Jose\Desktop\woz-u-React\React-Course\react-lesson-one\src'中 @ ./src/index.js 2:0-32 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js

为了解决这个问题，我必须在安装前解压文件夹。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接