expo / router

[ARCHIVE]: Expo Router has moved to expo/expo -- The File-based router for universal React Native apps

Home Page:https://docs.expo.dev/routing/introduction/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Error: No filename found. This is likely a bug in expo-router.

rzfzr opened this issue · comments

Which package manager are you using? (Yarn is recommended)

yarn

Summary

I have a RN project which I'm having lots of trouble implementing the expo router, firstly setting
"main": "expo-router/entry" on package.json is completely ignored, it will not use _layout.js as an entrypoint, it will still try to use the default index.js. If index.js is delete then it will complain about lacking an entry file.

This is my index.js before tyring to implement the router:

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

import {PaperProvider} from 'react-native-paper';

export default function Main() {
  return (
    <PaperProvider>
      <App />
    </PaperProvider>
  );
}

AppRegistry.registerComponent(appName, () => Main);

If I ignore the 'main' field and simply import 'expo-router/entry'; as the only code there, it complains about the appName not being registered and does not load from _layout.js:

A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called., js engine: hermes

If I add that import on top of the original index.js code (included above), which has the component registration, then app does loads fine. However if I replace with a page from ./app, (so should be a route), and try to link to a second route I get the following error:

 ERROR  Error: Attempted to navigate before mounting the Root Layout component. Ensure the Root Layout component is rendering a Slot, or other navigator on the first render., js engine: hermes

Which I believe it is because the page component is being loaded directly, instead of in a slot, such in a layout, If Replace the component with a slot it becomes this:

import 'expo-router/entry';
import {AppRegistry} from 'react-native';
import {name as appName} from './app.json';

import {PaperProvider} from 'react-native-paper';
import {Slot} from 'expo-router';
// import Home from './app/home';

export default function Main() {
  return (
    <PaperProvider>
      <Slot />
    </PaperProvider>
  );
}

AppRegistry.registerComponent(appName, () => Main);

And this gives the following error:

 ERROR  Error: No filename found. This is likely a bug in expo-router.

Any help will be much appreciated.

Minimal reproducible example

package.json

{
  "name": "manus",
  "version": "0.0.1",
  "private": true,
  "main": "expo-router/entry",
  "scripts": {
    "start": "expo start --dev-client",
    "clear": "expo start --dev-client --clear",
    "android": "react-native run-android",
    "ios": "expo run:ios",
    "web": "expo start --web",
    "lint": "eslint .",
    "test": "jest"
  },
  "resolutions": {
    "metro": "0.76.7"
  },
  "dependencies": {
    "@react-native-firebase/app": "^18.2.0",
    "@react-native-firebase/auth": "^18.2.0",
    "@react-native-firebase/firestore": "^18.2.0",
    "@react-native-google-signin/google-signin": "^10.0.1",
    "@react-native-voice/voice": "^3.2.4",
    "expo": "^49.0.3",
    "expo-constants": "~14.4.2",
    "expo-linking": "~5.0.2",
    "expo-router": "2.0.0",
    "expo-status-bar": "~1.6.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.72.3",
    "react-native-app-intro-slider": "^4.0.4",
    "react-native-gesture-handler": "~2.12.0",
    "react-native-paper": "^5.9.1",
    "react-native-safe-area-context": "4.6.3",
    "react-native-screens": "~3.22.0",
    "react-native-vector-icons": "^10.0.0",
    "react-native-web": "~0.19.6"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/eslint-config": "^0.72.2",
    "@react-native/metro-config": "^0.72.9",
    "@tsconfig/react-native": "^3.0.0",
    "@types/react": "^18.0.24",
    "@types/react-native": "^0.72.2",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.2.1",
    "eslint": "^8.19.0",
    "jest": "^29.2.1",
    "metro-react-native-babel-preset": "0.76.7",
    "prettier": "^2.4.1",
    "react-test-renderer": "18.2.0",
    "typescript": "^5.1.3"
  },
  "engines": {
    "node": ">=16"
  }
}

Although I was already using the expo cli installed locally, the setup presented on #443 solved my issues.
I also think this should be added to the docs.