feat: Update to use updated babel preset package name in react native…

… 73. (#78) * Update to use updated babel preset for react native. * fix: make backwards compatible --------- Co-authored-by: Daniel Williams <[email protected]>
storybookjs · Jan 7, 2024 · bb48857 · bb48857
1 parent 726d06e
commit bb48857
Show file tree

Hide file tree

Showing 4 changed files with 1,668 additions and 2,014 deletions.
diff --git a/README.md b/README.md
@@ -28,7 +28,7 @@ Assuming you've got an existing RN project, run the following from the project r
 
 ```sh
 npx sb init --type react
-yarn add react-dom react-native-web babel-plugin-react-native-web @storybook/addon-react-native-web metro-react-native-babel-preset --dev
+yarn add react-dom react-native-web babel-plugin-react-native-web @storybook/addon-react-native-web @react-native/babel-preset --dev
 ```
 
 Then edit your `.storybook/main.js`:

diff --git a/package.json b/package.json
@@ -44,6 +44,7 @@
   "devDependencies": {
     "@babel/cli": "^7.20.7",
     "@babel/core": "^7.20.12",
+    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
@@ -54,7 +55,6 @@
     "@storybook/react": "^7.0.0",
     "@storybook/react-webpack5": "^7.0.0",
     "@types/jest": "^27.4.1",
-    "@types/react-native": "^0.71.1",
     "@types/react-native-vector-icons": "^6.4.12",
     "@types/react-test-renderer": "^18.0.0",
     "auto": "^10.36.5",
@@ -72,13 +72,13 @@
     "eslint-plugin-storybook": "^0.6.6",
     "expo-linear-gradient": "^11.4.0",
     "jest": "^28.0.0",
-    "metro-react-native-babel-preset": "^0.74.1",
+    "@react-native/babel-preset": "^0.73.18",
     "native-base": "^3.4.19",
     "prettier": "^2.7.1",
     "prop-types": "^15.8.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "^0.71.1",
+    "react-native": "^0.73.1",
     "react-native-gesture-handler": "^2.8.0",
     "react-native-paper": "^4.12.5",
     "react-native-reanimated": "2.14.4",
@@ -98,8 +98,9 @@
   },
   "peerDependencies": {
     "@babel/preset-react": "*",
-    "babel-plugin-react-native-web": "*",
+    "@react-native/babel-preset": "*",
     "metro-react-native-babel-preset": "*",
+    "babel-plugin-react-native-web": "*",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
@@ -109,6 +110,12 @@
     },
     "react-dom": {
       "optional": true
+    },
+    "@react-native/babel-preset": {
+      "optional": true
+    },
+    "metro-react-native-babel-preset": {
+      "optional": true
     }
   },
   "publishConfig": {

diff --git a/src/webpack.ts b/src/webpack.ts
@@ -40,6 +40,31 @@ const DEFAULT_EXCLUDES = [
   '(webpack)',
 ];
 
+const isInstalled = (name: string) => {
+  try {
+    require(`${name}/package.json`);
+    return true;
+  } catch (er) {
+    return false;
+  }
+};
+
+const getRnPreset = () => {
+  if (isInstalled('@react-native/babel-preset')) {
+    console.log('Using @react-native/babel-preset');
+
+    return 'module:@react-native/babel-preset';
+  } else if (isInstalled('metro-react-native-babel-preset')) {
+    console.log('Using metro-react-native-babel-preset');
+
+    return 'module:metro-react-native-babel-preset';
+  } else {
+    throw new Error(
+      "Couldn't find babel-preset-react-native or metro-react-native-babel-preset.",
+    );
+  }
+};
+
 const webpackFinal = async (config: any, options: Options) => {
   // Add __DEV__ global variable which is relied on by many libraries
   config.plugins.push(
@@ -90,7 +115,7 @@ const webpackFinal = async (config: any, options: Options) => {
       root,
       presets: [
         [
-          'module:metro-react-native-babel-preset',
+          getRnPreset(),
           {
             useTransformReactJSXExperimental: true,
           },
@@ -102,7 +127,7 @@ const webpackFinal = async (config: any, options: Options) => {
           },
         ],
       ],
-      plugins: [...babelPlugins, '@babel/plugin-proposal-class-properties'],
+      plugins: [...babelPlugins],
     },
   });