Cannot access expo librairies from expo apps

[manourez]

Current Behavior

I'm getting an error : Metro has encountered an error : Cannot resolve ... when trying to import a librairy by its alias from tsconfig.base.json.

Expected Behavior

• I should be able to import any expo librairy generated with the alias name

GitHub Repo

https://github.com/manourez/snedai-pay

Steps to Reproduce

1. Create a worspace using nx and preset to expo
2. Create a librairy using the CLI : nx g @nx/expo:lib libname
3. Try access the lib from the app using the alias in tsconfig.base.json : @appname/libname

Nx Report

NX   Report complete - copy this into the issue template

   Node   : 20.10.0
   OS     : win32-x64
   pnpm   : 8.6.3

   nx (global)        : 18.0.4
   nx                 : 18.0.4
   @nx/js             : 18.0.4
   @nx/jest           : 18.0.4
   @nx/linter         : 18.0.4
   @nx/eslint         : 18.0.4
   @nx/workspace      : 18.0.4
   @nx/cypress        : 18.0.4
   @nx/devkit         : 18.0.4
   @nx/eslint-plugin  : 18.0.4
   @nx/expo           : 18.0.4
   @nx/nest           : 18.0.4
   @nx/node           : 18.0.4
   @nx/react          : 18.0.4
   @nrwl/tao          : 18.0.4
   @nx/web            : 18.0.4
   @nx/webpack        : 18.0.4
   typescript         : 5.3.2

Failure Logs

error: Error: Cannot resolve @snedai/navigators
    at firstResolver (D:\Emmanuel\snedai\node_modules\@nx\expo\plugins\metro-resolver.js:33:15)
    at firstResolver (D:\Emmanuel\snedai\node_modules\expo\node_modules\@expo\cli\src\start\server\metro\wit
                                                                                                           thMetroResolvers.ts:108:16)
    at resolveRequest (D:\Emmanuel\snedai\node_modules\expo\node_modules\@expo\cli\src\start\server\metro\wi
                                                                                                           ithMetroResolvers.ts:137:16)
    at Object.resolve (D:\Emmanuel\snedai\node_modules\metro-resolver\src\resolve.js:32:12)
    at ModuleResolver.resolveDependency (D:\Emmanuel\snedai\node_modules\metro\src\node-haste\DependencyGrap
                                                                                                           ph\ModuleResolution.js:73:31)
    at DependencyGraph.resolveDependency (D:\Emmanuel\snedai\node_modules\metro\src\node-haste\DependencyGra
                                                                                                           aph.js:231:43)
    at D:\Emmanuel\snedai\node_modules\metro\src\lib\transformHelpers.js:156:21
    at resolveDependencies (D:\Emmanuel\snedai\node_modules\metro\src\DeltaBundler\buildSubgraph.js:42:25)  
    at visit (D:\Emmanuel\snedai\node_modules\metro\src\DeltaBundler\buildSubgraph.js:83:30)
    at async Promise.all (index 2)
    at visit (D:\Emmanuel\snedai\node_modules\metro\src\DeltaBundler\buildSubgraph.js:92:5)
    at async Promise.all (index 0)
    at buildSubgraph (D:\Emmanuel\snedai\node_modules\metro\src\DeltaBundler\buildSubgraph.js:103:3)        
    at Graph._buildDelta (D:\Emmanuel\snedai\node_modules\metro\src\DeltaBundler\Graph.js:157:22)
    at Graph.initialTraverseDependencies (D:\Emmanuel\snedai\node_modules\metro\src\DeltaBundler\Graph.js:14
                                                                                                           40:19)
    at DeltaCalculator._getChangedDependencies (D:\Emmanuel\snedai\node_modules\metro\src\DeltaBundler\Delta
                                                                                                           aCalculator.js:151:25)

Package Manager Version

pnpm 8.6.3 nx 18.0.4 node 20.10.0

Operating System

• [ ] macOS
• [ ] Linux
• [X] Windows
• [ ] Other (Please specify)

Additional Information

No response

[manourez]

@xiongemi Do you have any suggestion for this bug ?

[xiongemi]

@manourez i just tried with version 18.0.4, it seems fine for me. it works me out of the box. i can add components and run my app on web and ios.

do you have a repo?

this is my out-of-box metro.config.js for my app:

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

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, 'cjs', 'mjs', 'svg'],
  },
};

module.exports = withNxMetro(mergeConfig(defaultConfig, customConfig), {
  // Change this to true to see debugging info.
  // Useful if you have issues resolving modules
  debug: false,
  // 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: [],
});

[manourez]

@xiongemi Hello to correctly reproduce the issue you have to create an expo libs and try to import it from the app as mentioned.

I'll add the repo so you can check

[xiongemi]

i checkout your repo. i got a different error for i try to run nx start snedai-pay

this error is valid because @mr-mecanique/axios is not a library or npm package in the repo.

