Can I use /app inside /src

Question

Can I use /app inside /src

AndresdoSantos opened this issue 2 years ago · comments

Andres dos Santos commented 2 years ago

My question is simple.

I created a new app with the expo-router template.

After doing this I moved the /app folder into /src and fast-refresh did not update my folder.

When I reloaded the entire app it showed the touch app/index.js screen.

I wanted to know if there is any way to use it inside the /src folder.

trin4ik · Answer 1 · Sun Oct 02 2022 18:38:37 GMT+0800 (China Standard Time)

u can override EXPO_ROUTER_APP_ROOT like:

EXPO_ROUTER_APP_ROOT="../../src/app" expo start --clear

relative path from node_modules/expo-router/entry.js, default is ../../app

Daniel K. Guolo · Answer 2 · Wed Nov 30 2022 21:48:41 GMT+0800 (China Standard Time)

this didn't work for me

Eric Kreutzer · Answer 3 · Mon Jan 02 2023 08:36:54 GMT+0800 (China Standard Time)

this did not work for me either - granted I'm using a monorepo.

Stephen Afam-Osemene · Answer 4 · Fri Jan 27 2023 18:02:20 GMT+0800 (China Standard Time)

The solution for me was to add this at the top of babel.config.js

process.env.EXPO_ROUTER_APP_ROOT = "../../src/app";

Aran Leite · Answer 5 · Sat Mar 04 2023 09:30:00 GMT+0800 (China Standard Time)

This really should be supported without this workaround

Wendell Misiedjan · Answer 6 · Mon Mar 20 2023 05:48:37 GMT+0800 (China Standard Time)

For people using this in monorepos, e.g. with turborepo, adding the following to app.config.js/ts works better.

process.env.EXPO_ROUTER_APP_ROOT = __dirname + "/src/app";

Nicolas Sturm · Answer 7 · Fri Apr 07 2023 01:35:22 GMT+0800 (China Standard Time)

The solution for me was to add this at the top of babel.config.js
process.env.EXPO_ROUTER_APP_ROOT = "../../src/app";

In a new project also need to install react-native-dotenv and add config in babel.config.js in the plugins section

process.env.EXPO_ROUTER_APP_ROOT = '../../src/app';

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      ['module:react-native-dotenv'],
      require.resolve('expo-router/babel'),
      'nativewind/babel',
    ],
  };
};

Geetesh Gupta · Answer 8 · Fri Apr 07 2023 18:03:20 GMT+0800 (China Standard Time)

Not working for me. It gives below output.

My babel config

module. Exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      "@babel/plugin-proposal-export-namespace-from",
      [
        "module:react-native-dotenv",
        {
          envName: "APP_ENV",
          moduleName: "@env",
          path: ".env",
        },
      ],
      ["react-native-paper/babel"],
      [
        "module-resolver",
        {
          alias: {
            src: "./src",
          },
        },
      ],
      [require. Resolve("expo-router/babel")],
      [
        "react-native-reanimated/plugin",
        {
          relativeSourceLocation: true,
        },
      ],
    ],
  };
};

Nicolas Sturm · Answer 9 · Sun Apr 09 2023 05:29:03 GMT+0800 (China Standard Time)

Not working for me. It gives below output.

My babel config

module. Exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      "@babel/plugin-proposal-export-namespace-from",
      [
        "module:react-native-dotenv",
        {
          envName: "APP_ENV",
          moduleName: "@env",
          path: ".env",
        },
      ],
      ["react-native-paper/babel"],
      [
        "module-resolver",
        {
          alias: {
            src: "./src",
          },
        },
      ],
      [require. Resolve("expo-router/babel")],
      [
        "react-native-reanimated/plugin",
        {
          relativeSourceLocation: true,
        },
      ],
    ],
  };
};

Hello @geetesh-gupta , you add the process.env.EXPO_ROUTER_APP_ROOT = '../../src/app'; line in the top of the babel.config.js file?

Geetesh Gupta · Answer 10 · Sun Apr 09 2023 10:49:36 GMT+0800 (China Standard Time)

Sorry @sturmenta , forgot to copy that in the previous snippet. Yes, I defined the process.env variable at the top of the babel config.

Brandon Fancher · Answer 11 · Mon Apr 10 2023 23:08:18 GMT+0800 (China Standard Time)

