@nx/expo with expo-router 3 crashes with native module

CoSNaYe commented 4 months ago

Current Behavior

runs npx nx run-ios app
app crashes

root package.json

    "@expo/metro-config": "~0.17.3",
    "@expo/metro-runtime": "~3.1.1",
    "expo": "~50.0.3",
    "expo-constants": "~15.4.6",
    "expo-linking": "~6.2.2",
    "expo-router": "~3.4.10",
    "expo-splash-screen": "~0.26.1",
    "expo-status-bar": "~1.11.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.73.2",
    "react-native-fbsdk-next": "^13.0.0",
    "react-native-safe-area-context": "4.8.2",
    "react-native-screens": "~3.29.0",
    "react-native-svg": "14.1.0",
    "react-native-svg-transformer": "^1.3.0",
    "react-native-web": "~0.19.9",
    "tslib": "^2.3.0"

I intentionally install a native library react-native-fbsdk-next To run the sample app, please create an facebook app in https://developer.facebook.com/, and fill in the config in app.json

appID, clientToken, scheme

      [
        "react-native-fbsdk-next",
        {
          "appID": "",
          "clientToken": "",
          "displayName": "Test App",
          "scheme": "",
          "advertiserIDCollectionEnabled": false,
          "autoLogAppEventsEnabled": false,
          "isAutoInitEnabled": true,
          "iosUserTrackingPermission": "This identifier will be used to deliver personalized ads to you."
        }
      ]

What the sample repo has done?

npx create-nx-workspace@latest --preset=expo --appName=app
npx nx install app expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants expo-status-bar react-native-fbsdk-next
npx nx install app react-native-svg-transformer@1.3.0 due to this bug
add "main": "expo-router/entry" in apps/app/package.json as expo-router official docsays
copy some libraries dependencies from root package.json to apps/app/package.json due to this bug

Expected Behavior

Shouldn't crash

GitHub Repo

https://github.com/CoSNaYe/nx-with-expo-router3

Steps to Reproduce

runs npx nx run-ios app

app crashes with error

/Users/iancosnaye/developer/poc/mobile-router/node_modules/@nx/expo/plugins/metro-resolver.js:33
    throw new Error(`Cannot resolve ${chalk.bold(realModuleName)}`);
          ^
Error: Cannot resolve ./node_modules/expo-router/entry
at firstResolver (/Users/iancosnaye/developer/poc/mobile-router/node_modules/@nx/expo/plugins/metro-resolver.js:33:15)
at firstResolver (/Users/iancosnaye/developer/poc/mobile-router/node_modules/expo/node_modules/@expo/cli/src/start/server/metro/withMetroResolvers.ts:108:16)
at resolveRequest (/Users/iancosnaye/developer/poc/mobile-router/node_modules/expo/node_modules/@expo/cli/src/start/server/metro/withMetroResolvers.ts:137:16)
at Object.resolve (/Users/iancosnaye/developer/poc/mobile-router/node_modules/metro-resolver/src/resolve.js:32:12)
at ModuleResolver.resolveDependency (/Users/iancosnaye/developer/poc/mobile-router/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:73:31)
at DependencyGraph.resolveDependency (/Users/iancosnaye/developer/poc/mobile-router/node_modules/metro/src/node-haste/DependencyGraph.js:231:43)
at /Users/iancosnaye/developer/poc/mobile-router/node_modules/metro/src/lib/transformHelpers.js:156:21
at HmrServer._registerEntryPoint (/Users/iancosnaye/developer/poc/mobile-router/node_modules/metro/src/HmrServer.js:49:35)
at processTicksAndRejections (node:internal/process/task_queues:95:5)
at async Promise.all (index 0)
Warning: command "expo run:ios" exited with non-zero status code

Nx Report

Node   : 20.12.2
OS     : darwin-arm64
npm    : 10.5.0

nx                 : 18.3.4
@nx/js             : 18.3.4
@nx/jest           : 18.3.4
@nx/linter         : 18.3.4
@nx/eslint         : 18.3.4
@nx/workspace      : 18.3.4
@nx/detox          : 18.3.4
@nx/devkit         : 18.3.4
@nx/eslint-plugin  : 18.3.4
@nx/expo           : 18.3.4
@nx/react          : 18.3.4
@nrwl/tao          : 18.3.4
@nx/web            : 18.3.4
@nx/webpack        : 18.3.4
typescript         : 5.4.5
---------------------------------------
Registered Plugins:
@nx/expo/plugin
@nx/eslint/plugin
@nx/jest/plugin
@nx/detox/plugin

Failure Logs

/Users/iancosnaye/developer/poc/mobile-router/node_modules/@nx/expo/plugins/metro-resolver.js:33
        throw new Error(`Cannot resolve ${chalk.bold(realModuleName)}`);
              ^
Error: Cannot resolve ./node_modules/expo-router/entry
    at firstResolver (/Users/iancosnaye/developer/poc/mobile-router/node_modules/@nx/expo/plugins/metro-resolver.js:33:15)
    at firstResolver (/Users/iancosnaye/developer/poc/mobile-router/node_modules/expo/node_modules/@expo/cli/src/start/server/metro/withMetroResolvers.ts:108:16)
    at resolveRequest (/Users/iancosnaye/developer/poc/mobile-router/node_modules/expo/node_modules/@expo/cli/src/start/server/metro/withMetroResolvers.ts:137:16)
    at Object.resolve (/Users/iancosnaye/developer/poc/mobile-router/node_modules/metro-resolver/src/resolve.js:32:12)
    at ModuleResolver.resolveDependency (/Users/iancosnaye/developer/poc/mobile-router/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:73:31)
    at DependencyGraph.resolveDependency (/Users/iancosnaye/developer/poc/mobile-router/node_modules/metro/src/node-haste/DependencyGraph.js:231:43)
    at /Users/iancosnaye/developer/poc/mobile-router/node_modules/metro/src/lib/transformHelpers.js:156:21
    at HmrServer._registerEntryPoint (/Users/iancosnaye/developer/poc/mobile-router/node_modules/metro/src/HmrServer.js:49:35)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Promise.all (index 0)
Warning: command "expo run:ios" exited with non-zero status code

Package Manager Version

No response

Operating System

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

Additional Information

No response

Chirag-kalsariya commented 3 months ago

same error here, any solution ???

Chirag-kalsariya commented 3 months ago

I figure out the solution. here step that I follow to solve this error.

Delete node modules
Delete android folder
In root Create file .npmrc and add the line node-linker=hoisted
Added this package in apps/project-name/package.json "expo-router": "*", "expo-splash-screen": "*", "react-native-safe-area-context": "*", "react-native-screens": "*"
Added this in apps/project-name/package.json "main": "index.js",
In Project Index.js file, delete everything and add this one line only import 'expo-router/entry';
Now created tabs layout using this https://docs.expo.dev/router/advanced/tabs/ (My folder structure exact same is expo docs)
Install node modules
Create android folder and run app using npx nx run-android YOUR-APP-NAME

Reference: https://github.com/nrwl/nx/discussions/21847#discussioncomment-9030581 Thank you fidestechnology

CoSNaYe commented 3 months ago

@Chirag-kalsariya it works! thanks a lot! although it's different from what official doc states, not sure if i should close this issue

CoSNaYe commented 3 months ago

the workable solution is at the latest commit of the demo repo: https://github.com/CoSNaYe/nx-with-expo-router3/commit/1be175111a95e380369b41c4f8b433641d611ae3

However, it is different from Nx and expo-router v3 official doc has stated

github-actions[bot] commented 2 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.

nrwl / nx