Getting expo-router to work in NX

[Evanion]

I have been trying to get expo-router to work in a nx project.
So far I have gotten to the part where I'm getting an error relating to the context.
example repo: https://github.com/Evanion/nx-expo-router
This repo contains 2 apps:

• mobile - This is the expo-router project
• foobar - This is the standard app generated by the @nx/expo generator.

Current state

Right now, I'm getting an error that says

iOS Bundling failed 252ms (../../node_modules/expo-router/entry.js)
error: ../../node_modules/expo-router/_ctx.ios.js: /Volumes/projects/Regent/coin-pouch/node_modules/expo-router/_ctx.ios.js: Expected `fromDir` to be of type `string`, got `undefined`

What I have tried

No src directory

I moved the app code out of the src folder, as the expo docs discurrages changing the folder structure, and when you generate a new project using npx create-expo-app it generates a codebase that doesn't use src folder. I would prefer to have one in the end though.

Update index.js

I have updated the root index.js as per the expo docs, thinking that being a monorepo the expo-router might get the wrong path.

import { registerRootComponent } from 'expo';

import { ExpoRoot } from 'expo-router';

export function App() {
  const ctx = require.context('./app');
  return <ExpoRoot context={ctx} />;
}

registerRootComponent(App);

Declaring entry point

I have tried two approaches to declaring the entry point, both in the apps/mobile/package.json#main as per expo docs, and then by adding an import 'expo-router/entry'; to the top of the root index.js file. This only changes the error message to point at the Tutorial.js file in the expo-router package. But it still complain that the fromDir is undefined rather than a string.

Adding EXPO_USE_METRO_WORKSPACE_ROOT

Since when working with expo in a yarn workspace, you need to set an env variable to tell expo this, I added a .env to the mobile app, and added the variable, as well as updated the target in project.json to include it to the executor as an input. Though I suspect the that the @nx/expo package already does this.

{
  "name": "mobile",
  "$schema": "../../node_modules/nx/schemas/project-schema.json",
  "sourceRoot": "apps/mobile",
  "projectType": "application",
  "targets": {
    "start": {
      "executor": "@nx/expo:start",
      "inputs": [{ "env": "EXPO_USE_METRO_WORKSPACE_ROOT" }]
    }
  },
  "tags": []
}

Conclusion

I suspect that there are more people that would like to use expo-router with nx. But I have been unable to find any real discussions on the topic. So figured I would post something here, and hope that more people would be interested in helping out getting it fixed.

[FedeRBeije]

Update react-native-svg-transformer 1.2.0 to 1.3.0

[Evanion]

Well... that was simple enough .. it worked! thank you!

[Stewartarmbrecht]

Worked for me too! Thank you!! Do you mind explaining why this fixed it and how you knew to do this?

[henriquechagasg]

Hi @Evanion have you succeeded on creating a development build for iOS ?
I tried to build the "mobile" project you provided here: https://github.com/Evanion/nx-expo-router, but I only could make it work with Expo Go. For development builds I'm getting the error: Cannot find native module 'ExpoSplashScreen', js engine: hermes

[rufinoNL]

So I have succeeded in running it on iOS with Nx, but I have a different setup and including src (but I do have a different problem too).
What I see on your setup is that you've created an index.js to wire in everything, but you've also setup your app's package.json to point to the entry.js of expo-router. I wonder if something is wrong with that? I have no clue, just being a duck here.

My own setup is:

• app's package.json has "main": "expo-router/entry"
• I have no index.js, but I have a dir with src/app and in my project.json I have this: "sourceRoot": "apps/fe/my-app/src", but that's not really needed as expo-router does support having a src folder "out of the box" -> https://docs.expo.dev/router/reference/src-directory/
• Also took this in regard: https://docs.expo.dev/guides/typescript/#path-aliases, which in my case looks like this in the root tsconfig.base.json:

