Metro server restart is needed to see code changes in demo project in iOS simulator

[JulienFremy]

Description

Hello and thanks for this project.

I'm new in react-native so maybe I miss something obvious, but I failed to find a solution after a decent research effort, so here goes.

I'm trying to run the demo project on an iOS simulator. The project in itself runs fine, I'm running npx react-native start in a shell, and npx react-native run-ios in an another shell.

But I can't get to have a local modification of the App.tsx reflected in the app, unless I stop and start again metro (stop and start again npx react-native start).

This is not the way it's supposed to work I believe.

If I understood things correctly, normally I should be able to at least see changes when I reload manually the app (by pressing Cmd+R in the simulator or pressing r in the metro server app). When I do so, I see that there is a reload occurring but my changes are not reflected (I made sure that my changes were saved in the IDE).

The other option, (Hot Reload or Fast Refresh, I believe they are the same thing), is not working as well at all.

I can provide additional info if needed.

Thanks!

React Native Version

0.71.8

Output of npx react-native info

System:
OS: macOS 13.2.1
CPU: (10) arm64 Apple M1 Max
Memory: 8.43 GB / 64.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 20.1.0 - /opt/homebrew/bin/node
Yarn: 1.22.19 - /opt/homebrew/bin/yarn
npm: 9.6.4 - /opt/homebrew/bin/npm
Watchman: 2023.05.08.00 - /opt/homebrew/bin/watchman
Managers:
CocoaPods: 1.12.1 - /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 22.4, iOS 16.4, macOS 13.3, tvOS 16.4, watchOS 9.4
Android SDK: Not Found
IDEs:
Android Studio: Not Found
Xcode: 14.3/14E222b - /usr/bin/xcodebuild
Languages:
Java: 19.0.2 - /opt/homebrew/opt/openjdk/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 18.2.0 => 18.2.0
react-native: 0.71.8 => 0.71.8
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

Follow these steps here, and choose:

ReactNative CLI Quickstart

Development OS: macOS

Target OS: iOS

Just follow the main setup with no particular options for the tools.

At the end, try to edit code and reload app: update not reflected.

Snack, code example, screenshot, or link to a repository

reload-does-not-update-app.mp4

[cortinico]

Passing this over to the Metro team

[sarthakgdeveloper]

any updates for the solution, facing the same issue

[shikhar119911]

anyone got the solution?

[robhogan]

Thanks for the reports all - if anyone is still seeing this issue, could you start Metro with DEBUG=Metro:* yarn start and let us know the output from Metro as you're making changes to files? A video like @JulienFremy's would be perfect.

That should let us know where the change is being missed and would be a big help narrowing the problem down. Thanks!

[shikhar119911]

It is still saying same issue. No apps connected.

[JulienFremy]

@robhogan Thanks for the reply. I made a new video with your instructions:

live-reload-not-working-low.mp4

I allowed myself to do some other tests. I ran watchman --server-encoding=json --persistent log-level debug, and I see some logs when I do changes to App.tsx:

