From c943fc9dfc23fb63420212e0f4cabccfd938e68e Mon Sep 17 00:00:00 2001 From: Daniel Williams Date: Mon, 8 Dec 2025 20:14:53 +0000 Subject: [PATCH] fix: nativewind broken by import source being overwritten in default case fix: use a better fallback docs: remove some notes that are no longer necessary docs: more clarification docs: fix formatting and wording moving docs changes to separate pr review: inline default values test: add coverage for react transforms being included fix: add changeset fix: adjust changeset fix: adjust changeset --- .changeset/rude-icons-fail.md | 5 ++ apps/tester-app/ios/Podfile.lock | 6 +- .../__snapshots__/babelSwcLoader.test.ts.snap | 4 +- .../babelSwcLoader/__tests__/swc.test.ts | 84 +++++++++++++++++++ .../repack/src/loaders/babelSwcLoader/swc.ts | 14 ++-- 5 files changed, 103 insertions(+), 10 deletions(-) create mode 100644 .changeset/rude-icons-fail.md diff --git a/.changeset/rude-icons-fail.md b/.changeset/rude-icons-fail.md new file mode 100644 index 000000000..b0d599f59 --- /dev/null +++ b/.changeset/rude-icons-fail.md @@ -0,0 +1,5 @@ +--- +"@callstack/repack": patch +--- + +Fix nativewind issue caused by jsx import source being overwritten to undefined when using babel-swc-loader diff --git a/apps/tester-app/ios/Podfile.lock b/apps/tester-app/ios/Podfile.lock index 8d49384a9..b19517361 100644 --- a/apps/tester-app/ios/Podfile.lock +++ b/apps/tester-app/ios/Podfile.lock @@ -1,6 +1,6 @@ PODS: - boost (1.84.0) - - callstack-repack (5.2.0): + - callstack-repack (5.2.2): - boost - DoubleConversion - fast_float @@ -2930,7 +2930,7 @@ EXTERNAL SOURCES: SPEC CHECKSUMS: boost: 7e761d76ca2ce687f7cc98e698152abd03a18f90 - callstack-repack: 9c91d2c48b139e38919c656474f43ab0494b4c21 + callstack-repack: c874fe60c49dcf3067bca0627b7ace673589737c DoubleConversion: cb417026b2400c8f53ae97020b2be961b59470cb fast_float: b32c788ed9c6a8c584d114d0047beda9664e7cc6 FBLazyVector: a867936a67af0d09c37935a1b900a1a3c795b6d1 @@ -3011,7 +3011,7 @@ SPEC CHECKSUMS: RNWorklets: 20451b83d42e7509f43599b405993e57e3a038af SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748 SwiftyRSA: 8c6dd1ea7db1b8dc4fb517a202f88bb1354bc2c6 - Yoga: 00013dd9cde63a2d98e8002fcc4f5ddb66c10782 + Yoga: b01392348aeea02064c21a2762a42893d82b60a7 PODFILE CHECKSUM: 6d7cbe03444d5e87210979fb32a0eca299d758fe 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 index 1d912f68e..3d945572e 100644 --- a/packages/repack/src/loaders/babelSwcLoader/__tests__/__snapshots__/babelSwcLoader.test.ts.snap +++ b/packages/repack/src/loaders/babelSwcLoader/__tests__/__snapshots__/babelSwcLoader.test.ts.snap @@ -37,8 +37,8 @@ exports[`partitionTransforms only custom transforms are excluded from included s }, "transform": { "react": { - "importSource": undefined, - "runtime": undefined, + "importSource": "react", + "runtime": "automatic", "useBuiltins": true, }, }, diff --git a/packages/repack/src/loaders/babelSwcLoader/__tests__/swc.test.ts b/packages/repack/src/loaders/babelSwcLoader/__tests__/swc.test.ts index 066ff7406..56aabaeb8 100644 --- a/packages/repack/src/loaders/babelSwcLoader/__tests__/swc.test.ts +++ b/packages/repack/src/loaders/babelSwcLoader/__tests__/swc.test.ts @@ -175,6 +175,90 @@ describe('swc transforms support detection', () => { ); }); + it('should apply default react transform when plugin has no react transform options', () => { + const inputConfig: SwcLoaderOptions = { + jsc: { + transform: { react: {} }, + }, + }; + const { swcConfig } = getSupportedSwcCustomTransforms( + [['transform-react-jsx', {}]], + inputConfig + ); + + expect(swcConfig.jsc?.transform?.react).toEqual({ + runtime: 'automatic', + importSource: 'react', + }); + }); + + it('should preserve existing react transform config when plugin has none', () => { + const inputConfig: SwcLoaderOptions = { + jsc: { + transform: { + react: { runtime: 'automatic', importSource: 'nativewind' }, + }, + }, + }; + const { swcConfig } = getSupportedSwcCustomTransforms( + [['transform-react-jsx', {}]], + inputConfig + ); + + expect(swcConfig.jsc?.transform?.react).toEqual({ + runtime: 'automatic', + importSource: 'nativewind', + }); + }); + + it('should use plugin importSource option for react transform', () => { + const inputConfig: SwcLoaderOptions = { + jsc: { + transform: { + react: {}, + }, + }, + }; + const { swcConfig } = getSupportedSwcCustomTransforms( + [ + [ + 'transform-react-jsx', + { runtime: 'automatic', importSource: 'nativewind' }, + ], + ], + inputConfig + ); + + expect(swcConfig.jsc?.transform?.react).toEqual({ + runtime: 'automatic', + importSource: 'nativewind', + }); + }); + + it('should use plugin importSource option for react transform and override existing importSource', () => { + const inputConfig: SwcLoaderOptions = { + jsc: { + transform: { + react: { importSource: 'preact' }, + }, + }, + }; + const { swcConfig } = getSupportedSwcCustomTransforms( + [ + [ + 'transform-react-jsx', + { runtime: 'automatic', importSource: 'nativewind' }, + ], + ], + inputConfig + ); + + expect(swcConfig.jsc?.transform?.react).toEqual({ + runtime: 'automatic', + importSource: 'nativewind', + }); + }); + it('configures modules commonjs options based on provided config (snapshot)', () => { const inputConfig: SwcLoaderOptions = {}; const { swcConfig } = getSupportedSwcCustomTransforms( diff --git a/packages/repack/src/loaders/babelSwcLoader/swc.ts b/packages/repack/src/loaders/babelSwcLoader/swc.ts index 4218b4635..2d16f3173 100644 --- a/packages/repack/src/loaders/babelSwcLoader/swc.ts +++ b/packages/repack/src/loaders/babelSwcLoader/swc.ts @@ -77,9 +77,7 @@ function getTransformReactDevelopmentConfig( function getTransformReactRuntimeConfig( swcConfig: SwcLoaderOptions, - reactRuntimeConfig: Record = { - runtime: 'automatic', - } + reactRuntimeConfig: Record = {} ): SwcLoaderOptions { return { ...swcConfig, @@ -89,8 +87,14 @@ function getTransformReactRuntimeConfig( ...swcConfig.jsc?.transform, react: { ...swcConfig.jsc?.transform?.react, - runtime: reactRuntimeConfig.runtime, - importSource: reactRuntimeConfig.importSource, + runtime: + reactRuntimeConfig.runtime ?? + swcConfig.jsc?.transform?.react?.runtime ?? + 'automatic', + importSource: + reactRuntimeConfig.importSource ?? + swcConfig.jsc?.transform?.react?.importSource ?? + 'react', }, }, },