"Could not reload the application after an edit." after upgrading the SDK45

Summary

After upgrading to SDK 45 I cannot use fast refresh anymore. Anytime I save changes I see the following warning.

Could not reload the application after an edit.
at node_modules/@sentry/utils/dist/instrument.js:111:20 in <anonymous>
at node_modules/metro-runtime/src/polyfills/require.js:804:8 in performFullRefresh
at node_modules/metro-runtime/src/polyfills/require.js:530:28 in topologicalSort$argument_1
at node_modules/metro-runtime/src/polyfills/require.js:667:37 in traverseDependentNodes
at node_modules/metro-runtime/src/polyfills/require.js:678:30 in dependentNodes.forEach$argument_0
at node_modules/metro-runtime/src/polyfills/require.js:673:6 in traverseDependentNodes
at node_modules/metro-runtime/src/polyfills/require.js:678:30 in dependentNodes.forEach$argument_0
at node_modules/metro-runtime/src/polyfills/require.js:673:6 in traverseDependentNodes
at node_modules/metro-runtime/src/polyfills/require.js:678:30 in dependentNodes.forEach$argument_0
at node_modules/metro-runtime/src/polyfills/require.js:673:6 in traverseDependentNodes
at node_modules/metro-runtime/src/polyfills/require.js:685:30 in roots.forEach$argument_0
at node_modules/metro-runtime/src/polyfills/require.js:683:4 in topologicalSort
at node_modules/metro-runtime/src/polyfills/require.js:486:44 in metroHotUpdateModule
at node_modules/metro-runtime/src/polyfills/require.js:53:8 in define
at http://192.168.1.4:8081/src/screens/GalleryView.bundle?platform=ios&hot=false&strict=false&dev=true&minify=false&modulesOnly=true&runModule=false&shallow=true:1:3 in global
at node_modules/react-native/node_modules/metro-runtime/src/modules/HMRClient.js:18:4 in inject
at node_modules/react-native/node_modules/metro-runtime/src/modules/HMRClient.js:27:2 in injectUpdate
- ... 11 more stack frames from framework internals

Managed or bare workflow? If you have ios/ or android/ directories in your project, the answer is bare!

managed

What platform(s) does this occur on?

iOS

SDK Version (managed workflow only)

45

Environment

   System:
      OS: macOS 12.2.1
      Shell: 5.8 - /bin/zsh
    Binaries:
      Node: 16.13.0 - /usr/local/bin/node
      Yarn: 1.22.18 - /usr/local/bin/yarn
      npm: 8.1.0 - /usr/local/bin/npm
      Watchman: 2022.02.21.00 - /usr/local/bin/watchman
    Managers:
      CocoaPods: 1.10.1 - /usr/local/bin/pod
    SDKs:
      iOS SDK:
        Platforms: DriverKit 21.4, iOS 15.4, macOS 12.3, tvOS 15.4, watchOS 8.5
    IDEs:
      Android Studio: 2020.3 AI-203.7717.56.2031.7784292
      Xcode: 13.3.1/13E500a - /usr/bin/xcodebuild
    npmPackages:
      expo: ~45.0.0 => 45.0.3 
      react: 17.0.2 => 17.0.2 
      react-dom: 17.0.2 => 17.0.2 
      react-native: 0.68.2 => 0.68.2 
      react-native-web: 0.17.7 => 0.17.7 
    npmGlobalPackages:
      eas-cli: 0.52.0
      expo-cli: 5.4.3
    Expo Workflow: managed

Reproducible demo

https://github.com/haibert/SplashScreenIssueRepo

[natsumican63]

This solution worked for me:

”resolutions": { "metro": "0.70.1" } to package.json and running yarn install again fixed the error.

[paulvelk]

@jakrim @MatheusBlanco

After some “head-crunching” I finally solved the issue. It seems it was related to the metro package version. Expo upgrade to SDK45 apparently does not include checking if metro is outdated (why should it ?). Once updated, I got my Fast Refresh working again !

So I suggest to check the metro version you are using (see package.json or run: npm list).

In my case it was still at version 0.59.0 (more than 2 years old ! 😦 while latest version is at 0.71 ! To update run: npm install --save-dev metro metro-core

I hope thismay also solve the issue for others.

Ps. @flashjames : Just wondering why I did not see any refeference to metro package in your package.json file ?