{
    "log": "2023-07-06T16:45:01,294: [notify 4980763160 /Users/jfremy/dev/perso/react-native/AwesomeProject5] fsevents: got /Users/jfremy/dev/perso/react-native/AwesomeProject5/App.tsx 11400 InodeMetaMod ItemModified ItemIsFile\n",
    "unilateral": true,
    "level": "debug"
}
{
    "log": "2023-07-06T16:45:01,294: [notify 4980763160 /Users/jfremy/dev/perso/react-native/AwesomeProject5] add_pending: /Users/jfremy/dev/perso/react-native/AwesomeProject5/App.tsx VIA_NOTIFY\n",
    "unilateral": true,
    "level": "debug"
}
{
    "log": "2023-07-06T16:45:01,294: [io 4980763160 /Users/jfremy/dev/perso/react-native/AwesomeProject5]  ... wake up\n",
    "unilateral": true,
    "level": "debug"
}
{
    "log": "2023-07-06T16:45:01,294: [io 4980763160 /Users/jfremy/dev/perso/react-native/AwesomeProject5] processing 1 events in /Users/jfremy/dev/perso/react-native/AwesomeProject5\n",
    "unilateral": true,
    "level": "debug"
}
{
    "log": "2023-07-06T16:45:01,294: [io 4980763160 /Users/jfremy/dev/perso/react-native/AwesomeProject5] getFileInformation(/Users/jfremy/dev/perso/react-native/AwesomeProject5/App.tsx) file=0x600000110160 dir=0x0\n",
    "unilateral": true,
    "level": "debug"
}
{
    "log": "2023-07-06T16:45:01,294: [io 4980763160 /Users/jfremy/dev/perso/react-native/AwesomeProject5] file changed exists=true via_notify=true stat-changed=false isdir=false size=2604 /Users/jfremy/dev/perso/react-native/AwesomeProject5/App.tsx\n",
    "unilateral": true,
    "level": "debug"
}

So I assume that points to an issue in the way Metro communicates/interacts with watchman?

[robhogan]

Hi @JulienFremy - thanks for that, super helpful. The absence of a "Using watcher:" log there is interesting and suggests metro-file-map isn't actually being initialised in watch mode.

That comes from here - as you see in the absence of an explicit watch value we disable watch mode by default in CI

metro/packages/metro/src/node-haste/DependencyGraph/createHasteMap.js

Line 94 in 3050e27

watch: options?.watch == null ? !ci.isCI : options.watch,

You could try node -p "require('ci-info')" to check whether your environment is (wrongly?) being detected as CI for some reason.

If not, maybe there's either an explicit watch: false somewhere in your config, or a bug where we're coercing null to boolean.

[JulienFremy]

@robhogan Thanks for your investigation! node -p "require('ci-info')" indeed returned that my env was detected as a CI one, and finally I linked it to an environment variable that was set in my env named CI.

After removing this variable, running DEBUG=Metro:* yarn start gives now the following and everything works as expected 🎉 :

  Metro:Watcher Beginning crawl with "watchman". +76ms
  Metro:Watcher Crawler "watchman" returned 1 added/modified, 0 removed, 1 clock(s). +75ms
  Metro:FileMap Visiting 0 added/modified files. +1ms
  Metro:FileMap Finished mapping 14415 files. +11ms
  Metro:Watcher Using watcher: watchman +0ms
  Metro:WatchmanWatcher Received watch-project response: undefined +64ms
  Metro:WatchmanWatcher Received clock response: c:1688653118:8568:1:456 +0ms
  Metro:WatchmanWatcher Received subscribe response: metro-file-map-13188--Users-jfremy-dev-perso-react-native-AwesomeProject5-76255e4c0394acc30a81ed459d813baf +1ms

Running CI='bla' DEBUG=Metro:* yarn start raises the issue again (no Metro:WatchmanWatcher log):

Metro:Watcher Beginning crawl with "watchman". +78ms
Metro:Watcher Crawler "watchman" returned 0 added/modified, 0 removed, 1 clock(s). +84ms
Metro:FileMap Visiting 0 added/modified files. +1ms
Metro:FileMap Finished mapping 14415 files. +3ms

Thanks again a ton, this issue was very misleading for me, and I would never have found without your help!

[shikhar119911]

@robhogan I am not able to connect metro to my ios emulator. It says no app’s available on react native version 0.72.0 Please help me i am stuck on it.

[layerok]

@robhogan, thanks, CI was the problem

[pedrogoiania]

Here the same problem. The just thing that works was run the sudo yarn start to works fine. The standard, run without sudo, not works and the changes not reflect on the app. I try to start project from begin and same problem.

My configuration:

Macbook M1 Pro 
react-native 0.72.6
node 16

[ghostgarrix]

Still facing the issue : I only have it on simulators tho, physical iPhone works fine. i'm using iPhone 15 IOS 17.0 and it seems that this all started since macOS update to sonoma

