Fix @babel/runtime issues (#836)

* Add `@babel/runtime` as dependancy

* Revert "Add `@babel/runtime` as dependancy"

This reverts commit 693d8c5.

* `disableImportExportTransform` in babel config

* Fix to tests

* Change how reanimated is polyfilled

Author: YoussefHenna

packages/core/babel.config.js

@@ -1,7 +1,23 @@
-module.exports = {
-  presets: ["module:metro-react-native-babel-preset"],
-  plugins: [
-    "@babel/plugin-proposal-export-namespace-from",
-    "react-native-reanimated/plugin",
-  ],
+module.exports = (api) => {
+  const isTest = api.env("test");
+
+  return {
+    presets: [
+      [
+        "module:metro-react-native-babel-preset",
+        {
+          /**
+           * Addresses issue caused on snack that leads to `Unable to resolve module 'app/node_modules/@babel/runtime/helpers/interopRequireDefault.js'`
+           * See: https://github.com/expo/snack/pull/302
+           * Always false for tests for jest to work
+           */
+          disableImportExportTransform: !isTest,
+        },
+      ],
+    ],
+    plugins: [
+      "@babel/plugin-proposal-export-namespace-from",
+      "react-native-reanimated/plugin",
+    ],
+  };
 };

packages/maps/babel.config.js

@@ -1,3 +1,19 @@
-module.exports = {
-  presets: ["module:metro-react-native-babel-preset"],
+module.exports = (api) => {
+  const isTest = api.env("test");
+
+  return {
+    presets: [
+      [
+        "module:metro-react-native-babel-preset",
+        {
+          /**
+           * Addresses issue caused on snack that leads to `Unable to resolve module 'app/node_modules/@babel/runtime/helpers/interopRequireDefault.js'`
+           * See: https://github.com/expo/snack/pull/302
+           * Always false for tests for jest to work
+           */
+          disableImportExportTransform: !isTest,
+        },
+      ],
+    ],
+  };
 };

packages/native/babel.config.js

@@ -1,3 +1,19 @@
-module.exports = {
-  presets: ["module:metro-react-native-babel-preset"],
+module.exports = (api) => {
+  const isTest = api.env("test");
+
+  return {
+    presets: [
+      [
+        "module:metro-react-native-babel-preset",
+        {
+          /**
+           * Addresses issue caused on snack that leads to `Unable to resolve module 'app/node_modules/@babel/runtime/helpers/interopRequireDefault.js'`
+           * See: https://github.com/expo/snack/pull/302
+           * Always false for tests for jest to work
+           */
+          disableImportExportTransform: !isTest,
+        },
+      ],
+    ],
+  };
 };

packages/types/babel.config.js

@@ -1,3 +1,19 @@
-module.exports = {
-  presets: ["module:metro-react-native-babel-preset"],
+module.exports = (api) => {
+  const isTest = api.env("test");
+
+  return {
+    presets: [
+      [
+        "module:metro-react-native-babel-preset",
+        {
+          /**
+           * Addresses issue caused on snack that leads to `Unable to resolve module 'app/node_modules/@babel/runtime/helpers/interopRequireDefault.js'`
+           * See: https://github.com/expo/snack/pull/302
+           * Always false for tests for jest to work
+           */
+          disableImportExportTransform: !isTest,
+        },
+      ],
+    ],
+  };
 };

packages/ui/babel.config.js

@@ -1,7 +1,23 @@
-module.exports = {
-  presets: ["module:metro-react-native-babel-preset"],
-  plugins: [
-    "@babel/plugin-proposal-export-namespace-from",
-    "react-native-reanimated/plugin",
-  ],
+module.exports = (api) => {
+  const isTest = api.env("test");
+
+  return {
+    presets: [
+      [
+        "module:metro-react-native-babel-preset",
+        {
+          /**
+           * Addresses issue caused on snack that leads to `Unable to resolve module 'app/node_modules/@babel/runtime/helpers/interopRequireDefault.js'`
+           * See: https://github.com/expo/snack/pull/302
+           * Always false for tests for jest to work
+           */
+          disableImportExportTransform: !isTest,
+        },
+      ],
+    ],
+    plugins: [
+      "@babel/plugin-proposal-export-namespace-from",
+      "react-native-reanimated/plugin",
+    ],
+  };
 };

packages/ui/package.json

@@ -18,7 +18,7 @@
   "scripts": {
     "clean": "rimraf lib",
     "clean:modules": "rimraf node_modules",
-    "build:commonjs": "../../node_modules/.bin/babel src --out-dir lib/commonjs --extensions .tsx,.ts,.js,.jsx && ts-node scripts/polyfillReanimatedWorkletInitForSnack.ts",
+    "build:commonjs": "../../node_modules/.bin/babel src --out-dir lib/commonjs --extensions .tsx,.ts,.js,.jsx",
     "build": "yarn clean && yarn build:commonjs  && yarn tsc",
     "test": "jest",
     "test:coverage": "jest --coverage"

packages/ui/scripts/polyfillReanimatedWorkletInitForSnack.ts

@@ -1,3 +1,4 @@
+import "./polyfillReanimatedWorkletInit";
 import { Icon } from "@draftbit/native";
 export { Icon, LinearGradient, WebView } from "@draftbit/native";
 

packages/ui/src/index.tsx

@@ -0,0 +1,16 @@
+/**
+ * When the @draftbit/ui is used with snack, we run into the error: 'r.g.__reanimatedWorkletInit is not a function'
+ * The solution is to add a polyfill for the global.__reanimatedWorkletInit function
+ * https://forums.expo.dev/t/react-native-reanimated-error-r-g-reanimatedworkletinit-is-not-a-function/68222/3
+ *
+ * This polyfill needs to be done at the first point of execution, placing at the top of index.tsx does not guarantee that
+ * since the build reorders the code around (such as hoisting imports/exports) which results in it not being the top most call. Having it as an import of
+ * a seperate file guarantees it's the first import
+ *
+ */
+
+//@ts-ignore
+if (!global.__reanimatedWorkletInit) {
+  //@ts-ignore
+  global.__reanimatedWorkletInit = function () {};
+}