nrwl / nx

Smart Monorepos · Fast CI
https://nx.dev
MIT License
22.59k stars 2.25k forks source link

React Native: After update to 16.8.1, Metro Resolver can't find external library in node_modules #19329

Closed airowe closed 8 months ago

airowe commented 9 months ago

Current Behavior

Metro Resolver unable to find external lib in node_modules (see error below))

Expected Behavior

Metro Resolver should be able to find external lib in node_modules

GitHub Repo

No response

Steps to Reproduce

  1. Run nx run-ios myapp --simulator \"iPhone 14 Pro\" --scheme \"DrtreatNativeDevelopment\""
  2. Everything looks good until after the app is launched on the simulator (Log below)

success Successfully built the app 2023-09-25 15:30:20.338 xcodebuild[2122:1267151] Requested but did not find extension point with identifier Xcode.InterfaceBuilderBuildSupport.PlatformDefinition info Installing "/Users/me/Library/Developer/Xcode/DerivedData/myapp-bvvwydadluigygdtmcybjiecneym/Build/Products/Debug-iphonesimulator/MyAppDevelopment.app on iPhone 14 Pro" info Launching "com.my.app.development" success Successfully launched the app on the simulator BUNDLE src/main.tsx

Nx Report

Node   : 18.16.1
   OS     : darwin-arm64
   npm    : 9.5.1

   nx                 : 16.8.1
   @nx/js             : 16.8.1
   @nx/jest           : 16.8.1
   @nx/linter         : 16.8.1
   @nx/workspace      : 16.8.1
   @nx/cypress        : 16.8.1
   @nx/detox          : 16.8.1
   @nx/devkit         : 16.8.1
   @nx/eslint-plugin  : 16.8.1
   @nx/react          : 16.8.1
   @nx/react-native   : 16.8.1
   @nrwl/tao          : 16.8.1
   @nx/web            : 16.8.1
   @nx/webpack        : 16.8.1
   typescript         : 5.2.2

Failure Logs

BUNDLE  src/main.tsx

error: Error: Unable to resolve module es6-shim from /Users/me/Projects/myapp/apps/myapp-native/src/main.tsx: es6-shim could not be found within the project or in these directories:
  ../../node_modules
  ../../../../node_modules
  1 | import { configurePushNotifications } from '@myapp/native/app/utils/pushNotifications';
> 2 | import 'es6-shim';
    |         ^
  3 | import { AppRegistry } from 'react-native';
  4 | import Config from 'react-native-config';
  5 | import 'react-native-get-random-values';
    at ModuleResolver.resolveDependency (/Users/me/Projects/myapp/node_modules/@react-native-community/cli-plugin-metro/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:139:15)
    at DependencyGraph.resolveDependency (/Users/me/Projects/myapp/node_modules/@react-native-community/cli-plugin-metro/node_modules/metro/src/node-haste/DependencyGraph.js:277:43)
    at Object.resolve (/Users/me/Projects/myapp/node_modules/@react-native-community/cli-plugin-metro/node_modules/metro/src/lib/transformHelpers.js:169:21)
    at Graph._resolveDependencies (/Users/me/Projects/myapp/node_modules/@react-native-community/cli-plugin-metro/node_modules/metro/src/DeltaBundler/Graph.js:473:35)
    at Graph._processModule (/Users/me/Projects/myapp/node_modules/@react-native-community/cli-plugin-metro/node_modules/metro/src/DeltaBundler/Graph.js:261:38)
    at async Graph._traverseDependenciesForSingleFile (/Users/me/Projects/myapp/node_modules/@react-native-community/cli-plugin-metro/node_modules/metro/src/DeltaBundler/Graph.js:249:5)
    at async Promise.all (index 0)
    at async Graph.initialTraverseDependencies (/Users/me/Projects/myapp/node_modules/@react-native-community/cli-plugin-metro/node_modules/metro/src/DeltaBundler/Graph.js:233:5)
    at async DeltaCalculator._getChangedDependencies (/Users/me/Projects/myapp/node_modules/@react-native-community/cli-plugin-metro/node_modules/metro/src/DeltaBundler/DeltaCalculator.js:229:25)
    at async DeltaCalculator.getDelta (/Users/me/Projects/myapp/node_modules/@react-native-community/cli-plugin-metro/node_modules/metro/src/DeltaBundler/DeltaCalculator.js:112:16)