Seems you must also modify the index/entry file:

import { registerRootComponent } from "expo";
import { ExpoRoot } from "expo-router";

// Must be exported or Fast Refresh won't update the context
export function App() {
  const ctx = require.context("./src/app");
  return <ExpoRoot context={ctx} />;
}

registerRootComponent(App);

That and setting process.env.EXPO_ROUTER_APP_ROOT = "../../src/app"; did the trick for me.

Extraordinary Monkey · Answer 12 · Sat Apr 15 2023 15:36:44 GMT+0800 (China Standard Time)

If it is not working, make sure to clear cache. npm start -c

Nicolas Sturm · Answer 13 · Fri Apr 21 2023 05:50:40 GMT+0800 (China Standard Time)

Sorry @sturmenta , forgot to copy that in the previous snippet. Yes, I defined the process.env variable at the top of the babel config.

@geetesh-gupta were you able to solve the problem?

Geetesh Gupta · Answer 14 · Fri Apr 21 2023 09:25:16 GMT+0800 (China Standard Time)

Hello @sturmenta, I'm sorry for the delay in updating you on the status of the issue. I was able to resolve the cache problem. While cleaning the cache did not work initially, I found success by closing Visual Studio code and reopening the project after clearing the cache. Everything seems to be working smoothly now.

alamothe · Answer 15 · Thu Apr 27 2023 15:55:34 GMT+0800 (China Standard Time)

Same here, I have to modify index.ts and copy/paste from expo-router/entry to make it work,

Julio L. Muller · Answer 16 · Sun May 21 2023 14:28:57 GMT+0800 (China Standard Time)

Seems you must also modify the index/entry file:

import { registerRootComponent } from "expo";
import { ExpoRoot } from "expo-router";

// Must be exported or Fast Refresh won't update the context
export function App() {
  const ctx = require.context("./src/app");
  return <ExpoRoot context={ctx} />;
}

registerRootComponent(App);

That and setting process.env.EXPO_ROUTER_APP_ROOT = "../../src/app"; did the trick for me.

Among the solutions proposed here, this was the one that worked for me!

Rieger · Answer 17 · Wed May 24 2023 03:37:26 GMT+0800 (China Standard Time)

Would it be possible to add this to the documentation? I think a couple of people will encounter this and having it documented would be great!

Daniel K. Guolo · Answer 18 · Wed May 24 2023 20:48:23 GMT+0800 (China Standard Time)

Would it be possible to add this to the documentation? I think a couple of people will encounter this and having it documented would be great!

In my opinio expo haven't added this to docs because they want to create a better way to do it. It actually should have an easier way. Some config file or something. Should not be that hard.

Zoltan Fodor · Answer 19 · Sat Jun 03 2023 15:52:49 GMT+0800 (China Standard Time)

In a TypeScript environment, I was trying to use @juliolmuller's solution. However, I couldn't make it work. The solution I found was to allow the index.js file inside my tsconfig and extracted the index/entry into my index.js.
tsconfig:
{ "compilerOptions": { "allowJs": true }, "extends": "expo/tsconfig.base", "include": ["index.js"] }

Stefan K · Answer 20 · Sun Jun 11 2023 08:34:01 GMT+0800 (China Standard Time)

Can this be reopened? None of the solutions above have worked for me using Expo with TypeScript.

The option of just copying the contents of the entry file is not a good option, as even the Expo docs say:

Do not use this to change the root directory (app) as it won't account for usage in any other places.

Zoltan Fodor · Answer 21 · Sun Jun 11 2023 14:18:21 GMT+0800 (China Standard Time)

Hey @skoshy . I created an expo-router template where I solved this issue. Feel free to use the template or check my solution how I solved this: https://github.com/ritmillio/expo-starter-kit

tonykchan · Answer 22 · Wed Jun 14 2023 23:13:12 GMT+0800 (China Standard Time)

Hey @skoshy . I created an expo-router template where I solved this issue. Feel free to use the template or check my solution how I solved this: https://github.com/ritmillio/expo-starter-kit

What are the benefits of moving the default App folder to under a /src root folder? Or is it for a cleaner organization of files and components?

Zoltan Fodor · Answer 23 · Thu Jun 15 2023 01:15:28 GMT+0800 (China Standard Time)

