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.