[snackager] correct output with package type: module

Refs: expo#299 Refs: microsoft/rnx-kit#142 The Metro Babel preset does not produce correct output for packages containing "type": "module" unless the disableImportExportTransform options is used to prevent it from including @babel/plugin-transform-modules-commonjs
mmomtchev · May 25, 2022 · 0e84540 · 0e84540
1 parent 2689fb0
commit 0e84540
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 1 deletion.
diff --git a/snackager/src/__integration-tests__/__snapshots__/bundler.test.ts.snap b/snackager/src/__integration-tests__/__snapshots__/bundler.test.ts.snap
@@ -1,5 +1,51 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`bundler bundle packages with "type": "module" 1`] = `
+Object {
+  "files": Object {
+    "android": Object {
+      "bundle.js": Object {
+        "externals": Array [
+          "@react-navigation/native-stack",
+          "react",
+          "react-native",
+        ],
+        "size": 10707,
+      },
+    },
+    "ios": Object {
+      "bundle.js": Object {
+        "externals": Array [
+          "@react-navigation/native-stack",
+          "react",
+          "react-native",
+        ],
+        "size": 10707,
+      },
+    },
+    "web": Object {
+      "bundle.js": Object {
+        "externals": Array [
+          "@react-navigation/native-stack",
+          "react",
+          "react-native",
+        ],
+        "size": 10707,
+      },
+    },
+  },
+  "name": "@mmomtchev/react-native-settings",
+  "peerDependencies": Object {
+    "@react-navigation/native": "^6.0.0",
+    "@react-navigation/native-stack": "^6.6.0",
+    "@types/react": "^17.0.0",
+    "react": "^17.0.0",
+    "react-native": "^0.68.0",
+  },
+  "version": "1.0.3",
+}
+`;
+
 exports[`bundler bundles packages with json imports 1`] = `
 Object {
   "files": Object {

diff --git a/...__integration-tests__/__snapshots__/lockfiles/@mmomtchev/react-native-settings@1.0.3.lock b/...__integration-tests__/__snapshots__/lockfiles/@mmomtchev/react-native-settings@1.0.3.lock
@@ -0,0 +1,15 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@babel/runtime@*":
+  version "7.18.2"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.2.tgz#674575748fa99cf03694e77fc00de8e5117b42a0"
+  integrity sha512-mTV1PibQHr88R1p4nH/uhR/TJ0mXGEgKTx6Mnd1cn/DSA9r8fqbd+d31xujI2C1pRWtxjy+HAcmtB+MEcF4VNg==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
+regenerator-runtime@^0.13.4:
+  version "0.13.9"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
+  integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==
diff --git a/snackager/src/__integration-tests__/bundler.test.ts b/snackager/src/__integration-tests__/bundler.test.ts
@@ -224,4 +224,12 @@ describe('bundler', () => {
     const bundle = await bundleAsync('react-native-svg@12.1.1');
     expect(bundle).toMatchSnapshot();
   });
+
+  it('bundle packages with "type": "module"', async () => {
+    const bundle = await bundleAsync('@mmomtchev/react-native-settings@1.0.3');
+    expect(bundle).toMatchSnapshot();
+    expect(bundle.files.web['bundle.js'].externals).not.toContain(
+      '@babel/runtime/helpers/interopRequireDefault'
+    );
+  });
 });
diff --git a/snackager/src/bundler/makeConfig.ts b/snackager/src/bundler/makeConfig.ts
@@ -16,6 +16,7 @@ type Options = {
     // TODO: check if other properties are required
     publicPath?: string; // from ./utils/packageBundle
   };
+  packageType: string | undefined;
   externals: string[];
   platform: string;
   reanimatedPlugin?: boolean;
@@ -25,6 +26,7 @@ export default ({
   root,
   entry,
   output,
+  packageType,
   externals,
   platform,
   reanimatedPlugin,
@@ -68,7 +70,12 @@ export default ({
             options: {
               babelrc: false,
               configFile: false,
-              presets: [require.resolve('metro-react-native-babel-preset')],
+              presets: [
+                [
+                  require.resolve('metro-react-native-babel-preset'),
+                  { disableImportExportTransform: packageType === 'module' },
+                ],
+              ],
               plugins: [
                 RewriteImportsPlugin,
                 ...(reanimatedPlugin ? [require.resolve('react-native-reanimated/plugin')] : []),

diff --git a/snackager/src/utils/packageBundle.ts b/snackager/src/utils/packageBundle.ts
@@ -114,6 +114,7 @@ async function packageBundleUnsafe({
       },
       externals,
       platform,
+      packageType: packageJson.type,
       // The reanimated2 plugin scans the package for worklets and converts
       // them so they can be executed directly on the UI thread.
       // This is currently only done for the reanimated package itsself, but