fix: fix syntax error when running the app

with latest rn, running the app results in an error: `export declaration must be at top level of module`
callstack · Dec 6, 2024 · b029db9 · b029db9
1 parent 86c5c67
commit b029db9
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/packages/react-native-builder-bob/babel-config.js b/packages/react-native-builder-bob/babel-config.js
@@ -61,7 +61,16 @@ 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 `export` statements in wrong places causing syntax error
+              supportsStaticESM: true,
+            },
+          ],
+        ],
       },
     ],
   };

diff --git a/packages/react-native-builder-bob/babel-preset.js b/packages/react-native-builder-bob/babel-preset.js
@@ -4,10 +4,16 @@ 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 {'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');