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` 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(), diff --git a/packages/plugin-reanimated/src/loader.ts b/packages/plugin-reanimated/src/loader.ts index cb7c2afb1..ad8561972 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 `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 ' + + 'plugins in the `babel.config.js` file in the project root.' ); } } 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 ?? [];