swc-loader是否支持类组件？迁移Rspack遇super访问报错求助

swc-loader原生支持React类组件，你遇到的Invalid access to super报错并非不支持类组件，而是配置兼容问题或代码转译场景的解析限制导致的，以下是可行的解决思路：

1. 调整SWC配置，开启正确的React兼容模式 #

确保swc-loader的配置针对旧类组件做适配，重点设置React runtime为classic（旧版React类组件不需要自动引入React，classic runtime更适配传统写法），同时开启JSX解析：

在rspack配置文件中修改swc-loader规则：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'swc-loader',
          options: {
            jsc: {
              parser: {
                jsx: true,
                // 若代码用到类私有属性/方法，需开启以下选项
                classPrivateProperty: true,
                classPrivateMethod: true
              },
              transform: {
                react: {
                  runtime: 'classic', // 旧类组件推荐使用classic runtime
                  development: process.env.NODE_ENV === 'development'
                }
              }
            }
          }
        }
      }
    ]
  }
};

2. 单独用Babel处理CKEditor特殊文件 #

你修改后的CKEditor包位于src目录下，其转译后的代码可能存在SWC解析不兼容的super使用场景，可针对该文件单独配置babel-loader处理（Babel对旧代码兼容性更好）：

在rspack配置中添加针对性规则：

module.exports = {
  module: {
    rules: [
      // 优先处理CKEditor文件
      {
        test: /src\/vendors\/ckeditor5\/build\/ckeditor\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react', '@babel/preset-env']
          }
        }
      },
      // 其他JS/JSX文件使用swc-loader
      {
        test: /\.(js|jsx)$/,
        exclude: [/node_modules/, /src\/vendors\/ckeditor5\/build\/ckeditor\.js$/],
        use: 'swc-loader',
        options: { /* 上述SWC配置 */ }
      }
    ]
  }
};

3. 检查代码中super的使用规范 #

确认自研类组件和修改后的CKEditor代码中，super仅在类的实例方法（包括constructor）中调用父类方法，避免在静态方法、箭头函数或非类上下文使用super，这类场景SWC会严格校验语法合法性。

4. 更新SWC相关依赖 #

旧版本的@swc/core或swc-loader可能存在类组件super解析的bug，执行以下命令更新到最新版本：

npm update @swc/core swc-loader
# 或使用yarn
yarn upgrade @swc/core swc-loader

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