Live reload not working when adding expo-router without using the template install

[bsluther]

I started a new project using npx create-expo-app --template and selecting the typescript template, then followed the steps in "Getting Started" to install expo-router and peer dependencies and configure the project. Upon adding expo-router, live reloading stopped working, meaning I could manually hit refresh to see changes but saving a file in the project would not cause a reload. I tried matching my config to the config created using npx create-expo-app -e with-router but nothing got it to work.

I was able to resolve this by using npx create-expo-app -e with-router and then adding typescript to the project but I spent a while trying to figure out what I was doing wrong. I'm partially curious about what the problem was, and also thought I would post this in case someone else is having a similar problem in the future.

[EvanBacon]

Unclear what "live reloading stopped working" means. Expo Router has no overlap with the Fast Refresh implementation. Perhaps you didn't setup the entry file in such a way where the root component could be updated when new files are added.

[bsluther]

What I meant by "live reloading stopped working" was that file changes in my project didn't cause a reload in the simulator/Go client. I think you're right and it's not related to Expo Router, I was able to get it working by changing my entry file. This is what worked for me in my root index.js entry file:

import 'expo-dev-client';
import 'react-native-get-random-values';
import { registerRootComponent } from 'expo';
import { ExpoRoot } from 'expo-router';

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

registerRootComponent(App);

Thanks for getting back to me!

[ChamaraWP]

I migrated from react-navigation to expo router and added import '@expo/metro-runtime'; in the index file to enable fast refresh on the web. I'm concerned that I might have made a mistake.