JSX被转为React.DOM提示不是函数 webpack babel环境报错如何解决？

问题根源 #

• 依赖冲突：项目同时安装了Babel 6和Babel 7两套生态依赖，Babel 6版本的babel-preset-react会将JSX语法转译为已废弃的React.DOM调用格式，而React v16及以上版本已移除React.DOM相关API，因此触发类型错误
• 代码语法错误：原始代码中ReactDOM.render方法的括号书写错误，多输入了一个右括号，可能进一步导致转译器识别异常

修复步骤 #

1. 清理冲突的旧版本Babel依赖 #

执行命令卸载所有Babel 6相关包：

npm uninstall babel-cli babel-core babel-plugin-transform-class-properties babel-preset-env babel-preset-react

2. 安装缺失的Babel插件 #

Babel 7中类属性转换对应的插件为@babel/plugin-proposal-class-properties，安装到开发依赖：

npm install @babel/plugin-proposal-class-properties --save-dev

3. 更新.babelrc配置 #

明确指定React预设的转译规则，新增类属性插件配置：

{
  "presets": [
    "@babel/preset-env",
    ["@babel/preset-react", {
      "runtime": "automatic"
    }]
  ],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

注：若你使用的是React 16及更低版本，将runtime的值改为classic，且所有包含JSX的文件顶部需要手动引入import React from 'react'

4. 修复代码语法错误 #

修正ReactDOM.render的括号书写问题：

// 修正前（错误）
ReactDOM.render(<LikeButton />),element[0]);
// 修正后（正确）
ReactDOM.render(<LikeButton />, element[0]);

5. 可选优化 #

若你当前使用的React版本低于17，建议升级React和ReactDOM到最新稳定版，避免更多废弃API问题：

npm install react react-dom

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