React项目部署时出现Uncaught ReferenceError: ReactDOM未定义求助

咱们一步步拆解你的问题，找到根源并解决：

1. 先修复index.js里的明显语法错误 #

看你的index.js里有一行笔误，这大概率是触发生产构建异常的导火索：

window.React = React.def

这里的React.def是错误写法，React是默认导入的，不存在def属性，改成：

window.React = React

另外，你同时导入了ReactDOM和单独的render方法，可以统一用ReactDOM.render让代码更清晰，修改后的相关代码段：

import React from 'react'
import ReactDOM from 'react-dom'
// 删掉单独的render导入：import { render } from 'react-dom'

// ...其他导入和主题配置代码

// 用ReactDOM.render替代单独的render
ReactDOM.render(
  <App />, 
  document.getElementById('react-continer')
)

2. 解决构建工具配置冲突问题 #

你的package.json里build命令用的是react-scripts build，但同时又存在自定义webpack配置文件——这就导致了：

• 开发环境用你自定义的webpack-dev-server运行，配置匹配所以正常
• 生产构建却用react-scripts内置的webpack配置，和你的自定义配置不一致，最终打包出问题

你有两个选择来统一配置：

选项A：完全使用自定义webpack构建 #

修改package.json的scripts，让开发和生产构建都用你的自定义webpack：

"scripts": {
  "start": "webpack-dev-server",
  "build": "webpack --mode production",
  // ...保留其他脚本
}

同时修复webpack配置里的babel预设重复问题（你写了两次presets，后面的会覆盖前面的）：

options: {
  presets: [
    ["@babel/preset-env", { "targets": { "node": "current" } }],
    "@babel/preset-react"
  ]
}

选项B：完全使用react-scripts，移除自定义webpack #

如果你想保留react-scripts的便捷性，直接删除自定义webpack配置文件，然后：

• 确认public/index.html里的根元素id和index.js里的一致（你的是react-continer，保持统一即可）
• 依赖安装和构建都用react-scripts的命令，它会自动处理打包细节

3. 重新构建并验证 #

完成上述修改后，执行以下步骤：

• 清理旧的依赖和构建产物：

  rm -rf node_modules build public/assets
  

• 重新安装依赖：

  yarn install
  

• 执行生产构建：

  yarn build
  

• 用serve运行构建后的文件（先全局安装serve：npm install -g serve）：

  # 如果用react-scripts构建，运行：
  serve -s build
  # 如果用自定义webpack构建，运行：
  serve public
  

额外检查点 #

• 确认react-dom已经在package.json的dependencies中（你的项目已经包含，版本和React兼容）
• 确保所有导入都是标准ES模块语法，避免CommonJS的require写法，防止生产模式下tree shaking误删依赖

按这些步骤处理后，应该就能解决ReactDOM is not defined的问题了。

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