切换swc-loader后index.js报Expression expected错误，求解决方案

我在使用react-app-rewired的React项目中，尝试将webpack的loader替换为swc-loader，已在config-overrides.js中添加了以下配置：

module.exports = function override(config, env) {
config.module.rules.push({
        test: /\.js$/,
        use: {
            loader: "swc-loader",
            options: {
                sync: true,
                parseMap: false,
            }
        }
    });
return config;
};

执行npm run build命令后，出现如下编译错误：

Expression expected
 11 │           <React.StrictMode>
 12 │                   <BrowserRouter>
 13 │
 14 │                           <App/>
    ·     ─
 15 │
 16 │                   </BrowserRouter>
 16 │           </React.StrictMode>

解决方案 #

问题原因 #

当前配置只是新增了swc-loader，没有替换掉项目原有的babel-loader，而且swc-loader缺少JSX语法解析的配置，导致JSX标签无法被正确编译。

修正步骤 #

1. 移除原有的babel-loader对.js/.jsx文件的处理规则
2. 给swc-loader添加JSX解析支持的配置

修改后的config-overrides.js如下：

module.exports = function override(config, env) {
  // 过滤掉原有处理.js/.jsx文件的babel-loader规则
  config.module.rules = config.module.rules.map(rule => {
    if (rule.oneOf) {
      return {
        ...rule,
        oneOf: rule.oneOf.filter(oneOfRule => {
          return !(oneOfRule.test && oneOfRule.test.toString().match(/\.jsx?$/));
        })
      };
    }
    return rule;
  }).filter(rule => !(rule.test && rule.test.toString().match(/\.jsx?$/)));

  // 添加swc-loader配置，支持JSX解析
  config.module.rules.push({
    test: /\.(js|jsx)$/,
    exclude: /node_modules/,
    use: {
      loader: "swc-loader",
      options: {
        sync: true,
        parseMap: false,
        jsc: {
          parser: {
            syntax: "ecmascript",
            jsx: true // 开启JSX语法解析
          },
          transform: {
            react: {
              runtime: "automatic" // React 17+ 自动导入模式，16及以下改为"classic"
            }
          }
        }
      }
    }
  });

  return config;
};

关键说明 #

• 过滤原有规则：确保.js/.jsx文件不会同时被babel-loader和swc-loader处理，避免冲突
• jsx: true：让swc识别并编译JSX语法
• react.runtime：根据你的React版本选择：
  • React 17及以上：用"automatic"，无需手动在组件文件中导入React
  • React 16及以下：用"classic"，需要保持组件文件中import React from 'react'的导入

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