Package Manager Version

npm 9.5.1

Operating System

Additional Information

No response

xiongemi commented 9 months ago

hey @airowe. could you try to comment out the line unstable_enablePackageExports: true in metro.config.js?

airowe commented 9 months ago

hey @airowe. could you try to comment out the line unstable_enablePackageExports: true in metro.config.js?

Thanks for the response, @xiongemi. I don't have that set. Here's my metro.config.js:

const { withNxMetro } = require('@nx/react-native');
const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');

const defaultConfig = getDefaultConfig(__dirname);
const {
  resolver: { sourceExts, assetExts },
} = defaultConfig;
/**
 * Metro configuration
 * https://facebook.github.io/metro/docs/configuration
 *
 * @type {import('metro-config').MetroConfig}
 */

const config = withNxMetro(
  {
    transformer: {
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: true,
        },
      }),
      babelTransformerPath: require.resolve('react-native-svg-transformer'),
    },
    resolver: {
      assetExts: assetExts.filter((ext) => ext !== 'svg'),
      sourceExts: [...sourceExts, 'svg'],
    },
  },
  {
    // Change this to true to see debugging info.
    // Useful if you have issues resolving modules
    debug: true,
    // all the file extensions used for imports other than 'ts', 'tsx', 'js', 'jsx'
    extensions: [],
  }
);
module.exports = mergeConfig(defaultConfig, config);
xiongemi commented 9 months ago

hey @airowe. i got it working after installing 'es6-shim' with below metro.config.js:

const { withNxMetro } = require('@nx/react-native');
const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
const exclusionList = require('metro-config/src/defaults/exclusionList');

const defaultConfig = getDefaultConfig(__dirname);
const { assetExts, sourceExts } = defaultConfig.resolver;

/**
 * Metro configuration
 * https://facebook.github.io/metro/docs/configuration
 *
 * @type {import('metro-config').MetroConfig}
 */
const customConfig = {
  transformer: {
    babelTransformerPath: require.resolve('react-native-svg-transformer'),
  },
  resolver: {
    assetExts: assetExts.filter((ext) => ext !== 'svg'),
    sourceExts: [...sourceExts, 'svg'],
    blockList: exclusionList([/^(?!.*node_modules).*\/dist\/.*/]),
    unstable_enableSymlinks: true,
    // unstable_enablePackageExports: true,
  },
};

module.exports = withNxMetro(mergeConfig(defaultConfig, customConfig), {
  // Change this to true to see debugging info.
  // Useful if you have issues resolving modules
  debug: true,
  // all the file extensions used for imports other than 'ts', 'tsx', 'js', 'jsx', 'json'
  extensions: [],
  // Specify folders to watch, in addition to Nx defaults (workspace libraries and node_modules)
  watchFolders: [],
});
airowe commented 9 months ago

@xiongemi Thanks for getting back to me. That error seems to now be resolved, but after the app is installed on the device the console log spits out a line for what seems like every file in my repository like this:

[Nx] Resolving: @myapp/ui-native/styles/colors.styles

There are quite a few lines showing in inability to resolve certain files

Unable to resolve with default Metro resolver: @myapp/ui-native/styles/colors.styles

Ultimately leading to the app not running due to module failure

BUNDLE src/main.tsx

LOG Running "DrtreatNative" with {"rootTag":1,"initialProps":{}} ERROR Invariant Violation: "DrtreatNative" has not been registered. This can happen if:

  • Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
  • A module failed to load due to an error and AppRegistry.registerComponent wasn't called., js engine: hermes

Any ideas?

xiongemi commented 9 months ago

what is the file extension of @myapp/ui-native/styles/colors.styles? is it .ts file? do you have a repo that i could look at?

airowe commented 9 months ago

what is the file extension of @myapp/ui-native/styles/colors.styles? is it .ts file? do you have a repo that i could look at?

It is, yes. But there are other files that are not being resolved as well. Here are some examples:

I tried adding file extensions to the extensions: [], block, but it didn't seem to have any impact.

Working on getting you access to the repo, but it's a privately maintained one. Do you have an established process for NDA-constrained support?

github-actions[bot] commented 7 months ago

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.