找不到模块：错误：无法解析“react-dom/client”

Question

我正在将 React 与以下软件包一起使用：

\n

{\n  "name": "demo",\n  "version": "0.1.0",\n  "private": true,\n  "dependencies": {\n    "@testing-library/jest-dom": "^5.16.4",\n    "@testing-library/react": "^13.0.1",\n    "@testing-library/user-event": "^13.5.0",\n    "h3-js": "^3.7.2",\n    "leaflet": "^1.7.1",\n    "react": "^17.0.1",\n    "react-dom": "^17.0.1",\n    "react-leaflet": "3.0.2",\n    "react-scripts": "5.0.1",\n    "web-vitals": "^2.1.4"\n  },\n  "scripts": {\n    "start": "react-scripts start",\n    "build": "react-scripts build",\n    "test": "react-scripts test",\n    "eject": "react-scripts eject"\n  },\n  "eslintConfig": {\n    "extends": [\n      "react-app",\n      "react-app/jest"\n    ]\n  },\n  "browserslist": {\n    "production": [\n      ">0.2%",\n      "not dead",\n      "not op_mini all"\n    ],\n    "development": [\n      "last 1 chrome version",\n      "last 1 firefox version",\n      "last 1 safari version"\n    ]\n  }\n}\n

\n

我的index.js看起来如下：

\n

import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport reportWebVitals from './reportWebVitals';\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>\n);\n\nreportWebVitals();\n\n

\n

我的App.js像下面这样：

\n

import React from "react";\nimport { render } from "react-dom";\nimport LeafletMap from "./Map";\n\nclass App extends React.Component {\n  state = { resolution: 8, kRing: 0 };\n\n  constructor(props) {\n    super(props);\n    this.state = { resolution: 8, kRing: 0 };\n  }\n\n  render() {\n    return (\n      <div>\n        <LeafletMap\n          resolution={this.state.resolution}\n          kRing={this.state.kRing}\n        />\n        Resolution:\n        <input\n          type="number"\n          min={0}\n          max={15}\n          onChange={this.onChangeResolution}\n          defaultValue={8}\n        />\n        <br />\n        K Rings:\n        <input\n          type="number"\n          min={0}\n          max={100}\n          onChange={this.onChangeKRings}\n          defaultValue={0}\n        />\n      </div>\n    );\n  }\n\n  onChangeResolution = (e) => {\n    this.setState({ resolution: Number.parseInt(e.target.value) });\n  };\n  onChangeKRings = (e) => {\n    this.setState({ kRing: Number.parseInt(e.target.value) });\n  };\n}\n\nexport default App;\n\n

\n

当我运行我的应用程序时，npm run start出现以下错误：

\n

Compiled with problems:X\n\nERROR in ./src/index.js 5:0-40\n\nModule not found: Error: Can't resolve 'react-dom/client' in '/home/Desktop/Code/demo_app/src'\n

\n

我重新安装了所有软件包，它也列在npm list：

\n

>  npm list\ndemo_app@0.1.0 /home/Desktop/Code/demo_app\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 @testing-library/jest-dom@5.16.4\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 @testing-library/react@13.0.1\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 @testing-library/user-event@13.5.0\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 h3-js@3.7.2\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 leaflet@1.7.1\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 react-dom@17.0.1\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 react-leaflet@3.0.2\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 react-scripts@5.0.1\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 react@17.0.1\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 web-vitals@2.1.4\n

\n

对于我在编译应用程序时遇到问题的任何建议？

\n

Answer 1

对我有用的最终解决方案是将 React 18index.js文件更改为以下内容：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
reportWebVitals();

Answer 2

您的依赖项中仍然有旧版本的“react”和“react-dom”。解决方法：

1. 删除这两行：

    "react": "^17.0.1",
    "react-dom": "^17.0.1",

2. 将它们替换为：

    "react": "^18.1.0",
    "react-dom": "^18.1.0",

3. 删除“node_modules”文件夹
4. 这样做npm install 应该可以解决您的问题并将您的应用程序更新为react18

Answer 3

你可能需要降级React和react-dom，这里是index.js：

反应 17 示例：

import React from "react";
import { render } from "react-dom";
import "./index.css";
import App from "./App";

const root = document.getElementById("root");
render(<App />, root);

反应 18 示例：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Answer 4

总之，如果您使用的是 React 17（我的版本是 17.0.2），您的 index.js 必须如下所示，

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
 document.getElementById('root')
);

如果您使用的是 React 18，您的 index.js 文件应如下所示

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
 <React.StrictMode>
   <App />
 </React.StrictMode>
);

当我将 React 18 项目降级为 React 17 项目时，我遇到了问题。我用了，

npm install react@17 react-dom@17

对于打字稿项目，

npm install react@17 @types/react@17 react-dom@17 @types/react-dom@17