使用babel-loader和webpack时出现Unexpected token错误求助

执行yarn webpack-dev-server --mode development时出现以下错误：

Module parse failed: Unexpected token (8:7)
You may need an appropriate loader to handle this file type, currently, no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import React from "react";
| import { render } from "react-dom";
> render(<h1>Hello World</h1>,document.getElementById("App"))
| 
|

单独使用babel src/index.js -o public/bundle.js转译代码正常，但webpack无法处理JSX语法。

配置文件及代码如下：

webpack.config.js

const path = require("path");

module.exports = {
  entry: path.resolve(__dirname, "src", "index.js"),
  output: {
    path: path.resolve(__dirname, "public"),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react']
          }
        }
      }
    ]
  }
};

babel.config.js

module.exports = {
    presets: [
        '@babel/preset-env',
        '@babel/preset-react'
    ],
};

src/index.js

import React from "react";
import { render } from "react-dom";
 render(<h1>Hello World</h1>,document.getElementById("App"))

问题原因 #

webpack配置中，babel-loader的局部配置覆盖了根目录的全局babel配置，且缺少必要依赖约束，导致JSX语法未被正确转译。

解决步骤 #

1. 安装完整依赖
   执行命令确保所有必要依赖已安装：

yarn add -D @babel/core babel-loader @babel/preset-env @babel/preset-react webpack webpack-dev-server

注：babel-loader必须搭配@babel/core使用，缺少后者会导致loader无法正常工作。

2. 优化webpack配置
   修改webpack.config.js，移除loader选项中的presets配置（让webpack自动读取根目录的babel全局配置），同时添加exclude排除node_modules目录，避免转译第三方库：

const path = require("path");

module.exports = {
  entry: path.resolve(__dirname, "src", "index.js"),
  output: {
    path: path.resolve(__dirname, "public"),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  },
  devServer: {
    static: path.resolve(__dirname, "public"),
    open: true
  }
};

3. 验证运行
   删除node_modules和yarn.lock（可选，确保依赖环境干净），重新安装依赖后执行命令：

yarn webpack-dev-server --mode development

额外说明 #

单独使用babel命令时，它会自动读取根目录的babel.config.js（包含@babel/preset-env和@babel/preset-react双预设），所以转译正常。但webpack中你手动指定了仅使用@babel/preset-react，覆盖了全局配置，同时未排除node_modules可能导致loader处理逻辑异常。

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