index.js 中出现 React 错误，“Uncaught ReferenceError：dom 未定义”

Question

我正在构建一个 React 应用程序，
我使用 Babel 和 Webpack 作为模块打包器。

在编写 index.js 时，应用程序开始向我发送有关未定义 dom 的错误，
但实际上我已经按照文档的建议导入了“react-dom”库。
下面我分享代码，请帮助我。

package.json

"dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.14.1"
  },
  "devDependencies": {
    "@babel/cli": "^7.22.6",
    "@babel/core": "^7.22.6",
    "@babel/preset-env": "^7.22.6",
    "@babel/preset-react": "^7.22.5",
    "autoprefixer": "10.4.5",
    "babel-loader": "^9.1.2",
    "css-loader": "^6.8.1",
    "html-webpack-plugin": "^5.5.3",
    "style-loader": "^3.3.3",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  }

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';

const myFirstElement = <h1>Hello React!</h1>

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myFirstElement);

我尝试安装两次该库并安装了另一个所谓的“react-router-dom”。
我制作了一个更简单的 index.js，它不会从 App.js 渲染 ， 但它仍然不起作用。

我希望看到项目顺利运行。

Answer 1

您的

ReactDom

导入声明似乎是问题所在。不要从

"react-dom/client";

导入 ReactDom，而是从

"react-dom";

导入。如果/当您进行更改时，请告诉我更改是否有效。

Answer 2

为了解决这个问题，我在网上寻求帮助，经过几个小时的研究，在创建错误的 bable 文件中发现了这个问题。

Answer 3

问题可能是 babel 的错误使用

尝试检查您正在使用什么配置文件。例如，我上次解决这个问题是名为“.babelrc”的 babel 文件。当我将其修改为 babel.config.json （我的项目只需要一项配置）时，它就起作用了

babel.config.json

{
  "plugins": ["@babel/syntax-dynamic-import"],
  "presets": ["@babel/preset-react"]
}