react-native-monorepo-config 0.1.2 → 0.1.4

package/README.md

@@ -30,6 +30,7 @@ Here, `my-app` is a React Native app, and `a` and `b` are libraries that are use
 To configure Metro for `my-app`, you can create a `metro.config.js` file in the `my-app` directory with the following content:
 
 ```js
+const path = require('path');
 const { getDefaultConfig } = require('@react-native/metro-config'); // Import from `@expo/metro-config` if using Expo CLI
 const { withMetroConfig } = require('react-native-monorepo-config');
 
@@ -70,7 +71,7 @@ module.exports = {
 
 This configuration will setup a few things:
 
-- Configure Metro to watch for changes in other packages in the monorepo instead of just the current package. This may slow down the bundling process, in large monorepos. In that case, you can override `watchFolders` to add specific folders to watch instead.
+- Configure Metro to watch for changes in other packages in the monorepo instead of only the current package. This may slow down the bundling process in large monorepos. In that case, you can override `watchFolders` to add specific folders to watch instead.
 - Block packages defined in `peerDependencies` of other packages in the monorepo to avoid duplicate versions from being loaded. Loading duplicate versions of some packages such as `react` can cause issues. Make sure to specify `peerDependencies` for your packages appropriately.
 - If the packages defined in `peerDependencies` have been hoisted to the monorepo root, point Metro to them so they can be found.
 - Configure Metro's resolve to prioritize `package.json#source` or the `source` condition in `package.json#exports` so that the app can import source code directly from other packages in the monorepo. To utilize this, make sure to add `"source": "src/index.ts"` or `"exports": { ".": { "source": "./src/index.ts" } }` to the `package.json` of the packages you want to import from.

package/index.js

@@ -23,8 +23,14 @@ export function withMetroConfig(baseConfig, { root, dirname }) {
     );
   }
 
+  if (!Array.isArray(pkg.workspaces)) {
+    throw new Error(
+      `The 'workspaces' field in the 'package.json' at '${root}' must be an array.`
+    );
+  }
+
   // Get the list of monorepo packages except current package
-  const packages = (pkg.workspaces.packages || pkg.workspaces)
+  const packages = pkg.workspaces
     .flatMap((pattern) =>
       glob.sync(pattern, {
         cwd: root,
@@ -32,23 +38,28 @@ export function withMetroConfig(baseConfig, { root, dirname }) {
         ignore: [`**/node_modules`, `**/.git`, `**/.yarn`],
       })
     )
-    .filter((p) => {
-      const dir = path.join(root, p);
-
-      // Ignore current package
+    .map((p) => path.join(root, p))
+    .filter((dir) => {
+      // Exclude current package
       if (path.relative(dir, dirname) === '') {
         return false;
       }
 
-      // Ignore packages that don't have a package.json
+      // Ignore folders that don't have a package.json
       return fs.existsSync(path.join(dir, 'package.json'));
     });
 
+  // If monorepo root contains a name, add it to the list of packages
+  // Necessary if the root is a package itself
+  if (pkg.name) {
+    packages.push(root);
+  }
+
   // Get the list of peer dependencies for all packages in the monorepo
   const peers = packages
-    .flatMap((it) => {
+    .flatMap((dir) => {
       const pak = JSON.parse(
-        fs.readFileSync(path.join(root, it, 'package.json'), 'utf8')
+        fs.readFileSync(path.join(dir, 'package.json'), 'utf8')
       );
 
       return pak.peerDependencies ? Object.keys(pak.peerDependencies) : [];
@@ -63,18 +74,26 @@ export function withMetroConfig(baseConfig, { root, dirname }) {
   const blockList = new RegExp(
     '(' +
       packages
-        .flatMap((it) =>
-          peers.map((m) => `^${escape(path.join(it, 'node_modules', m))}\\/.*$`)
+        .flatMap((dir) =>
+          peers.map(
+            (m) => `^${escape(path.join(dir, 'node_modules', m))}\\/.*$`
+          )
         )
         .join('|') +
       ')$'
   );
 
-  // When we import a package from the monorepo, metro won't be able to find their deps if they are hoisted
+  // When we import a package from the monorepo, metro may not be able to find the deps in blockList
   // We need to specify them in `extraNodeModules` to tell metro where to find them
   const extraNodeModules = peers.reduce((acc, name) => {
-    if (fs.existsSync(path.join(root, 'node_modules', name))) {
-      acc[name] = path.join(root, 'node_modules', name);
+    // First, try to find the package in the current package's node_modules
+    // As a fallback, try to find it in the monorepo root
+    const dir = [dirname, root]
+      .map((d) => path.join(d, 'node_modules', name))
+      .find((d) => fs.existsSync(d));
+
+    if (dir) {
+      acc[name] = dir;
     }
 
     return acc;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-monorepo-config",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Configure Metro for a React Native app in a monorepo",
   "repository": "https://github.com/satya164/react-native-monorepo-config",
   "author": "Satyajit Sahoo <satyajit.happy@gmail.com> (https://github.com/satya164/)",