fix(metro): Add support for cjs extension in metro.config.js (#2689 by …

…@jamonholmgren)

* Add support for cjs extension in metro.config.js
* Add comments about inlineRequires and Reactotron
* Remove `experimentalInlineRequires` from metro config

[skip ci]

boilerplate/app/app.tsx

@@ -11,9 +11,9 @@
  * if you're interested in adding screens and navigators.
  */
 if (__DEV__) {
-  // Load Reactotron configuration in development. We don't want to
-  // include this in our production bundle, so we are using `if (__DEV__)`
-  // to only execute this in development.
+  // Load Reactotron in development only.
+  // Note that you must be using metro's `inlineRequires` for this to work.
+  // If you turn it off in metro.config.js, you'll have to manually import it.
   require("./devtools/ReactotronConfig.ts")
 }
 import "./i18n"

boilerplate/metro.config.js

@@ -6,9 +6,17 @@ const config = getDefaultConfig(__dirname);
 
 config.transformer.getTransformOptions = async () => ({
   transform: {
-    experimentalImportSupport: false,
+    // Inline requires are very useful for deferring loading of large dependencies/components.
+    // For example, we use it in app.tsx to conditionally load Reactotron.
+    // However, this comes with some gotchas.
+    // Read more here: https://reactnative.dev/docs/optimizing-javascript-loading
+    // And here: https://github.com/expo/expo/issues/27279#issuecomment-1971610698
     inlineRequires: true,
   },
 });
 
+// This helps support certain popular third-party libraries
+// such as Firebase that use the extension cjs.
+config.resolver.sourceExts.push("cjs")
+
 module.exports = config;