Hey @skoshy . I created an expo-router template where I solved this issue. Feel free to use the template or check my solution how I solved this: https://github.com/ritmillio/expo-starter-kit

What are the benefits of moving the default App folder to under a /src root folder? Or is it for a cleaner organization of files and components?

There is no benefit except a more organized file structure.

Paulo Victor Duarte · Answer 24 · Fri Jun 16 2023 20:28:01 GMT+0800 (China Standard Time)

These were the steps to follow to succeed in moving the app folder to the src folder and using absolute path.

Install react-native-dotenv by running the following command in your terminal:

# npm
npm install react-native-dotenv
# yarn
yarn add react-native-dotenv

Move the index.ts file to the src folder. Update the "main" field in your package.json to point to the new location of index.ts. Modify your package.json as follows:

"main": "src/index.ts",

Configure Babel to use react-native-dotenv and module-resolver. Open your babel.config.js file and make the following modifications:

process.env.EXPO_ROUTER_APP_ROOT = '../../src/app';

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      'module:react-native-dotenv',
      require.resolve('expo-router/babel'),
      [
        'module-resolver',
        {
          root: ['.'],
          alias: { '@': './src' },
          extensions: ['.ts', '.tsx', '.js', '.ios.js', '.android.js'],
        },
      ],
    ],
  };
};

Update your TypeScript configuration. Open your tsconfig.json file and add the baseUrl and paths configuration as shown below:

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Delete the .expo folder in your project directory. This folder may contain cached files that could conflict with the updated project structure.
Rebuild your project by running the following command in your terminal:

# npm
npm run android -c
# yarn
yarn android -c

After following these steps, your project structure should resemble the following:

├── src
│   ├── app
│   │   ├── _layout.tsx
│   │   ├── [...missing].tsx
│   │   ├── modal.tsx
│   │   └── (tabs)
│   │       ├── index.tsx
│   │       ├── _layout.tsx
│   │       └── two.tsx
│   ├── assets
│   │   ├── fonts
│   │   │   └── SpaceMono-Regular.ttf
│   │   └── images
│   │       └── splash.png
│   ├── components
│   │   └── Themed.tsx
│   ├── constants
│   │   └── Colors.ts
│   ├── app.d.ts
│   └── index.ts
├── app.json
├── babel.config.js
├── package.json
├── tailwind.config.js
├── tree.txt
├── tsconfig.json
└── yarn.lock

Ovidiu Cristescu · Answer 25 · Sun Jul 02 2023 06:05:57 GMT+0800 (China Standard Time)

My babel config:

process.env.EXPO_ROUTER_APP_ROOT = '../../src/router';

module.exports = function (api) {
  api.cache(true);
  return {
    presets: [['babel-preset-expo', {jsxRuntime: 'automatic'}]],
    plugins: [
      require.resolve('expo-router/babel'),
      [
        'transform-inline-environment-variables',
        {
          include: ['EXPO_ROUTER_APP_ROOT'],
        },
      ],
    ],
  };
};

Make sure to run yarn add --dev babel-plugin-transform-inline-environment-variables and additionally npx expo start --clear to clear the cache. However, I'm still not sure if this is enough just yet.

EDIT:

Support for src/app will be added in #629, but if you want something like 'src/router' there will be no official support.

Evan Bacon · Answer 26 · Sat Jul 15 2023 03:03:51 GMT+0800 (China Standard Time)

Expo Router v2 supports src/app out of the box. Please don't use EXPO_ROUTER_APP_ROOT manually.

Rieger · Answer 27 · Sat Jul 15 2023 03:12:36 GMT+0800 (China Standard Time)

Thank You @EvanBacon! I assume that the @ annotation would work for all code then within src?

Saravanakumar · Answer 28 · Sat Jul 15 2023 18:24:17 GMT+0800 (China Standard Time)

We should update tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

https://docs.expo.dev/guides/typescript/#path-aliases

Rafael Figueira Goncalves · Answer 29 · Mon Jul 24 2023 11:16:41 GMT+0800 (China Standard Time)

Expo Router v2 supports src/app out of the box. Please don't use EXPO_ROUTER_APP_ROOT manually.

The auto app or app/src folder is not taking effect on my project at all, Ive had to import my custom dir and pass it as the context prop down to the ExpoRoot component on the index.js.

