From 5301d3f226a80ec7983e49209e8cee505d3a2ae7 Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacper.kafara@swmansion.com>
Date: Fri, 21 Jun 2024 20:22:43 +0200
Subject: [PATCH] fix(examples): allow project node_modules to be used (#2200)

## Description

The custom resolver implemented in our `metro.config.js` right now most
likely does not conver all cases.
When working on my PR with modals for Android I've added `jotai` package
and received errors from bundler that this package is not found,
because:

1. it was not present in any nearby `node_modules` - the file that
requries it resides now in `apps/test-examples`, thus application
`node_modules` are not checked by default,
2. only our custom resolver looks into apps `node_modules` & fails to
resolve this package.

I haven't investigated why it does not work for `jotai` in particular,
because more general solution is to just let the default module
resolution algorithm look into
application `node_modules` as it should always do.


## Changes

Added application `node_modules` to the list of additional node modules
in metro config of each example application.

## Test code and steps to reproduce

Install `jotai` w/o this change, require it in any example and try to
run the application.
Then apply changes from this PR and see it works well.

## Checklist

- [ ] Ensured that CI passes
---
 Example/metro.config.js           | 4 +++-
 FabricExample/metro.config.js     | 4 +++-
 FabricTestExample/metro.config.js | 4 +++-
 TVOSExample/metro.config.js       | 4 +++-
 TestsExample/metro.config.js      | 4 +++-
 5 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/Example/metro.config.js b/Example/metro.config.js
index 297f0c9d5e..c5f4eded10 100644
--- a/Example/metro.config.js
+++ b/Example/metro.config.js
@@ -22,6 +22,8 @@ const modules = [
 
 const resolvedExts = ['.ts', '.tsx', '.js', '.jsx'];
 
+const projectNodeModules = path.join(__dirname, 'node_modules');
+
 const config = {
   projectRoot: __dirname,
   watchFolders: [rnsRoot],
@@ -42,7 +44,7 @@ const config = {
       return acc;
     }, {}),
 
-    nodeModulesPaths: [path.join(__dirname, '../../')],
+    nodeModulesPaths: [projectNodeModules, path.join(__dirname, '../../')],
 
     // Since we use react-navigation as submodule it comes with it's own node_modules. While loading
     // react-navigation code, due to how module resolution algorithms works it seems that its node_modules
diff --git a/FabricExample/metro.config.js b/FabricExample/metro.config.js
index 821bfe8a00..e2feedebf9 100644
--- a/FabricExample/metro.config.js
+++ b/FabricExample/metro.config.js
@@ -22,6 +22,8 @@ const modules = [
 
 const resolvedExts = ['.ts', '.tsx', '.js', '.jsx'];
 
+const projectNodeModules = path.join(__dirname, 'node_modules');
+
 const config = {
   projectRoot: __dirname,
   watchFolders: [rnsRoot],
@@ -41,7 +43,7 @@ const config = {
       return acc;
     }, {}),
 
-    nodeModulesPaths: [path.join(__dirname, '../../')],
+    nodeModulesPaths: [projectNodeModules, path.join(__dirname, '../../')],
 
     // Since we use react-navigation as submodule it comes with it's own node_modules. While loading
     // react-navigation code, due to how module resolution algorithms works it seems that its node_modules
diff --git a/FabricTestExample/metro.config.js b/FabricTestExample/metro.config.js
index 808ee58fdc..09a15171f8 100644
--- a/FabricTestExample/metro.config.js
+++ b/FabricTestExample/metro.config.js
@@ -22,6 +22,8 @@ const modules = [
 
 const resolvedExts = ['.ts', '.tsx', '.js', '.jsx'];
 
+const projectNodeModules = path.join(__dirname, 'node_modules');
+
 const config = {
   projectRoot: __dirname,
   watchFolders: [rnsRoot],
@@ -41,7 +43,7 @@ const config = {
       return acc;
     }, {}),
 
-    nodeModulesPaths: [path.join(__dirname, '../../')],
+    nodeModulesPaths: [projectNodeModules, path.join(__dirname, '../../')],
 
     // Since we use react-navigation as submodule it comes with it's own node_modules. While loading
     // react-navigation code, due to how module resolution algorithms works it seems that its node_modules
diff --git a/TVOSExample/metro.config.js b/TVOSExample/metro.config.js
index c5db002116..cd3622d419 100644
--- a/TVOSExample/metro.config.js
+++ b/TVOSExample/metro.config.js
@@ -22,6 +22,8 @@ const modules = [
 
 const resolvedExts = ['.ts', '.tsx', '.js', '.jsx'];
 
+const projectNodeModules = path.join(__dirname, 'node_modules');
+
 const config = {
   projectRoot: __dirname,
   watchFolders: [rnsRoot],
@@ -42,7 +44,7 @@ const config = {
       return acc;
     }, {}),
 
-    nodeModulesPaths: [path.join(__dirname, '../../')],
+    nodeModulesPaths: [projectNodeModules, path.join(__dirname, '../../')],
 
     // Since we use react-navigation as submodule it comes with it's own node_modules. While loading
     // react-navigation code, due to how module resolution algorithms works it seems that its node_modules
diff --git a/TestsExample/metro.config.js b/TestsExample/metro.config.js
index 808ee58fdc..09a15171f8 100644
--- a/TestsExample/metro.config.js
+++ b/TestsExample/metro.config.js
@@ -22,6 +22,8 @@ const modules = [
 
 const resolvedExts = ['.ts', '.tsx', '.js', '.jsx'];
 
+const projectNodeModules = path.join(__dirname, 'node_modules');
+
 const config = {
   projectRoot: __dirname,
   watchFolders: [rnsRoot],
@@ -41,7 +43,7 @@ const config = {
       return acc;
     }, {}),
 
-    nodeModulesPaths: [path.join(__dirname, '../../')],
+    nodeModulesPaths: [projectNodeModules, path.join(__dirname, '../../')],
 
     // Since we use react-navigation as submodule it comes with it's own node_modules. While loading
     // react-navigation code, due to how module resolution algorithms works it seems that its node_modules