{

"compilerOptions": {
.. other stuff
"paths": {
"@@@/my-app/": ["../nxrootfolder/apps/fe/my-app/src/"],

And in my code I'll import my-app related components like:

import { MyComponent } from '@@@/my-app/some/path/toyourcomponent';

---

My issue is only on Android that it doesn't seem to work and getting:

[Nx] Unable to resolve with default PNPM resolver: ./node_modules/expo-router/entry
[Nx] Unable to resolve with any resolver: ./node_modules/expo-router/entry

And what I have tried there is to install the expo-router locally which fixes this, but nothing loads. Will try to copy all the node_modules locally to see what happens then. Again: not sure if this helps you think, but my 2 cents...

[fidestechnology]

I accidently added a new comment instead of a reply. Let me know if you have any questions.

[Evanion]

I got pulled in to a new assignment, so the project related to this issue have been put on the backburner for me. But I hope to get back in to it soon.

[FranciscoKloganB]

@Evanion Could you describe what steps of the approach above were preserved and which ones were removed?

[Chirag-kalsariya]

Hi @Evanion have you succeeded on creating a development build for iOS ? I tried to build the "mobile" project you provided here: https://github.com/Evanion/nx-expo-router, but I only could make it work with Expo Go. For development builds I'm getting the error: Cannot find native module 'ExpoSplashScreen', js engine: hermes

For this error add this package in your apps/project-name/package.json

    "expo-router": "*",
    "expo-splash-screen": "*",
    "react-native-safe-area-context": "*",
    "react-native-screens": "*"

[fidestechnology]

Sounds like issues we had in our team. Let me point you in the right direction:

1. Add "react-native-safe-area-context": "*", to the dependencies of your package.json within your expo nx app.
2. In the same file add "main": "index.js", just one line under your version.
3. Replace your App.tsx with a index.tsx within your expo apps src dir located at your-expo-app/src/app/index.tsx.
4. Change the content of your index.js(not tsx) at your-expo-app/index.js to have ONLY one line: import 'expo-router/entry';
5. If you do not have a .npmrc file at the root of your nx repo, yet, create it and add the line node-linker=hoisted
6. reinstall and voila...

This should do the trick :) I guess step 2 is the tricky part since it is not coresponsding with the docs which tell you to use expo-router/entry.

A basic version of the index.tsx at you-expo-app/src/app/ could look something like this:

import { Text } from 'react-native';

export default function Page() {
  return <Text>Home page</Text>;
}

you could add a _layout.tsx at the same level (your-expo-app/src/app/_layout.tsx) like your index.tsx (just adding is enough) to have a good place for central providers etc:

import { Slot } from 'expo-router';
import { SafeAreaView } from 'react-native';

export default function Root() {
  return (
    <SafeAreaView>
      <Slot />
    </SafeAreaView>
  );
}

[sagi-passion]

Thanks fidestechnology.
With your help, I've managed to resolve most of the issues. However, I've encountered another problem that appears to be related to how the bundler is configuring the path for the web. Do you have any ideas on how to tackle this?

Web Bundling failed 8339ms (index.js)
error: ../../node_modules/expo-router/_ctx.web.js: /Users/xxxxx/xxxxx/node_modules/expo-router/_ctx.web.js: Expected `fromDir` to be of type `string`, got `undefined`

[ps-artem]

@sagi-passion I have the same lol

[Chirag-kalsariya]

Sounds like issues we had in our team. Let me point you in the right direction:

1. Add "react-native-safe-area-context": "*", to the dependencies of your package.json within your expo nx app.
2. In the same file add "main": "index.js", just one line under your version.
3. Replace your App.tsx with a index.tsx within your expo apps src dir located at your-expo-app/src/app/index.tsx.
4. Change the content of your index.js(not tsx) at your-expo-app/index.js to have ONLY one line: import 'expo-router/entry';
5. If you do not have a .npmrc file at the root of your nx repo, yet, create it and add the line node-linker=hoisted
6. reinstall and voila...

This should do the trick :) I guess step 2 is the tricky part since it is not coresponsding with the docs which tell you to use expo-router/entry.

A basic version of the index.tsx at you-expo-app/src/app/ could look something like this:

import { Text } from 'react-native';

export default function Page() {
  return <Text>Home page</Text>;
}

you could add a _layout.tsx at the same level (your-expo-app/src/app/_layout.tsx) like your index.tsx (just adding is enough) to have a good place for central providers etc:

import { Slot } from 'expo-router';
import { SafeAreaView } from 'react-native';

export default function Root() {
  return (
    <SafeAreaView>
      <Slot />
    </SafeAreaView>
  );
}

Woke for me, thank you

I write my full step process here #23101 (comment)

[FranciscoKloganB]

We could use an official guide, by nx on how to setup file routing, or even updated the generators to take this into account.

[kaunglvlv]

https://github.com/kaunglvlv/nx-expo-router

I agree. I couldn't get it to work using @nx/expo to generate the app but I was able to get it work using create-expo-app. I'll update the README later but hopefully you can follow the commits. Here's the high level:

1. Scaffold expo app using create-expo-app
2. Run npx nx init
3. Move app to its workspace
4. Install expo-router and dependencies
5. In expo app's package.json update "main": "expo-router/entry"
6. Follow expo monorepo steps
7. Move App.tsx to src/app/index.tsx
8. Run npx nx start <project_name> (ex: npx nx start mobile)

Edit: Looks like expo-router is working now. Followed @yehonadav example

[Chirag-kalsariya]

I think this is similar issue.

#23101

When I run android app using
npx nx run-android app-name

App is build and than it crash.

E:\Heatfleet\client-monorepo\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 (E:\Heatfleet\client-monorepo\node_modules\@nx\expo\plugins\metro-resolver.js:33:15) at firstResolver (E:\Heatfleet\client-monorepo\node_modules\@expo\cli\src\start\server\metro\withMetroResolvers.ts:108:16) at resolveRequest (E:\Heatfleet\client-monorepo\node_modules\@expo\cli\src\start\server\metro\withMetroResolvers.ts:137:16) at Object.resolve (E:\Heatfleet\client-monorepo\node_modules\metro-resolver\src\resolve.js:32:12) at ModuleResolver.resolveDependency (E:\Heatfleet\client-monorepo\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:73:31) at DependencyGraph.resolveDependency (E:\Heatfleet\client-monorepo\node_modules\metro\src\node-haste\DependencyGraph.js:231:43) at E:\Heatfleet\client-monorepo\node_modules\metro\src\lib\transformHelpers.js:156:21 at HmrServer._registerEntryPoint (E:\Heatfleet\client-monorepo\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:android" exited with non-zero status code

However, In browser there is no issue like this. It run well.

[Chirag-kalsariya]

This step solve this error for me.

#23101 (comment)

[yehonadav]

i managed to get it working,
here's the source code: https://github.com/yehonadav/nx-expo-router
hope that helps

[techpeace]

This ended up working in our project. Thanks so much for sharing!