Skip to content

Commit

Permalink
fix(react-native): fix unable to resolve realm (#26983)
Browse files Browse the repository at this point in the history
<!-- Please make sure you have read the submission guidelines before
posting an PR -->
<!--
https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#-submitting-a-pr
-->

<!-- Please make sure that your commit message follows our format -->
<!-- Example: `fix(nx): must begin with lowercase` -->

<!-- If this is a particularly complex change or feature addition, you
can request a dedicated Nx release for this pull request branch. Mention
someone from the Nx team or the `@nrwl/nx-pipelines-reviewers` and they
will confirm if the PR warrants its own release for testing purposes,
and generate it for you if appropriate. -->

## Current Behavior
<!-- This is the behavior we have today -->

## Expected Behavior
<!-- This is the behavior we should expect with the changes in this PR
-->

## Related Issue(s)
<!-- Please link the issue being fixed so it gets closed when this is
merged. -->

Fixes #26853
  • Loading branch information
xiongemi authored Jul 19, 2024
1 parent b623104 commit e87bf39
Show file tree
Hide file tree
Showing 4 changed files with 120 additions and 24 deletions.
45 changes: 34 additions & 11 deletions packages/expo/plugins/metro-resolver.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,16 +13,18 @@ import { workspaceRoot } from '@nx/devkit';
* This resolve function requires projectRoot to be set to
* workspace root in order modules and assets to be registered and watched.
*/
export function getResolveRequest(extensions: string[]) {
export function getResolveRequest(
extensions: string[],
exportsConditionNames: string[] = [],
mainFields: string[] = []
) {
return function (
_context: any,
realModuleName: string,
platform: string | null
) {
const debug = process.env.NX_REACT_NATIVE_DEBUG === 'true';

if (debug) console.log(chalk.cyan(`[Nx] Resolving: ${realModuleName}`));

const { resolveRequest, ...context } = _context;

const resolvedPath =
Expand All @@ -32,16 +34,23 @@ export function getResolveRequest(extensions: string[]) {
realModuleName,
platform,
debug
) ||
defaultMetroResolver(context, realModuleName, platform, debug) ||
) ??
defaultMetroResolver(context, realModuleName, platform, debug) ??
tsconfigPathsResolver(
context,
extensions,
realModuleName,
platform,
debug
) ||
pnpmResolver(extensions, context, realModuleName, debug);
) ??
pnpmResolver(
extensions,
context,
realModuleName,
debug,
exportsConditionNames,
mainFields
);
if (resolvedPath) {
return resolvedPath;
}
Expand Down Expand Up @@ -104,7 +113,9 @@ function pnpmResolver(
extensions: string[],
context: any,
realModuleName: string,
debug: boolean
debug: boolean,
exportsConditionNames: string[] = [],
mainFields: string[] = []
) {
try {
const pnpmResolve = getPnpmResolver(extensions);
Expand Down Expand Up @@ -199,16 +210,28 @@ function getMatcher(debug: boolean) {
* It is inspired form https://github.com/vjpr/pnpm-expo-example/blob/main/packages/pnpm-expo-helper/util/make-resolver.js.
*/
let resolver;
function getPnpmResolver(extensions: string[]) {
function getPnpmResolver(
extensions: string[],
exportsConditionNames: string[] = [],
mainFields: string[] = []
) {
if (!resolver) {
const fileSystem = new CachedInputFileSystem(fs, 4000);
resolver = ResolverFactory.createResolver({
fileSystem,
extensions: extensions.map((extension) => '.' + extension),
useSyncFileSystemCalls: true,
modules: [join(workspaceRoot, 'node_modules'), 'node_modules'],
conditionNames: ['native', 'browser', 'require', 'default'],
mainFields: ['react-native', 'browser', 'main'],
conditionNames: [
'native',
'browser',
'require',
'default',
'react-native',
'node',
...exportsConditionNames,
],
mainFields: ['react-native', 'browser', 'main', ...mainFields],
aliasFields: ['browser'],
});
}
Expand Down
27 changes: 26 additions & 1 deletion packages/expo/plugins/with-nx-metro.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,30 @@ import { join } from 'path';
import { getResolveRequest } from './metro-resolver';

interface WithNxOptions {
/**
* Change this to true to see debugging info.
*/
debug?: boolean;
/**
* A list of additional file extensions to resolve
* All the file extensions used for imports other than 'ts', 'tsx', 'js', 'jsx', 'json'
*/
extensions?: string[];
/**
* A list of additional folders to watch for changes
* By default, it watches all the folders in the workspace root except 'dist' and 'e2e'
*/
watchFolders?: string[];
/*
* A list of exports field condition names in node_modules libraries' package.json
* If a library has a package.json with an exports field, but it can't be resolved with the default conditions, you can add the name of the condition to this list.
*/
exportsConditionNames?: string[];
/**
* A list of main fields in package.json files to use for resolution
* If a library has a package.json with a main field that can't be resolved with the default conditions, you can add the name of the field to this list.
*/
mainFields?: string[];
}

export async function withNxMetro(
Expand Down Expand Up @@ -38,7 +59,11 @@ export async function withNxMetro(

const nxConfig: MetroConfig = {
resolver: {
resolveRequest: getResolveRequest(extensions),
resolveRequest: getResolveRequest(
extensions,
opts.exportsConditionNames,
opts.mainFields
),
nodeModulesPaths: [join(workspaceRoot, 'node_modules')],
},
watchFolders,
Expand Down
45 changes: 34 additions & 11 deletions packages/react-native/plugins/metro-resolver.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,16 +13,18 @@ import { workspaceRoot } from '@nx/devkit';
* This resolve function requires projectRoot to be set to
* workspace root in order modules and assets to be registered and watched.
*/
export function getResolveRequest(extensions: string[]) {
export function getResolveRequest(
extensions: string[],
exportsConditionNames: string[] = [],
mainFields: string[] = []
) {
return function (
_context: any,
realModuleName: string,
platform: string | null
) {
const debug = process.env.NX_REACT_NATIVE_DEBUG === 'true';

if (debug) console.log(chalk.cyan(`[Nx] Resolving: ${realModuleName}`));

const { resolveRequest, ...context } = _context;

const resolvedPath =
Expand All @@ -32,16 +34,23 @@ export function getResolveRequest(extensions: string[]) {
realModuleName,
platform,
debug
) ||
defaultMetroResolver(context, realModuleName, platform, debug) ||
) ??
defaultMetroResolver(context, realModuleName, platform, debug) ??
tsconfigPathsResolver(
context,
extensions,
realModuleName,
platform,
debug
) ||
pnpmResolver(extensions, context, realModuleName, debug);
) ??
pnpmResolver(
extensions,
context,
realModuleName,
debug,
exportsConditionNames,
mainFields
);
if (resolvedPath) {
return resolvedPath;
}
Expand Down Expand Up @@ -104,7 +113,9 @@ function pnpmResolver(
extensions: string[],
context: any,
realModuleName: string,
debug: boolean
debug: boolean,
exportsConditionNames: string[] = [],
mainFields: string[] = []
) {
try {
const pnpmResolve = getPnpmResolver(extensions);
Expand Down Expand Up @@ -199,16 +210,28 @@ function getMatcher(debug: boolean) {
* It is inspired form https://github.com/vjpr/pnpm-expo-example/blob/main/packages/pnpm-expo-helper/util/make-resolver.js.
*/
let resolver;
function getPnpmResolver(extensions: string[]) {
function getPnpmResolver(
extensions: string[],
exportsConditionNames: string[] = [],
mainFields: string[] = []
) {
if (!resolver) {
const fileSystem = new CachedInputFileSystem(fs, 4000);
resolver = ResolverFactory.createResolver({
fileSystem,
extensions: extensions.map((extension) => '.' + extension),
useSyncFileSystemCalls: true,
modules: [join(workspaceRoot, 'node_modules'), 'node_modules'],
conditionNames: ['native', 'browser', 'require', 'default'],
mainFields: ['react-native', 'browser', 'main'],
conditionNames: [
'native',
'browser',
'require',
'default',
'react-native',
'node',
...exportsConditionNames,
],
mainFields: ['react-native', 'browser', 'main', ...mainFields],
aliasFields: ['browser'],
});
}
Expand Down
27 changes: 26 additions & 1 deletion packages/react-native/plugins/with-nx-metro.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,30 @@ import { join } from 'path';
import { getResolveRequest } from './metro-resolver';

interface WithNxOptions {
/**
* Change this to true to see debugging info.
*/
debug?: boolean;
/**
* A list of additional file extensions to resolve
* All the file extensions used for imports other than 'ts', 'tsx', 'js', 'jsx', 'json'
*/
extensions?: string[];
/**
* A list of additional folders to watch for changes
* By default, it watches all the folders in the workspace root except 'dist' and 'e2e'
*/
watchFolders?: string[];
/*
* A list of exports field condition names in node_modules libraries' package.json
* If a library has a package.json with an exports field, but it can't be resolved with the default conditions, you can add the name of the condition to this list.
*/
exportsConditionNames?: string[];
/**
* A list of main fields in package.json files to use for resolution
* If a library has a package.json with a main field that can't be resolved with the default conditions, you can add the name of the field to this list.
*/
mainFields?: string[];
}

export async function withNxMetro(
Expand Down Expand Up @@ -38,7 +59,11 @@ export async function withNxMetro(

const nxConfig: MetroConfig = {
resolver: {
resolveRequest: getResolveRequest(extensions),
resolveRequest: getResolveRequest(
extensions,
opts.exportsConditionNames,
opts.mainFields
),
nodeModulesPaths: [join(workspaceRoot, 'node_modules')],
},
watchFolders,
Expand Down

0 comments on commit e87bf39

Please sign in to comment.