JSX 正在转换为 React.DOM 不是一个函数 - webpack babel答案

【问题标题】：JSX is getting converted to React.DOM is not a function - webpack babelJSX 正在转换为 React.DOM 不是一个函数 - webpack babel
【发布时间】：2021-06-24 21:29:49
【问题描述】：

我是 webpack 和 babel 的新手。我的目标是使用 ReactJS 编写一个 angularjs 指令进行渲染。但是，当我尝试放置一个 react 元素时，webpack 将该元素转换为 React.DOM 并抱怨 React.DOM 不是一个函数。

ReactDOM.render(<LikeButton />),element[0]); //gets converted to 
ReactDOM.render(React.DOM(ListContainer, null), element[0]);

TypeError: **React.DOM** is not a function

package.json

"devDependencies": {
    "@babel/core": "^7.1.6",
    "@babel/preset-env": "^7.1.6",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.4",
    "exports-loader": "^3.0.0",
    "imports-loader": "^3.0.0",
    "webpack": "^5.40.0",
    "webpack-cli": "^4.7.2"
  },
  "dependencies": {
    "angular": "1.5.3",
    "angular-animate": "1.5.3",
    "angular-resource": "1.5.3",
    "angular-sanitize": "1.5.3",
    "angular-ui-bootstrap": "^1.3.3",
    "babel-cli": "6.24.1",
    "babel-core": "6.25.0",
    "babel-plugin-transform-class-properties": "6.24.1",
    "babel-preset-env": "1.5.2",
    "babel-preset-react": "6.24.1",
}

.babelrc -

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

任何帮助将不胜感激

Image

【问题讨论】：

你打算如何渲染 ()？你能包括你的 babel 配置吗？
您好 Charles，我在 stackoverflow 编辑器中渲染 html 标签时遇到问题。将包括 babel 配置
是的，jsx 标签不能作为代码 sn-p 工作。您仍然可以使用代码标记（编辑器中的 {}）输入它们。 JSON 也是。
@CharlesBamford：你能举个例子吗？问题是 webpack 在运行时抛出这个错误。编辑器工作正常。图片有更多信息。

标签： javascript reactjs webpack babeljs

【解决方案1】：

对于在这里寻找答案的人。我正在使用 /** @jsx React.Dom */ 和更新版本的反应。一旦我删除它，一切都会神奇地工作。来自https://github.com/babel/babelify/issues/180 的这篇帖子有所帮助。

【讨论】：