Rspack内置swc-loader编译JS/JSX组件时出现编译错误求助

看起来你遇到的问题挺让人困惑的——明明项目里全是JS/JSX文件，用swc-loader的syntax: 'ecmascript'就报错，换成'typescript'反而能正常编译，这确实有点反直觉。我来帮你梳理下问题出在哪，以及怎么解决。

问题根源 #

你配置里的一个细节弄错了：SWC的解析器配置中，针对不同的syntax，开启JSX支持的参数是不一样的：

• 当你设置syntax: 'typescript'时，用tsx: true来开启JSX/TSX支持，这就是为什么切换后能正常编译
• 但当你用syntax: 'ecmascript'时，应该用jsx: true来开启JSX支持，而不是tsx: true——你现在的配置用错了开关，导致ECMAScript解析器识别不了JSX语法，自然就报错了

修正后的配置 #

把解析器里的tsx: true改成jsx: true就可以了，完整的规则配置如下：

{
  test: /\.(js|jsx)$/,
  loader: 'builtin:swc-loader',
  include: [
    path.resolve(__dirname, '../src/js'),
    path.resolve(__dirname, '../node_modules/@my-own-package')
  ],
  options: {
    jsc: {
      parser: {
        syntax: 'ecmascript',
        jsx: true // 这里替换原来的tsx: true
      },
      transform: {
        react: {
          runtime: 'automatic',
          development: false,
          refresh: false
        }
      }
    }
  },
  resolve: {
    fullySpecified: false
  }
}

补充说明 #

另外你可以留意下@my-own-package这个依赖包，如果它内部的文件也用到了JSX语法，之前的错误配置也会影响它的编译，修正后这个问题也会一并解决。

至于为什么syntax: 'typescript'能work，是因为SWC的TypeScript解析器默认兼容JSX语法，哪怕处理的是.js/.jsx后缀的文件，相当于歪打正着绕开了错误，但显然用ECMAScript解析器更贴合你纯JS/JSX项目的实际情况。

内容来源于stack exchange