无法从 \"src\\main.jsx\" 解析导入 \"react-dom/client\"。该文件是否存在？答案

【问题标题】：Failed to resolve import "react-dom/client" from "src\main.jsx". Does the file exist?无法从 \"src\\main.jsx\" 解析导入 \"react-dom/client\"。该文件是否存在？
【发布时间】：2022-12-04 03:25:19
【问题描述】：

遇到这个问题

Failed to resolve import "react-dom/client" from "src\main.jsx". Does the file exist?

这是我的 main.jsx 文件

import React from 'react'
import ReactDOM from 'react-dom/client'
// import {render} from "react-dom";
import App from './components/App.jsx'
import './index.css'

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

我也试过这样做

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


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

但是这个显示空白页

如果有人可以提供帮助，请查看此内容

我正在尝试制作 codepen 复制项目这些是我在 package.json 中的依赖项

"dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.31",
  "@fortawesome/free-brands-svg-icons": "^5.15.0",
  "@fortawesome/free-solid-svg-icons": "^5.15.0",
  "@fortawesome/react-fontawesome": "^0.1.11",
  "@testing-library/jest-dom": "^4.2.4",
  "@testing-library/react": "^9.5.0",
  "@testing-library/user-event": "^7.2.1",
  "codemirror": "^5.58.1",
  "react": "^16.13.1",
  "react-codemirror2": "^7.2.1",
  "react-dom": "^16.13.1",
  "react-scripts": "3.4.3"
  },

【问题讨论】：

标签： reactjs compiler-errors vite

【解决方案1】：

您正在尝试从 react-dom/client 导入 ReactDOM，但该模块不存在，因此请从 react-dom 包中导入 ReactDOM。

import React from 'react'
import ReactDOM from 'react-dom' // Import ReactDOM from the react-dom package
import App from './components/App.jsx'
import './index.css'

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

第二个代码是正确的，但从未定义容器变量，因此它会抛出错误。您需要先定义容器变量，然后才能使用它。

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

// Define the container variable
const container = document.getElementById("root");
render(
 <React.StrictMode>
 <App />
  </React.StrictMode>,
   container // Use the container variable to render your app
 );

【讨论】：