[docs] Update expo router babel docs in setup for SDK 50 (expo#24832)

# Why - Companion PR to expo#24779 but we'll keep it in draft until we get closer to releasing SDK 50. --------- Co-authored-by: Aman Mittal <amandeepmittal@live.com>
onizam95 · Dec 11, 2023 · 734e258 · 734e258
1 parent 16520d8
commit 734e258
Show file tree

Hide file tree

Showing 2 changed files with 109 additions and 39 deletions.
diff --git a/docs/pages/router/installation.mdx b/docs/pages/router/installation.mdx
@@ -60,13 +60,20 @@ To create a new project, run the following command:
 
 You'll need to install the following dependencies:
 
-<Terminal
-  cmd={[
-    '$ npx expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants expo-status-bar react-native-gesture-handler',
-  ]}
-/>
+<Tabs>
+  <Tab label="SDK 50 and above">
+    <Terminal cmd={['$ npx expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants expo-status-bar']} />
+
+    The above command will install versions of these libraries that are compatible with the Expo SDK version your project is using.
+
+  </Tab>
+  <Tab label="SDK 49 and below">
+    <Terminal cmd={['$ npx expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants expo-status-bar react-native-gesture-handler']} />
 
-The above command will install versions of these libraries that are compatible with the Expo SDK version your project is using.
+    The above command will install versions of these libraries that are compatible with the Expo SDK version your project is using.
+
+  </Tab>
+</Tabs>
 
 </Step>
 
@@ -142,12 +149,38 @@ Then, enable [Metro web](/guides/customizing-metro/#adding-web-support-to-metro)
 
 ### Modify babel.config.js
 
-Add `expo-router/babel` plugin as the last item in the `plugins` array to your project's **babel.config.js**:
+<Tabs>
 
-{/* prettier-ignore */}
-```js babel.config.js
-plugins: ['expo-router/babel']
-```
+  <Tab label="SDK 50 and above">
+
+    Ensure you use `babel-preset-expo` as the `preset`, in the **babel.config.js** file or delete the file:
+
+    ```js babel.config.js
+    module.exports = function (api) {
+      api.cache(true);
+      return {
+        presets: ['babel-preset-expo'],
+      };
+    };
+    ```
+
+    If you're upgrading from a version of Expo Router that is older than v3, remove the `plugins: ['expo-router/babel']`. `expo-router/babel` was merged in `babel-preset-expo` in SDK 50 (Expo Router v3).
+
+  </Tab>
+
+  <Tab label="SDK 49 and below">
+
+   Add `expo-router/babel` plugin as the last item in the `plugins` array to your project's **babel.config.js**:
+
+  {/* prettier-ignore */}
+  ```js babel.config.js
+  plugins: ['expo-router/babel']
+  ```
+
+
+  </Tab>
+
+</Tabs>
 
 </Step>
 
@@ -161,36 +194,71 @@ After updating the Babel config file, run the following command to clear the bun
 
 </Step>
 
-## For Expo SDK below 49
-
-> Ensure you remove these resolutions in your **package.json** if you upgrade to Expo SDK 49 or above.
+<Step label="7">
 
-Expo Router requires at least `metro@0.76.0`. If you are using Expo SDK version below 49, you will need to force upgrade your `metro` version by setting a Yarn resolution or npm override.
+### Update resolutions
 
 <Tabs>
 
-<Tab label="Yarn">
-
-    ```json package.json
-    {
-      "resolutions": {
-        "metro": "0.76.0",
-        "metro-resolver": "0.76.0"
-      }
-    }
-    ```
-
-</Tab>
-
-<Tab label="npm">
-    ```json package.json
-    {
-      "overrides": {
-        "metro": "0.76.0",
-        "metro-resolver": "0.76.0"
-      }
-    }
-    ```
-</Tab>
-
+  <Tab label="SDK 50 and above">
+    If you're upgrading from an older version of Expo Router, ensure you remove all outdated Yarn resolutions or npm overrides in your **package.json**. Specifically remove `metro`, `metro-resolver`, `react-refresh` resolutions from your **package.json**.
+  </Tab>
+
+  <Tab label="SDK 49">
+    Expo Router requires at least `react-refresh@0.14.0`. React Native hasn't upgraded as of SDK 49 / Expo Router v2, so you need to force upgrade your `react-refresh` version by setting a Yarn resolution or npm override.
+
+    <Tabs>
+      <Tab label="Yarn">
+          ```json package.json
+          {
+            /* @hide ... */
+            /* @end */
+            "resolutions": {
+              "react-refresh": "~0.14.0"
+            }
+          }
+          ```
+      </Tab>
+      <Tab label="npm">
+          ```json package.json
+          {
+            /* @hide ... */
+            /* @end */
+            "overrides": {
+              "react-refresh": "~0.14.0"
+            }
+          }
+          ```
+      </Tab>
+    </Tabs>
+  </Tab>
+
+  <Tab label="SDK 48 and below">
+
+    Expo Router requires at least `metro@0.76.0`. If you are using Expo SDK version below 49, you will need to force upgrade your `metro` version by setting a Yarn resolution or npm override.
+
+    <Tabs>
+      <Tab label="Yarn">
+        ```json package.json
+        {
+          "resolutions": {
+            "metro": "0.76.0",
+            "metro-resolver": "0.76.0"
+          }
+        }
+        ```
+      </Tab>
+      <Tab label="npm">
+          ```json package.json
+          {
+            "overrides": {
+              "metro": "0.76.0",
+              "metro-resolver": "0.76.0"
+            }
+          }
+          ```
+      </Tab>
+    </Tabs>
+  </Tab>
 </Tabs>
+</Step>
diff --git a/docs/pages/router/reference/troubleshooting.mdx b/docs/pages/router/reference/troubleshooting.mdx
@@ -7,6 +7,8 @@ import { Terminal } from '~/ui/components/Snippet';
 
 ## `EXPO_ROUTER_APP_ROOT` not defined
 
+> This applies to Expo Router v1 and the beta release.
+
 If `process.env.EXPO_ROUTER_APP_ROOT` is not defined you'll see the following error:
 
 <Terminal