fix: use project's codegen plugin for babel

fixes #719

Author: satya164

packages/react-native-builder-bob/babel-config.js

@@ -61,7 +61,17 @@ const getConfig = (defaultConfig, { root, pkg }) => {
       },
       {
         include: path.join(root, src),
-        presets: [require.resolve('./babel-preset')],
+        presets: [
+          [
+            require.resolve('./babel-preset'),
+            {
+              // Let the app's preset handle the commonjs transform
+              // Otherwise this causes issues with `@react-native/babel-plugin-codegen`
+              // Codegen generates `export` statements in wrong places causing syntax error
+              supportsStaticESM: true,
+            },
+          ],
+        ],
       },
     ],
   };

packages/react-native-builder-bob/babel-preset.js

@@ -4,13 +4,21 @@ const browserslist = require('browserslist');
 
 /**
  * Babel preset for React Native Builder Bob
+ *
+ * @param {Boolean} options.supportsStaticESM - Whether to preserve ESM imports/exports, defaults to `false`
+ * @param {Boolean} options.rewriteImportExtensions - Whether to rewrite import extensions to '.js', defaults to `false`
+ * @param {Boolean} options.staticViewConfigsCodegen - Whether to enable the React Native codegen plugin, defaults to `false`
+ * @param {'automatic' | 'classic'} options.jsxRuntime - Which JSX runtime to use, defaults to 'automatic'
  */
 module.exports = function (api, options, cwd) {
   const opt = (name) =>
-    api.caller((caller) => (caller != null ? caller[name] : undefined));
+    options[name] !== undefined
+      ? options[name]
+      : api.caller((caller) => (caller != null ? caller[name] : undefined));
 
   const supportsStaticESM = opt('supportsStaticESM');
   const rewriteImportExtensions = opt('rewriteImportExtensions');
+  const staticViewConfigsCodegen = opt('staticViewConfigsCodegen');
   const jsxRuntime = opt('jsxRuntime');
 
   return {
@@ -47,7 +55,13 @@ module.exports = function (api, options, cwd) {
       require.resolve('@babel/preset-flow'),
     ],
     plugins: [
-      require.resolve('@react-native/babel-plugin-codegen'),
+      ...(staticViewConfigsCodegen
+        ? [
+            require.resolve('@react-native/babel-plugin-codegen', {
+              paths: [cwd],
+            }),
+          ]
+        : []),
       require.resolve('@babel/plugin-transform-strict-mode'),
       [
         require.resolve('./lib/babel'),

packages/react-native-builder-bob/package.json

@@ -51,7 +51,6 @@
     "@babel/preset-flow": "^7.24.7",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
-    "@react-native/babel-plugin-codegen": "^0.76.3",
     "babel-plugin-module-resolver": "^5.0.2",
     "browserslist": "^4.20.4",
     "cosmiconfig": "^9.0.0",

packages/react-native-builder-bob/src/types.ts

@@ -25,6 +25,7 @@ export type Options = {
 declare module '@babel/core' {
   export interface TransformCaller {
     rewriteImportExtensions: boolean;
+    staticViewConfigsCodegen: boolean;
     jsxRuntime: 'automatic' | 'classic';
   }
 }

packages/react-native-builder-bob/src/utils/compile.ts

@@ -105,6 +105,7 @@ export default async function compile({
               ? true
               : false,
           rewriteImportExtensions: esm,
+          staticViewConfigsCodegen: /\bcodegenNativeComponent</.test(filepath),
           jsxRuntime,
         },
         cwd: root,