• "using watcher" is logged.
• Watchman logs "receives changes" when I save a file.
• isCI: false
• refreshing never appears on IOS simulator.
• Fast refresh option not available in developer menu.

Macbook intel 2019: Sonoma 14.1.1
react-native 0.72.7
node 18

[thib-info]

Hello everyone,

I'm like @ghostgarrix concerning the version, except I'm under RN 0.73.2.
I can't connect my Metro bundler to my simulator with the last version of all packages (watchman & metro).

I'm a bit confused here. Someone have any solution here ?

[robhogan]

Hi @thib-info, are you having the same experience as @ghostgarrix that a physical device works fine, but only simulators fail to fast refresh?

If that's the case it points to a connection issue between the simulator and the dev server, rather than an issue with Metro or your Metro config.

This isn't a widespread problem as far as I've seen, and it doesn't reproduce for me.

One thing to get out of the way - make sure Fast Refresh isn't disabled on your client in the dev menu (Cmd+D).

Assuming it's enabled, check that other messages are getting through on the socket connection - if you console.log in your app, do you see the log in Metro?

[thib-info]

Hello back @robhogan, thanks for your help.

I've tested on my simulator and on my real device also. Neither of them manage to refresh as expected.
I can't see the logs output also on my metro bundler.

It's really weird because when I'm reloading the app straight from the metro menu, with the "build app on ios", it builds the app, runs it on the simulator but don't manage to stay attached to it. When I'm trying to reload the app it says that any metro application is being found ....

[Roboto-Automo]

I'm also faced with the same problem, I just set up react native on a MacBook Air M1 running Sonoma 14.2.1, I have a project that I cloned down which was working absolutely fine on my main computer running Ventura 13.6.3, but now no changes to my code aren't registering in any of my simulators, even when I shut down metro and re-start it. Forgive my coding naiveté since I have only been doing it a year, but I am not sure I understand what the seeming fix was...

[Roboto-Automo]

So I seemed to get it working with a little help from chat gpt, and looking at some error messages

It seems like you're encountering warnings related to Watchman, specifically regarding the recrawling of watches. The warnings suggest that Watchman has had to recrawl your project multiple times, and it provides a suggested resolution.

To address this issue, you can follow the provided instructions to clear the warning:

watchman watch-del '/Users/myname/Documents/MYPROJECT/myappRoot' ; watchman watch-project '/Users/myname/Documents/MYPROJECT/myappRoot'

This command is essentially telling Watchman to stop watching the specified directory (watch-del) and then re-add it as a watched project (watch-project). This process can help in resolving issues related to watchman's tracking and monitoring of changes within your project.

After running this command, try re-running your Yarn command or the task you were attempting. If the issue persists, you may want to review the Watchman documentation or seek assistance from the Watchman community for further troubleshooting.

[pedrogoiania]

Hello. Just one "solution" solves this problem for me. I started the server with sudo command and everything works fine.

On root project folder run:
sudo yarn start

[Roboto-Automo]

Hello. Just one "solution" solves this problem for me. I started the server with sudo command and everything works fine.

On root project folder run: sudo yarn start

Yeah, I did try that and as I recall that is what flagged the watchman crawl error. Do you run 'sudo yarn start' every time you want to open an emulator now, or did you just do it as a one off and it fixed the problem globally?

It seems to have fixed globally for me, but it is hard to pinpoint exactly what I did that worked.

I also used 'unset CI' which perhaps did something?

Is this a Sonoma specific problem?

[pedrogoiania]

@Roboto-Automo just in one project I need to run using sudo, other projects or a new project works fine without sudo command.

[thib-info]

I'm now under RN 0.73 and still facing the issue.
I have no idea on how to debug this error and have a stable metro bundler as before.

Does anyone have any idea on how to bypass this issue ?

[Roboto-Automo]

Mine works fine now after implementing the commands from earlier in the thread, if none of these are working for you then I am sorry, I remember it being quite a head ache though. When it worked it was just like some magic.