Which solves any issues till I enable the typedRoutes flag, at that point it breaks:

[Error: ENOENT: no such file or directory, scandir 'C:\Users\...\repo\mobile\app']

repo is the git repository,
mobile is the project folder,
app is where it's looking for the route files.

When my routes are actually stored under repo/mobile/src/routes.

Any help would be appreciated.

Amir Attar · Answer 30 · Tue Jul 25 2023 03:52:04 GMT+0800 (China Standard Time)

For people using this in monorepos, e.g. with turborepo, adding the following to app.config.js/ts works better.
process.env.EXPO_ROUTER_APP_ROOT = __dirname + "/src/app";

@ItsWendell did you specify "main" file in the package.json?

Rafael Figueira Goncalves · Answer 31 · Tue Jul 25 2023 06:37:22 GMT+0800 (China Standard Time)

Yes, sorry I forgot to mention it.
Adding the main prop to the package.json made no changes at all, it still looks at the index.js besides the package.json.
(if that file is deleted then it complains about no entrypoint, as I mentioned in #799)

ORIVALDO DE HOLANDA GAMA · Answer 32 · Sat Jul 29 2023 08:27:41 GMT+0800 (China Standard Time)

These were the steps to follow to succeed in moving the app folder to the src folder and using absolute path.

Install react-native-dotenv by running the following command in your terminal:
# npm
npm install react-native-dotenv
# yarn
yarn add react-native-dotenv
Move the index.ts file to the src folder. Update the "main" field in your package.json to point to the new location of index.ts. Modify your package.json as follows:
"main": "src/index.ts",
Configure Babel to use react-native-dotenv and module-resolver. Open your babel.config.js file and make the following modifications:
process.env.EXPO_ROUTER_APP_ROOT = '../../src/app';

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      'module:react-native-dotenv',
      require.resolve('expo-router/babel'),
      [
        'module-resolver',
        {
          root: ['.'],
          alias: { '@': './src' },
          extensions: ['.ts', '.tsx', '.js', '.ios.js', '.android.js'],
        },
      ],
    ],
  };
};
Update your TypeScript configuration. Open your tsconfig.json file and add the baseUrl and paths configuration as shown below:
{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}
Delete the .expo folder in your project directory. This folder may contain cached files that could conflict with the updated project structure.

Rebuild your project by running the following command in your terminal:
# npm
npm run android -c
# yarn
yarn android -c
After following these steps, your project structure should resemble the following:
├── src
│   ├── app
│   │   ├── _layout.tsx
│   │   ├── [...missing].tsx
│   │   ├── modal.tsx
│   │   └── (tabs)
│   │       ├── index.tsx
│   │       ├── _layout.tsx
│   │       └── two.tsx
│   ├── assets
│   │   ├── fonts
│   │   │   └── SpaceMono-Regular.ttf
│   │   └── images
│   │       └── splash.png
│   ├── components
│   │   └── Themed.tsx
│   ├── constants
│   │   └── Colors.ts
│   ├── app.d.ts
│   └── index.ts
├── app.json
├── babel.config.js
├── package.json
├── tailwind.config.js
├── tree.txt
├── tsconfig.json
└── yarn.lock

It worked to me. Now, July, 28 - 2023

ORIVALDO DE HOLANDA GAMA · Answer 33 · Sat Jul 29 2023 08:28:10 GMT+0800 (China Standard Time)

Thanks a lot. I'm so glad for this

Rafael Figueira Goncalves · Answer 34 · Mon Jul 31 2023 10:29:46 GMT+0800 (China Standard Time)

@orivaldogama thanks for the input!
I still have the same issue with the file or directory not being found.
I feel like we are using different commands, what does this do for you?

yarn android -c

Can you share your scripts? Mine are as following:


  "scripts": {
    "start": "expo start --dev-client",
    "clear": "expo start --dev-client --clear",
    "android": "react-native run-android"
  },

The "android" command runs fine, it's the start/clear that fails with that error.
Thanks

Ovidiu Cristescu · Answer 35 · Mon Jul 31 2023 13:46:23 GMT+0800 (China Standard Time)

Perhaps this will help:

Run yarn add --dev babel-plugin-transform-inline-environment-variables
In your metro.config.js:

