fix: swc transform compatibility in babel-swc-loader (#1364)

jbroma · web-flow · commit d0058e224bbe · 2026-03-06T15:01:42.000+01:00
diff --git a/.changeset/restore-swc-transform-compatibility.md b/.changeset/restore-swc-transform-compatibility.md
@@ -0,0 +1,5 @@
+---
+"@callstack/repack": patch
+---
+
+Fix `babel-swc-loader` compatibility for loose class fields, private methods, and destructuring by adding the complementary SWC transforms SWC expects to run alongside them.
diff --git a/packages/repack/src/loaders/babelSwcLoader/__tests__/__snapshots__/babelSwcLoader.test.ts.snap b/packages/repack/src/loaders/babelSwcLoader/__tests__/__snapshots__/babelSwcLoader.test.ts.snap
@@ -1,11 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`partitionTransforms ignores unsupported and disabled transforms (snapshot): unsupported and disabled 1`] = `
+exports[`partitionTransforms ignores unsupported transforms (snapshot): unsupported only 1`] = `
 {
-  "includedSwcTransforms": [],
-  "supportedSwcTransforms": [],
+  "includedSwcTransforms": [
+    "transform-class-static-block",
+    "transform-class-properties",
+    "transform-private-methods",
+  ],
+  "supportedSwcTransforms": [
+    "transform-class-static-block",
+    "transform-class-properties",
+    "transform-private-methods",
+  ],
   "swcConfig": {
     "jsc": {
+      "assumptions": {
+        "privateFieldsAsProperties": true,
+        "setPublicClassFields": true,
+      },
       "parser": {
         "jsx": true,
         "syntax": "ecmascript",
diff --git a/packages/repack/src/loaders/babelSwcLoader/__tests__/__snapshots__/swc.test.ts.snap b/packages/repack/src/loaders/babelSwcLoader/__tests__/__snapshots__/swc.test.ts.snap
@@ -19,18 +19,6 @@ exports[`swc transforms support detection getSupportedSwcConfigurableTransforms
 }
 `;
 
-exports[`swc transforms support detection getSupportedSwcConfigurableTransforms updates both privateFieldsAsProperties and setPublicClassFields for private-property-in-object but does not override explicit true (snapshot): private-property-in-object assumptions and names 1`] = `
-{
-  "assumptions": {
-    "privateFieldsAsProperties": true,
-    "setPublicClassFields": true,
-  },
-  "transformNames": [
-    "transform-private-property-in-object",
-  ],
-}
-`;
-
 exports[`swc transforms support detection getSupportedSwcCustomTransforms configures modules commonjs options based on provided config (snapshot): modules commonjs config 1`] = `
 {
   "allowTopLevelThis": false,
diff --git a/packages/repack/src/loaders/babelSwcLoader/__tests__/babelSwcLoader.test.ts b/packages/repack/src/loaders/babelSwcLoader/__tests__/babelSwcLoader.test.ts
@@ -8,8 +8,8 @@ describe('partitionTransforms', () => {
       ['transform-block-scoping', {}],
       ['transform-react-jsx', {}],
       ['transform-object-rest-spread', { loose: true }],
-      ['transform-class-properties', { loose: true }], // disabled configurable
-      ['transform-private-methods', { loose: true }], // disabled configurable
+      ['transform-class-properties', { loose: true }],
+      ['transform-private-methods', { loose: true }],
       ['unknown-plugin', {}],
       ['transform-modules-commonjs', {}],
       ['transform-classes', {}],
@@ -22,30 +22,36 @@ describe('partitionTransforms', () => {
     expect(includedSwcTransforms).toEqual([
       'transform-block-scoping',
       'transform-classes',
+      'transform-class-static-block',
       'transform-object-rest-spread',
+      'transform-class-properties',
+      'transform-private-methods',
       'transform-for-of',
     ]);
 
     expect(supportedSwcTransforms).toEqual([
       'transform-block-scoping',
       'transform-classes',
+      'transform-class-static-block',
       'transform-object-rest-spread',
+      'transform-class-properties',
+      'transform-private-methods',
       'transform-for-of',
       'transform-react-jsx',
       'transform-modules-commonjs',
     ]);
   });
 
-  it('ignores unsupported and disabled transforms (snapshot)', () => {
+  it('ignores unsupported transforms (snapshot)', () => {
     const transforms: TransformEntry[] = [
-      ['transform-class-properties', { loose: true }], // disabled
-      ['transform-private-methods', { loose: true }], // disabled
+      ['transform-class-properties', { loose: true }],
+      ['transform-private-methods', { loose: true }],
       ['unknown-plugin', {}],
     ];
 
     const result = partitionTransforms('/virtual/file.js', transforms);
 
-    expect(result).toMatchSnapshot('unsupported and disabled');
+    expect(result).toMatchSnapshot('unsupported only');
   });
 
   it('only custom transforms are excluded from included set but present in supported set (snapshot)', () => {
@@ -65,6 +71,46 @@ describe('partitionTransforms', () => {
 
     expect(result).toMatchSnapshot('empty arrays');
   });
+
+  it('adds transform-object-rest-spread when transform-destructuring is present', () => {
+    const transforms: TransformEntry[] = [
+      ['transform-destructuring', {}],
+      ['transform-react-jsx', {}],
+    ];
+
+    const { includedSwcTransforms, supportedSwcTransforms } =
+      partitionTransforms('/virtual/file.js', transforms);
+
+    expect(includedSwcTransforms).toEqual([
+      'transform-destructuring',
+      'transform-object-rest-spread',
+    ]);
+    expect(supportedSwcTransforms).toEqual([
+      'transform-destructuring',
+      'transform-object-rest-spread',
+      'transform-react-jsx',
+    ]);
+  });
+
+  it('adds transform-class-static-block when transform-class-properties is present', () => {
+    const transforms: TransformEntry[] = [
+      ['transform-class-properties', { loose: true }],
+      ['transform-react-jsx', {}],
+    ];
+
+    const { includedSwcTransforms, supportedSwcTransforms } =
+      partitionTransforms('/virtual/file.js', transforms);
+
+    expect(includedSwcTransforms).toEqual([
+      'transform-class-static-block',
+      'transform-class-properties',
+    ]);
+    expect(supportedSwcTransforms).toEqual([
+      'transform-class-static-block',
+      'transform-class-properties',
+      'transform-react-jsx',
+    ]);
+  });
 });
 
 describe('buildFinalSwcConfig', () => {
diff --git a/packages/repack/src/loaders/babelSwcLoader/__tests__/swc.test.ts b/packages/repack/src/loaders/babelSwcLoader/__tests__/swc.test.ts
@@ -1,5 +1,7 @@
-import type { SwcLoaderOptions } from '@rspack/core';
+import { type SwcLoaderOptions, experiments } from '@rspack/core';
+import { buildFinalSwcConfig, partitionTransforms } from '../babelSwcLoader.js';
 import {
+  addSwcComplementaryTransforms,
   getSupportedSwcConfigurableTransforms,
   getSupportedSwcCustomTransforms,
   getSupportedSwcNormalTransforms,
@@ -8,13 +10,52 @@ import {
 type TransformEntry = [string, Record<string, any> | undefined];
 
 describe('swc transforms support detection', () => {
+  describe('addSwcComplementaryTransforms', () => {
+    it('adds transform-class-static-block when transform-class-properties is present', () => {
+      const transforms: TransformEntry[] = [
+        ['transform-class-properties', { loose: true }],
+      ];
+
+      const result = addSwcComplementaryTransforms(transforms);
+
+      expect(result).toEqual([
+        ['transform-class-properties', { loose: true }],
+        ['transform-class-static-block', undefined],
+      ]);
+    });
+
+    it('adds transform-object-rest-spread when transform-destructuring is present', () => {
+      const transforms: TransformEntry[] = [['transform-destructuring', {}]];
+
+      const result = addSwcComplementaryTransforms(transforms);
+
+      expect(result).toEqual([
+        ['transform-destructuring', {}],
+        ['transform-object-rest-spread', undefined],
+      ]);
+    });
+
+    it('does not duplicate already included complementary transforms', () => {
+      const transforms: TransformEntry[] = [
+        ['transform-class-properties', { loose: true }],
+        ['transform-class-static-block', {}],
+        ['transform-destructuring', {}],
+        ['transform-object-rest-spread', { loose: true }],
+      ];
+
+      const result = addSwcComplementaryTransforms(transforms);
+
+      expect(result).toEqual(transforms);
+    });
+  });
+
   describe('getSupportedSwcNormalTransforms', () => {
     it('returns only supported normal transform names preserving order', () => {
       const transforms: TransformEntry[] = [
         ['transform-block-scoping', undefined],
         ['transform-classes', {}],
         ['transform-react-jsx', undefined], // custom
-        ['transform-private-methods', undefined], // configurable (disabled)
+        ['transform-private-methods', undefined], // configurable
         ['unknown-plugin', undefined],
         ['transform-object-rest-spread', undefined], // configurable
       ];
@@ -29,8 +70,8 @@ describe('swc transforms support detection', () => {
     it('returns only supported configurable transform names preserving order', () => {
       const baseSwcConfig = {};
       const transforms: TransformEntry[] = [
-        ['transform-class-properties', { loose: true }], // disabled
-        ['transform-private-methods', { loose: true }], // disabled
+        ['transform-class-properties', { loose: true }],
+        ['transform-private-methods', { loose: true }],
         ['transform-private-property-in-object', {}],
         ['transform-object-rest-spread', {}],
         ['transform-optional-chaining', {}],
@@ -47,6 +88,8 @@ describe('swc transforms support detection', () => {
       );
 
       expect(transformNames).toEqual([
+        'transform-class-properties',
+        'transform-private-methods',
         'transform-private-property-in-object',
         'transform-object-rest-spread',
         'transform-optional-chaining',
@@ -55,6 +98,21 @@ describe('swc transforms support detection', () => {
       ]);
     });
 
+    it('sets class fields and private methods assumptions explicitly in loose mode', () => {
+      const { swcConfig } = getSupportedSwcConfigurableTransforms(
+        [
+          ['transform-class-properties', { loose: true }],
+          ['transform-private-methods', { loose: true }],
+        ],
+        {} as SwcLoaderOptions
+      );
+
+      expect(swcConfig.jsc?.assumptions).toEqual({
+        setPublicClassFields: true,
+        privateFieldsAsProperties: true,
+      });
+    });
+
     it('applies loose mode to setSpreadProperties when not defined; preserves explicit true (snapshot)', () => {
       const baseUndefined = {} as SwcLoaderOptions;
       const { swcConfig: cfg1 } = getSupportedSwcConfigurableTransforms(
@@ -98,7 +156,7 @@ describe('swc transforms support detection', () => {
       );
     });
 
-    it('updates both privateFieldsAsProperties and setPublicClassFields for private-property-in-object but does not override explicit true (snapshot)', () => {
+    it('updates both privateFieldsAsProperties and setPublicClassFields for private-property-in-object but does not override explicit true', () => {
       const base: SwcLoaderOptions = {
         jsc: {
           assumptions: {
@@ -114,10 +172,11 @@ describe('swc transforms support detection', () => {
           base
         );
 
-      expect({
-        transformNames,
-        assumptions: swcConfig.jsc?.assumptions,
-      }).toMatchSnapshot('private-property-in-object assumptions and names');
+      expect(transformNames).toEqual(['transform-private-property-in-object']);
+      expect(swcConfig.jsc?.assumptions).toEqual({
+        privateFieldsAsProperties: true,
+        setPublicClassFields: true,
+      });
     });
   });
 
@@ -305,4 +364,55 @@ describe('swc transforms support detection', () => {
       );
     });
   });
+
+  describe('real swc transform regression', () => {
+    it('compiles loose class properties and private methods with complementary static block support', () => {
+      const source = `
+        class Example {
+          static value = 1;
+          static {
+            this.value += 1;
+          }
+
+          #count = 0;
+
+          #increment() {
+            this.#count += 1;
+          }
+
+          run() {
+            this.#increment();
+            return this.#count;
+          }
+        }
+
+        export default new Example().run();
+      `;
+
+      const { includedSwcTransforms, swcConfig } = partitionTransforms(
+        '/virtual/file.js',
+        [
+          ['transform-class-properties', { loose: true }],
+          ['transform-private-methods', { loose: true }],
+        ]
+      );
+      const finalSwcConfig = buildFinalSwcConfig({
+        swcConfig,
+        includedSwcTransforms,
+        lazyImports: false,
+        sourceType: 'module',
+      });
+
+      const result = experiments.swc.transformSync(source, {
+        ...finalSwcConfig,
+        filename: '/virtual/file.js',
+        configFile: false,
+        swcrc: false,
+        sourceMaps: false,
+      });
+
+      expect(result.code).not.toContain('static {');
+      expect(result.code).not.toContain('#count');
+    });
+  });
 });
diff --git a/packages/repack/src/loaders/babelSwcLoader/babelSwcLoader.ts b/packages/repack/src/loaders/babelSwcLoader/babelSwcLoader.ts
@@ -3,6 +3,7 @@ import type { LoaderContext, SwcLoaderOptions } from '@rspack/core';
 import { transform } from '../babelLoader/babelLoader.js';
 import type { BabelSwcLoaderOptions } from './options.js';
 import {
+  addSwcComplementaryTransforms,
   getSupportedSwcConfigurableTransforms,
   getSupportedSwcCustomTransforms,
   getSupportedSwcNormalTransforms,
@@ -36,11 +37,13 @@ export function partitionTransforms(
     },
   };
 
-  normalTransforms = getSupportedSwcNormalTransforms(babelTransforms);
+  const swcTransforms = addSwcComplementaryTransforms(babelTransforms);
+
+  normalTransforms = getSupportedSwcNormalTransforms(swcTransforms);
   ({ swcConfig, transformNames: configurableTransforms } =
-    getSupportedSwcConfigurableTransforms(babelTransforms, swcConfig));
+    getSupportedSwcConfigurableTransforms(swcTransforms, swcConfig));
   ({ swcConfig, transformNames: customTransforms } =
-    getSupportedSwcCustomTransforms(babelTransforms, swcConfig));
+    getSupportedSwcCustomTransforms(swcTransforms, swcConfig));
 
   const includedSwcTransforms: string[] = [
     ...normalTransforms,
diff --git a/packages/repack/src/loaders/babelSwcLoader/swc.ts b/packages/repack/src/loaders/babelSwcLoader/swc.ts

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@callstack/repack": patch
 +---
++
 +Fix `babel-swc-loader` compatibility for loose class fields, private methods, and destructuring by adding the complementary SWC transforms SWC expects to run alongside them.