From 965ab11351493fb3feee0a41ede7fab6dd1f6369 Mon Sep 17 00:00:00 2001 From: Jakub Romanczyk Date: Fri, 22 Aug 2025 20:03:40 +0200 Subject: [PATCH 1/5] feat: add option to disable reanimated transforms --- packages/plugin-reanimated/src/plugin.ts | 25 ++++++++++++++++-------- 1 file changed, 17 insertions(+), 8 deletions(-) diff --git a/packages/plugin-reanimated/src/plugin.ts b/packages/plugin-reanimated/src/plugin.ts index e920c1148..72c84388b 100644 --- a/packages/plugin-reanimated/src/plugin.ts +++ b/packages/plugin-reanimated/src/plugin.ts @@ -9,6 +9,13 @@ interface ReanimatedPluginOptions { * Custom options passed to 'react-native-reanimated/plugin' or 'react-native-worklets/plugin' babel plugins. */ babelPluginOptions?: Record; + + /** + * Disable adding transformation rules for reanimated / worklets babel plugin. + * This is useful when handling using `babel-swc-loader` or `babel-loader` and + * you have already added the babel plugin to your babel config. + */ + unstable_disableTransform?: boolean; } export class ReanimatedPlugin { @@ -31,14 +38,16 @@ export class ReanimatedPlugin { this.ensureDependencyInstalled(compiler.context, 'react-native-worklets'); } - // add rules for transpiling with reanimated loader - // TODO made obsolete by the new babel-swc-loader, remove in 6.0 - compiler.options.module.rules.push( - createReanimatedModuleRules( - reanimatedVersion.major, - this.options.babelPluginOptions - ) - ); + if (!this.options.unstable_disableTransform) { + // add rules for transpiling with reanimated loader + // TODO made obsolete by the new babel-swc-loader, remove in 6.0 + compiler.options.module.rules.push( + createReanimatedModuleRules( + reanimatedVersion.major, + this.options.babelPluginOptions + ) + ); + } // ignore the 'setUpTests' warning from reanimated which is not relevant compiler.options.ignoreWarnings = compiler.options.ignoreWarnings ?? []; From 7fab90db6cb4922085bc777caa5c87171f7fa7b8 Mon Sep 17 00:00:00 2001 From: Jakub Romanczyk Date: Fri, 22 Aug 2025 20:04:44 +0200 Subject: [PATCH 2/5] chore: changeset --- .changeset/thick-facts-make.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/thick-facts-make.md diff --git a/.changeset/thick-facts-make.md b/.changeset/thick-facts-make.md new file mode 100644 index 000000000..3389009b2 --- /dev/null +++ b/.changeset/thick-facts-make.md @@ -0,0 +1,6 @@ +--- +"@callstack/repack-plugin-reanimated": patch +"@callstack/repack": patch +--- + +ReanimatedPlugin: add option to disable transforms. This is useful when using `babel-swc-loader` or `babel-loader` From 13443a7e004a5d72d748a92e609c8cf045bcccd2 Mon Sep 17 00:00:00 2001 From: Jakub Romanczyk Date: Fri, 22 Aug 2025 20:08:16 +0200 Subject: [PATCH 3/5] refactor: reword warning --- packages/plugin-reanimated/src/loader.ts | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/plugin-reanimated/src/loader.ts b/packages/plugin-reanimated/src/loader.ts index cb7c2afb1..22d6ae22e 100644 --- a/packages/plugin-reanimated/src/loader.ts +++ b/packages/plugin-reanimated/src/loader.ts @@ -94,8 +94,13 @@ export function pitch( if (!warningDisplayed) { warningDisplayed = true; logger.warn( - '`@callstack/repack-plugin-reanimated` should not be used with `@callstack/repack/babel-swc-loader`. ' + - 'Instead, add the `react-native-reanimated/plugin` (or `react-native-worklets/plugin`) directly to your list of babel plugins in the `babel.config.js` file in the project root.' + 'When using `@callstack/repack-plugin-reanimated` together with ' + + '`@callstack/repack/babel-swc-loader` you should turn off the ' + + 'transforms for the reanimated plugin via the ' + + '`unstable_disableTransform` option. Instead, please add the ' + + '`react-native-reanimated/plugin` (or ' + + '`react-native-worklets/plugin`) directly to your list of babel ' + + 'plugins in the `babel.config.js` file in the project root.' ); } } From b2634bd2cbfdf202036b1458d1ba0ae9701064c0 Mon Sep 17 00:00:00 2001 From: Jakub Romanczyk Date: Fri, 22 Aug 2025 20:09:40 +0200 Subject: [PATCH 4/5] refactor: reword warning --- packages/plugin-reanimated/src/loader.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/plugin-reanimated/src/loader.ts b/packages/plugin-reanimated/src/loader.ts index 22d6ae22e..ad8561972 100644 --- a/packages/plugin-reanimated/src/loader.ts +++ b/packages/plugin-reanimated/src/loader.ts @@ -96,7 +96,7 @@ export function pitch( logger.warn( 'When using `@callstack/repack-plugin-reanimated` together with ' + '`@callstack/repack/babel-swc-loader` you should turn off the ' + - 'transforms for the reanimated plugin via the ' + + 'transforms for `react-native-reanimated` via the ' + '`unstable_disableTransform` option. Instead, please add the ' + '`react-native-reanimated/plugin` (or ' + '`react-native-worklets/plugin`) directly to your list of babel ' + From bdc0ddbacca6b3fabd1f624ba85f3a13fd7ab331 Mon Sep 17 00:00:00 2001 From: Jakub Romanczyk Date: Fri, 22 Aug 2025 20:10:44 +0200 Subject: [PATCH 5/5] chore: update tester-app --- apps/tester-app/rspack.config.mjs | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/tester-app/rspack.config.mjs b/apps/tester-app/rspack.config.mjs index df9ecf6cc..80bd93db2 100644 --- a/apps/tester-app/rspack.config.mjs +++ b/apps/tester-app/rspack.config.mjs @@ -122,6 +122,7 @@ export default Repack.defineRspackConfig((env) => { }), new ReanimatedPlugin({ babelPluginOptions: { relativeSourceLocation: true }, + unstable_disableTransform: true, }), new NativeWindPlugin({ cssInteropOptions: { inlineRem: 16 } }), process.env.RSDOCTOR && new RsdoctorRspackPlugin(),