React项目遇'Uncaught ReferenceError: dom is not defined'错误求助

可能的原因及对应解决方案 #

1. 检查Babel配置的正确性 #

确认你的Babel配置文件（.babelrc或babel.config.json）已正确配置@babel/preset-react，示例配置如下：

{
  "presets": [
    "@babel/preset-env",
    ["@babel/preset-react", { "runtime": "automatic" }]
  ]
}

若未设置runtime: "automatic"，需保证所有使用JSX的文件都导入了React（你的index.js已满足该要求，但仍需确认配置完整性）。

2. 确保Webpack配置正确处理React文件 #

检查Webpack配置的module.rules中是否包含针对.js/.jsx文件的babel-loader规则，同时添加扩展名解析：

module.exports = {
  // 其他配置项
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      // 其他loader规则（如css-loader等）
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx']
  }
};

Webpack若未正确解析JSX文件，可能导致转译错误，间接触发该报错。

3. 排查代码中是否存在未定义的dom变量 #

尽管你提供的index.js代码无问题，但需检查项目其他文件（如旧版App.js、路由配置文件等）是否存在错误引用dom的情况，比如误写dom.createRoot而非ReactDOM.createRoot。

4. 确认HTML模板包含根元素 #

检查Webpack使用的HTML模板文件中是否存在<div id="root"></div>，示例模板：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>React App</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

缺少该元素可能引发连锁转译异常。

5. 清理缓存并重新构建 #

执行以下命令清理缓存、重装依赖并重新构建项目：

rm -rf node_modules package-lock.json
npm install
npm run build # 或你的启动命令，如npm start

缓存异常可能导致依赖加载错误。

内容的提问来源于stack exchange，提问作者Leonardo