module.exports = function (api) {
  api.cache(true);
  return {
    presets: [['babel-preset-expo']],
    plugins: [
      [
        'transform-inline-environment-variables',
        {
          include: ['EXPO_ROUTER_APP_ROOT'],
        },
      ],
      require.resolve('expo-router/babel'),
      '@babel/plugin-transform-export-namespace-from',
      'react-native-reanimated/plugin',
    ],
  };
};

Run npx expo start --clear (--clear/-c flag is important!)

Rafael Figueira Goncalves · Answer 36 · Mon Jul 31 2023 18:22:03 GMT+0800 (China Standard Time)

@LunatiqueCoder I think you mean the babel config on step 2.
I still get the same exact error, not sure if the loading order for the plugins should be something specific for it to work? Also in some places I saw the require.resolve('expo-router/babel'), as you did, some just the expo-router/babel, I've tried some different variations with no luck.
Here is my current babel.config.js

process.env.EXPO_ROUTER_APP_ROOT = './src/app';

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo', 'module:metro-react-native-babel-preset'],
    plugins: [
      'expo-router/babel',
      'react-native-paper/babel',
      [
        'module-resolver',
        {
          root: ['.'],
          alias: {
            '@': './src',
          },
          extensions: ['.ts', '.tsx', '.js', '.ios.js', '.android.js'],
        },
      ],

      [
        'transform-inline-environment-variables',
        {
          include: ['EXPO_ROUTER_APP_ROOT'],
        },
      ],
      require.resolve('expo-router/babel'),
      '@babel/plugin-transform-export-namespace-from',
      'react-native-reanimated/plugin',
    ],
  };
};

Thanks

Ovidiu Cristescu · Answer 37 · Mon Jul 31 2023 18:30:47 GMT+0800 (China Standard Time)

@rzfzr Indeed, I updated my post accordingly.

Looking at your code, the first line seems to be the problem. Either delete it, or change it to process.env.EXPO_ROUTER_APP_ROOT = '../../src/app';

👇 Quote #41 (comment)

relative path from node_modules/expo-router/entry.js, default is ../../app

Rafael Figueira Goncalves · Answer 38 · Mon Jul 31 2023 19:32:33 GMT+0800 (China Standard Time)

With or without process.env.EXPO_ROUTER_APP_ROOT = '../../src/app'; the result is exactly the same, it is as if it wasn't using that constant, as it always complains about not finding the file/dir on a path that never includes the src folder.
Error:

[Error: ENOENT: no such file or directory, scandir 'C:\Users\Rafael\Desktop\GitGud\sma\app\app'] {      
  errno: -4058,
  code: 'ENOENT',
  syscall: 'scandir',
  path: 'C:\\Users\\Rafael\\Desktop\\GitGud\\sma\\app\\app'
}

sma is the repo dir
the first app is the expo project subdir, (confusing I know, I already had this structure on multiple repos before adopting the expo-router....)
the second app is the default path which I'm not using, it does not exist, I'm trying to use sma/app/src/routes
This is the same error as my first post, just that there I renamed the folders.

Olivier CP · Answer 39 · Fri Aug 18 2023 02:40:32 GMT+0800 (China Standard Time)

@EvanBacon

Expo Router v2 supports src/app out of the box. Please don't use EXPO_ROUTER_APP_ROOT manually.

Even with expo-router v2 i still get this error when trying to do an EAS update:

[expo-cli] Using src/app as the root directory for Expo Router.
[expo-cli] Starting Metro Bundler
[expo-cli] iOS Bundling failed 1544ms
[expo-cli] SyntaxError: node_modules/expo-router/_ctx.ios.tsx: node_modules/expo-router/_ctx.ios.tsx:Invalid call at line 2: process.env.EXPO_ROUTER_APP_ROOT
[expo-cli] First argument of `require.context` should be a string denoting the directory to require.
[expo-cli] Error: node_modules/expo-router/_ctx.ios.tsx:Invalid call at line 2: process.env.EXPO_ROUTER_APP_ROOT

Kevin Ashton · Answer 40 · Tue Oct 17 2023 00:08:58 GMT+0800 (China Standard Time)

