如何在Rspack的swc-loader中使用formatjs插件？

问题定位 #

从错误截图来看，核心问题出在SWC插件的兼容性或配置逻辑错误上，结合你的配置，主要存在以下几个可直接修正的问题：

1. 修正React转换的参数逻辑 #

你当前的React配置中，development和refresh参数的判断逻辑完全写反：生产环境下这两个值应为false，仅开发环境需要启用。错误的逻辑会导致SWC在生产环境尝试启用React热刷新，引发编译冲突。

2. 匹配SWC插件版本 #

Rspack内置的SWC版本与@formatjs/swc-plugin必须严格兼容，否则会出现插件加载失败。你可以查看node_modules/@rspack/core/package.json中@swc/core的版本，安装对应大版本的@formatjs/swc-plugin（例如SWC版本为1.x，则安装@formatjs/swc-plugin的1.x分支版本）。

3. 调整FormatJS插件配置 #

根据官方规范，ast: true参数在Rspack的swc-loader环境下并非必需，且可能引发AST解析冲突；若需要提取国际化消息，可添加extractMessages配置项指定输出目录。

修正后的完整配置 #

const js = {
  test: /\.js(x)?$/,
  exclude: [
    /node_modules/,
    path.join(config.root, config.paths.src, 'web', 'javascripts/vendors/'),
  ],
  loader: 'builtin:swc-loader',
  options: {
    jsc: {
      parser: {
        syntax: 'ecmascript',
        jsx: true,
      },
      transform: {
        react: {
          runtime: 'automatic',
          // 开发环境启用development模式和热刷新
          development: config.env !== 'production',
          refresh: config.env !== 'production',
        },
      },
      experimental: {
        plugins: [
          [
            '@formatjs/swc-plugin',
            {
              overrideIdFn: '[sha512:contenthash:base64:6]',
              // 若需要提取国际化消息，可开启以下配置
              // extractMessages: {
              //   dir: path.join(config.root, 'locales'),
              // },
            },
          ],
        ],
      },
    },
    type: 'javascript/auto',
    env: {
      targets: 'Chrome >= 48',
    },
  },
};

额外验证步骤 #

• 执行npm ls @swc/core确认Rspack依赖的SWC版本，确保@formatjs/swc-plugin版本与之匹配
• 删除node_modules和锁文件后重新安装依赖，避免版本缓存问题
• 检查代码中是否存在不符合SWC语法规范的JSX/ES语法，确保与配置的parser规则兼容

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