Expo Router Error: Attempted to navigate before mounting the Root Layout component

Issue

Attempted to create a simple Expo app on SDK-29 and Expo Router 2 but get the 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'. This code was modified from the expo template tabs where it does work. The index.js renders properly but error occurs when pressing the 'Go to about'.My _layout.js, index.js, and about.js are below.

_layout.js

import FontAwesome from '@expo/vector-icons/FontAwesome';
import { useFonts } from 'expo-font';
import { SplashScreen, Stack } from 'expo-router';
import { useEffect } from 'react';
import { useColorScheme } from 'react-native';

export {
  // Catch any errors thrown by the Layout component.
  ErrorBoundary,
} from 'expo-router';

export const unstable_settings = {
  // Ensure that reloading on `/modal` keeps a back button present.
  initialRouteName: 'index',
};

// Prevent the splash screen from auto-hiding before asset loading is complete.
SplashScreen.preventAutoHideAsync();

export default function RootLayout() {

  const colorScheme = useColorScheme();

  const [loaded, error] = useFonts({
    SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
    ...FontAwesome.font,
  });

  // Expo Router uses Error Boundaries to catch errors in the navigation tree.
  useEffect(() => {
    if (error) throw error;
  }, [error]);

  useEffect(() => {
    if (loaded) {
      SplashScreen.hideAsync();
    }
  }, [loaded]);

  if (!loaded) {
    return null;
  }

  return (
    <Stack screenOptions={{ headerShown: false }}>
      <Stack.Screen name="about" options={{}} />
      <Stack.Screen name="details" options={{}} />
    </Stack>
);
}

index.js

import { Text, View } from 'react-native';
import { Link, router } from 'expo-router';

export default function App(){

    return (
        <View>
            <Text>index.js :</Text>
            <Link href="/about">Go to about</Link>
        </View>

    )

}

about.js

import { View, Text } from 'react-native'

export default function About() {
  return (
    <View>
      <Text>about</Text>
    </View>
  )
}

Going on Github didn't help and I want to use SDK-49 features for my app. Any help would be appreciated!

Solution

Everything works, can you share all code or error screen?

UPD: After checking github repo:

1. Delete index.js from root not from src/app
2. Change package.json to the code in the below
3. Change babel.config.js also
4. Delete node_modules and install again
5. run yarn start or npm run start

package.json:

    {
        "name": "subtitlify",
        "version": "1.0.0",
        "main": "expo-router/entry",
        "scripts": {
            "start": "expo start",
            "android": "expo start --android",
            "ios": "expo start --ios",
            "web": "expo start --web"
        },
        "dependencies": {
            "expo": "~49.0.6",
            "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-gesture-handler": "~2.12.0",
            "react-native-reanimated": "~3.3.0",
            "react-native-safe-area-context": "4.6.3",
            "react-native-screens": "~3.22.0",
            "react-native-web": "~0.19.6"
        },
        "devDependencies": {
            "@babel/core": "^7.20.0"
        },
        "private": true
    }

babel.config.js:

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

Answered By - oren