For anyone arriving here late you can override v2 of the router. You just define the EXPO_ROUTER_APP_ROOT_2. See https://github.com/expo/expo/blob/923016204c239cdad07b89626ac65eb505623d98/packages/expo-router/babel.js#L92

There are various use cases for this. In my case I prefer not to use the inline typescript compiler for a variety of reasons, hence I compile my files to a folder called dist-ts. Also worth noting that the path needs to be relative, not absolute.

babel.config.js example

process.env.EXPO_ROUTER_APP_ROOT_2 = "../../dist-ts";

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['expo-router/babel'],
  };
};

Keith Schacht · Answer 41 · Tue Oct 31 2023 01:56:52 GMT+0800 (China Standard Time)

@EvanBacon 👍 for supporting /src/app, but it would be great if ExpoRouter also let you customize the directory name. From this comment it looks like you may be already planning on it. :)

Rafael Figueira Goncalves · Answer 42 · Tue Nov 07 2023 21:21:59 GMT+0800 (China Standard Time)

@kevin-ashton just tried to change that ROOT_2 constant, still no changes, expo still fails looking for the routes on the old path...
Any updates on this?

Rafael Figueira Goncalves · Answer 43 · Tue Nov 07 2023 22:04:52 GMT+0800 (China Standard Time)

@AndresdoSantos May I ask why this issue was closed?

Mark Lawlor · Answer 44 · Wed Nov 08 2023 21:20:29 GMT+0800 (China Standard Time)

Expo Router only supports app/ and src/app. We have no immediate plans for these paths to be customised. We ask that people don't use the env vars mentioned, as the are mainly used for unit testing specific features and will not work in all scenarios. They may change unexpectedly and will not be covered by semver.

Alan Tirado · Answer 45 · Wed Feb 07 2024 04:23:35 GMT+0800 (China Standard Time)

I am using turborepo and had to no-hoist expo-router on my app. On top of this, I had to patch each of the _ctx.*.js files to not use any of the env variables. I replaced them with the actual values and it worked... Don't like the solution but it works as of now for me

Tom Nguyen · Answer 46 · Mon Mar 18 2024 09:48:28 GMT+0800 (China Standard Time)

This issue should be re-opened since I'm experiencing the same error on Expo SDK 50 and Router v3.

Rafael Figueira Goncalves · Answer 47 · Tue Mar 19 2024 02:58:17 GMT+0800 (China Standard Time)

@tn531 read the above reply from @marklawlor, this has been flagged as non issue/won't fix...

Mark Lawlor · Answer 48 · Wed Mar 20 2024 12:53:32 GMT+0800 (China Standard Time)

@rzfzr This was release in the v3, but its not a pattern we recommend. https://docs.expo.dev/router/reference/src-directory/#custom-directory

@tn531 As per the README.md, this repo is in maintenance mode and is only maintained for v2 security issues. If you have an issue we are more than happen to investigate, but you will need to create an issue on the correct repo https://github.com/expo/expo

Pathik Gandhi · Answer 49 · Fri Apr 26 2024 21:30:35 GMT+0800 (China Standard Time)

I have solved this issue by creating a index.js file on root and adding this code which have ctx with src path

//index.js
import { registerRootComponent } from "expo";
import { ExpoRoot } from "expo-router";

// Must be exported or Fast Refresh won't update the context
export function App() {
  const ctx = require.context("./src/app"); //Path with src folder
  return <ExpoRoot context={ctx} />;
}

registerRootComponent(App);

and change the main in package.json like this

"main": "index.js",

Felipe Maffezzolli · Answer 50 · Mon Apr 29 2024 22:16:02 GMT+0800 (China Standard Time)

I have solved this issue by creating a index.js file on root and adding this code which have ctx with src path
//index.js
import { registerRootComponent } from "expo";
import { ExpoRoot } from "expo-router";

// Must be exported or Fast Refresh won't update the context
export function App() {
  const ctx = require.context("./src/app"); //Path with src folder
  return <ExpoRoot context={ctx} />;
}

registerRootComponent(App);
and change the main in package.json like this
"main": "index.js",

This worked for me. Thanks.

Rui Marcos · Answer 51 · Mon May 20 2024 00:32:08 GMT+0800 (China Standard Time)

Among both solutions what worked for me was putting process.env.EXPO_ROUTER_APP_ROOT = "../../src/app"; override