iOS Bundling failed 11972ms (index.js)
error: Error: Cannot resolve @mr-mecanique/axios
    at firstResolver (/Users/emily/code/tmp/snedai-pay/node_modules/@nx/expo/plugins/metro-resolver.js:33:15)
    at firstResolver (/Users/emily/code/tmp/snedai-pay/node_modules/expo/node_modules/@expo/cli/src/start/server/metro/withMetroResolvers.ts:108:16)
    at resolveRequest (/Users/emily/code/tmp/snedai-pay/node_modules/expo/node_modules/@expo/cli/src/start/server/metro/withMetroResolvers.ts:137:16)
    at Object.resolve (/Users/emily/code/tmp/snedai-pay/node_modules/metro-resolver/src/resolve.js:32:12)
    at ModuleResolver.resolveDependency (/Users/emily/code/tmp/snedai-pay/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:73:31)
    at DependencyGraph.resolveDependency (/Users/emily/code/tmp/snedai-pay/node_modules/metro/src/node-haste/DependencyGraph.js:231:43)
    at /Users/emily/code/tmp/snedai-pay/node_modules/metro/src/lib/transformHelpers.js:156:21
    at resolveDependencies (/Users/emily/code/tmp/snedai-pay/node_modules/metro/src/DeltaBundler/buildSubgraph.js:42:25)
    at visit (/Users/emily/code/tmp/snedai-pay/node_modules/metro/src/DeltaBundler/buildSubgraph.js:83:30)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Promise.all (index 0)
    at visit (/Users/emily/code/tmp/snedai-pay/node_modules/metro/src/DeltaBundler/buildSubgraph.js:92:5)
    at async Promise.all (index 1)
    at visit (/Users/emily/code/tmp/snedai-pay/node_modules/metro/src/DeltaBundler/buildSubgraph.js:92:5)
    at async Promise.all (index 6)
    at visit (/Users/emily/code/tmp/snedai-pay/node_modules/metro/src/DeltaBundler/buildSubgraph.js:92:5)

[manourez]

Maybe the problem is related to the OS . Are you on windows 11 ?

[SamiCharfeddine]

I'm having the same issue as @manourez , I cannot access expo libraries from expo apps on newly created projects.

OS: windows 10

[rudfoss]

Could this perhaps be a workaround? https://github.com/nrwl/nx/issues/22261#issuecomment-1988315361

[manourez]

Thank you @rudfoss . I will check and gert back at you

[manourez]

Could this perhaps be a workaround? #22261 (comment)

It's working after using your workaround. Thank you . The issue is related to the OS as I mentioned

[xiongemi]

i think it is fixed in https://github.com/nrwl/nx/pull/22759

[FranciscoKloganB]

The work around mentioned @rudfoss did not work for me. I'm on nx@19.0.4 and the latest expo.

Web Bundling failed 1866ms index.js (625 modules)
error: Error: Cannot resolve ../../libs/design-symbols at firstResolver (/home/fb/Documents/github/zenif/frontends/node_modules/@nx/expo/plugins/metro-resolver.js:33:15)

This is my babel.config.ts

const path = require('node:path')

const workdir = process.cwd()

module.exports = (/** @type {{ cache: (arg0: boolean) => void; }} */ api) => {
  api.cache(true)

  return {
    presets: ['babel-preset-expo'],
    plugins: [
      '@babel/plugin-transform-export-namespace-from',
      [
        '@tamagui/babel-plugin',
        {
          components: ['tamagui'],
          config: path.resolve(workdir, 'apps/mobile/tamagui.config.ts'),
          logTimings: true,
        },
      ],
      'react-native-reanimated/plugin',
    ],
  }
}

My metro configuration

const path = require('node:path')

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

const workdir = process.cwd()
const monorepoRoot = workdir

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'),
    blockList: exclusionList([/^(?!.*node_modules).*\/dist\/.*/]),
    nodeModulesPaths: [monorepoRoot],
    sourceExts: [...sourceExts, 'cjs', 'mjs', 'svg'],
    unstable_enableSymlinks: 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: [
    path.resolve(monorepoRoot, 'apps/mobile/src'),
    path.resolve(monorepoRoot, 'libs/design-symbols'),
    path.resolve(monorepoRoot, 'libs/design-tamagui'),
  ],
})

My typescript base configuration at the root

{
  "compileOnSave": false,
  "compilerOptions": {
    "allowJs": true,
    "baseUrl": ".",
    "checkJs": false,
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "moduleResolution": "Node",
    "rootDir": ".",
    "skipDefaultLibCheck": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": true,
    "target": "ES2022",
    "paths": {
      "@apps/mobile/*": ["apps/mobile/src/*"],
      "@apps/mobile-e2e/*": ["apps/mobile-e2e/src/*"],
      "@libs/design-symbols": ["libs/design-symbols/src/index.ts"],
      "@libs/design-tamagui": ["libs/design-tamagui/src/index.ts"],
    }
  },
  "exclude": ["node_modules", "tmp"]
}

The thing is, removing the import import { fontInter, fontPoppins } from '@libs/design-symbols' within the mobile app, only causes @libs/design-tamagui not to be found with the same issue.

[magic-ksenia]

I just updated to the latest nx/expo and SDK, and facing the same issue with the component import from monorepo's libraries. Working on mac. NX 19.1.0, SDK 51.0.8

[github-actions[bot]]

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.