![]() ![]() In the Modify the Metro config step, we instructed Metro to do a couple of this, specifically: Open our app's package.json, change the main property to index.js, and create this new index.js file in the app directory with the content below. If you are using a managed project, we have to change our default entrypoint to node_modules/expo/AppEntry.js. In monorepos, we can't hardcode paths to packages anymore since we can't be sure if they are installed in the root node_modules or the workspace node_modules folder. Whenever a library imports react, or any other library, Metro always resolves the library from the nodeModulesPaths we defined.Īs long as the apps/mobile/node_modules path has the correct library version and is listed as the first nodeModulesPaths entry, we should always get the correct version of that library. When we disable this hierarchical lookup, it should not matter where the React Native library is installed. This option is documented in the Metro Resolution Algorithm documentation, under step 5. node_modules - The root folder, contains and apps/mobile/node_modules - The app's folder, contains hierarchical lookup enabled, whenever expo imports react, Metro will resolve to and not This causes "multiple React versions" errors in your app.īy disabling hierarchical lookup, we can force Metro to resolve only folders from the nodeModulesPaths = order we defined in #2. ![]() As a result, monorepo tooling, like Yarn, will install these dependencies to the root node_modules directory, for example: node_modules - The root folder, contains apps/mobile/node_modules - The app's folder, contains modules and React Native libraries usually don't add react as a peer dependency.(uses monorepo tooling like Yarn, React is installed in two different node_modules folders. apps/marketing - A simple Next.js website to attract new users.For example, let's say you have the following monorepo: This option is important for certain edge cases, such as a monorepo that includes multiple versions of the react package. Force Metro to resolve (sub)dependencies only from the `nodeModulesPaths`Ĭonfig. resolve (workspaceRoot, 'node_modules' ), ] // 3. resolve (projectRoot, 'node_modules' ) , Let Metro know where to resolve packages and in what order extraNodeModules = monorepoPackages // 2. If your monorepo tooling creates workspace symlinks in the `node_modules` folder, // you can either add symlink support to Metro or set the `extraNodeModules` to avoid the symlinks. watchFolders = // Add the monorepo workspaces as `extraNodeModules` to Metro. Watch the local app folder, and only the shared packages (limiting the scope and speeding it up) // Note how we change this from `workspaceRoot` to `projectRoot`. Typically, these are the ones that are installed with an asterisk (*) in your package.json. You can speed things up by only watching the packages your app uses. Setting this path to the root of your monorepo will force Metro to watch all files within the repository and possibly cause a slow initial startup time.Īs your monorepo increases in size, watching all files within the monorepo becomes slower. If a file is outside of that scope, Metro won't be able to find it. Each of these directories must be within the scope of the watchFolders. When using monorepos, your app dependencies splits up into different directories. This default setting works great for apps that don't use a monorepo structure. Metro does that with the watchFolders option, which is set to the project directory by default. During the first phase, Resolution, Metro resolves your app's required files and dependencies. Metro has three separate stages in its bundling process, documented here. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |