Webpack 4与Babel 7适配报错：React项目无法解析JSX文件

嘿，这个问题我碰到过好几次了！报错的根源很清晰——你的Webpack配置把整个node_modules目录都排除在Babel转译范围外了，但你用到的project/components/InfiniteScroller.jsx是未转译的JSX文件，Webpack自然没法处理它。

问题拆解 #

你当前的规则里写了exclude: /node_modules/，这会让Babel跳过所有node_modules里的文件。但不是所有第三方包都会提前把JSX转成浏览器能识别的ES5代码，比如一些小众包、内部维护的包，或者作者没做预编译的包，就需要我们手动让Babel去处理它们。

解决方案 #

这里有两种靠谱的修改方式，选你觉得顺手的就行：

方案1：调整exclude规则，放行目标包

把原来的exclude正则改成排除node_modules但不排除project包，这样Babel就会处理这个包下的JSX文件了。修改后的配置如下：

module: {
  rules: [
    {
      test: /\.jsx?$/,
      // 正则含义：匹配node_modules，但排除node_modules/project路径
      exclude: /node_modules(?!\/project)/,
      use: ['babel-loader'],
    },
    // 你的其他规则...
  ]
}

方案2：用include白名单明确指定转译范围

如果你更喜欢“只处理我指定的目录”这种白名单模式，可以用include来列出需要转译的目录，包括你的项目源码和目标第三方包：

// 记得先引入path模块
const path = require('path');

module.exports = {
  // 其他配置...
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        include: [
          path.resolve(__dirname, 'src'), // 替换成你的项目源码目录
          path.resolve(__dirname, 'node_modules/project') // 需要转译的第三方包路径
        ],
        use: ['babel-loader'],
      },
      // 你的其他规则...
    ]
  }
}

额外要检查的点 #

别忘记确认你的Babel配置支持JSX转译：

1. 确保已经安装了必要的依赖：@babel/core、babel-loader、@babel/preset-env、@babel/preset-react（都装在devDependencies里）
2. 在你的.babelrc或babel.config.js里启用React预设：

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

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