fix(react-native): fix unable to resolve on windows (nrwl#22759)

fahslaj · Apr 10, 2024 · 4cd1808 · 4cd1808
1 parent aa6d464
commit 4cd1808
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 6 deletions.
diff --git a/packages/expo/plugins/with-nx-metro.ts b/packages/expo/plugins/with-nx-metro.ts
@@ -1,7 +1,8 @@
-import { joinPathFragments, workspaceRoot } from '@nx/devkit';
+import { workspaceRoot } from '@nx/devkit';
 import { mergeConfig } from 'metro-config';
 import type { MetroConfig } from 'metro-config';
 import { existsSync, readdirSync, statSync } from 'fs-extra';
+import { join } from 'path';
 
 import { getResolveRequest } from './metro-resolver';
 
@@ -24,7 +25,7 @@ export async function withNxMetro(
       (fileName) =>
         !['dist', 'e2e'].includes(fileName) && !fileName.startsWith('.')
     )
-    .map((fileName) => joinPathFragments(workspaceRoot, fileName))
+    .map((fileName) => join(workspaceRoot, fileName))
     .filter((filePath) => statSync(filePath).isDirectory());
 
   if (opts.watchFolders?.length) {
@@ -38,7 +39,7 @@ export async function withNxMetro(
   const nxConfig: MetroConfig = {
     resolver: {
       resolveRequest: getResolveRequest(extensions),
-      nodeModulesPaths: [joinPathFragments(workspaceRoot, 'node_modules')],
+      nodeModulesPaths: [join(workspaceRoot, 'node_modules')],
     },
     watchFolders,
   };

diff --git a/packages/expo/src/utils/ensure-dependencies.ts b/packages/expo/src/utils/ensure-dependencies.ts
@@ -1,10 +1,12 @@
 import {
   addDependenciesToPackageJson,
+  detectPackageManager,
   type GeneratorCallback,
   type Tree,
 } from '@nx/devkit';
 import {
   babelPresetExpoVersion,
+  babelRuntimeVersion,
   expoMetroConfigVersion,
   expoMetroRuntimeVersion,
   expoSplashScreenVersion,
@@ -20,6 +22,7 @@ import {
 } from './versions';
 
 export function ensureDependencies(host: Tree): GeneratorCallback {
+  const isPnpm = detectPackageManager(host.root) === 'pnpm';
   return addDependenciesToPackageJson(
     host,
     {
@@ -38,6 +41,11 @@ export function ensureDependencies(host: Tree): GeneratorCallback {
       '@testing-library/jest-native': testingLibraryJestNativeVersion,
       'jest-expo': jestExpoVersion,
       'babel-preset-expo': babelPresetExpoVersion,
+      ...(isPnpm
+        ? {
+            '@babel/runtime': babelRuntimeVersion, // @babel/runtime is used by react-native-svg
+          }
+        : {}),
     }
   );
 }
diff --git a/packages/expo/src/utils/versions.ts b/packages/expo/src/utils/versions.ts
@@ -23,3 +23,5 @@ export const reactNativeSvgVersion = '14.1.0';
 export const testingLibraryReactNativeVersion = '~12.4.2';
 export const testingLibraryJestNativeVersion = '~5.4.3';
 export const jestExpoVersion = '~50.0.1';
+
+export const babelRuntimeVersion = '7.22.6';
diff --git a/packages/react-native/plugins/with-nx-metro.ts b/packages/react-native/plugins/with-nx-metro.ts
@@ -1,7 +1,8 @@
-import { joinPathFragments, workspaceRoot } from '@nx/devkit';
+import { workspaceRoot } from '@nx/devkit';
 import { mergeConfig } from 'metro-config';
 import type { MetroConfig } from 'metro-config';
 import { existsSync, readdirSync, statSync } from 'fs-extra';
+import { join } from 'path';
 
 import { getResolveRequest } from './metro-resolver';
 
@@ -24,7 +25,7 @@ export async function withNxMetro(
       (fileName) =>
         !['dist', 'e2e'].includes(fileName) && !fileName.startsWith('.')
     )
-    .map((fileName) => joinPathFragments(workspaceRoot, fileName))
+    .map((fileName) => join(workspaceRoot, fileName))
     .filter((filePath) => statSync(filePath).isDirectory());
 
   if (opts.watchFolders?.length) {
@@ -38,7 +39,7 @@ export async function withNxMetro(
   const nxConfig: MetroConfig = {
     resolver: {
       resolveRequest: getResolveRequest(extensions),
-      nodeModulesPaths: [joinPathFragments(workspaceRoot, 'node_modules')],
+      nodeModulesPaths: [join(workspaceRoot, 'node_modules')],
     },
     watchFolders,
   };