webpack-dev-server无法识别JSX代码，工具链缺失什么配置？

这个报错是因为Webpack无法解析React的JSX语法（代码里的<App />就是JSX），你的工具链缺少了处理JSX的Babel loader配置，需要补充以下步骤：

• 安装必要依赖
  在项目根目录执行命令：

  yarn add -D @babel/core babel-loader @babel/preset-react
  

• 添加Babel配置文件
  在项目根目录创建.babelrc文件，写入以下内容：

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

• 修改Webpack配置
  打开你的webpack.config.js，在module.rules中添加处理JSX的规则，同时配置文件扩展名解析：

  module.exports = {
    // 保留原有其他配置...
    module: {
      rules: [
        // 新增这条规则
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: "babel-loader"
        }
      ]
    },
    resolve: {
      // 让Webpack自动解析这些扩展名，导入时可省略后缀
      extensions: [".js", ".jsx"]
    }
  };
  

完成以上配置后，重新执行yarn run webpack-dev-server即可正常解析JSX代码。

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