Webpack无法解析JSX求助：依赖与配置无明显错误

我仔细梳理了你的配置文件和代码，发现几个关键问题，这些应该就是导致JSX解析失败的核心原因：

1. Babel预设配置错误 #

在你的webpack.config.js里，babel的presets数组包含了"react-dom"——但react-dom并不是一个Babel预设，这会干扰Babel加载正确的JSX解析规则。你需要把它从预设列表中移除：

修改前：

query:{ presets:["es2015","react","stage-2","react-dom"] }

修改后：

query:{ presets:["es2015","react","stage-2"] }

2. ReactDOM.render调用错误 #

你的index.js最后一行直接用了render(<Layout/>, ...)，但你只导入了ReactDOM对象，并没有单独导入render方法，正确的调用方式应该是ReactDOM.render：

修改前：

render(<Layout/>, document.getElementById('app'))

修改后：

ReactDOM.render(<Layout/>, document.getElementById('app'))

3. 额外优化建议（可选） #

• Webpack 4+要求指定mode参数，建议在配置里加上mode: "development"或"production"，这不仅能避免警告，还能自动启用对应环境的优化策略。
• 你同时安装了babel-preset-env和babel-preset-es2015/babel-preset-latest，其实babel-preset-env已经包含了后者的功能，建议只保留babel-preset-env，并在presets里替换掉es2015，这样可以更灵活地适配目标运行环境。

完成这些修改后，重新启动Webpack，应该就能正常解析JSX代码了。

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