search

facebook / react-native

A framework for building native applications using React
https://reactnative.dev
MIT License
119.25k stars 24.34k forks source link

Missing context after upgrading to 0.73.2 #42225

Closed Pnlvfx closed 3 weeks ago

Pnlvfx commented 10 months ago

Description

After upgrading to react-native 0.73.2 a really strange thing happen to me.

I have a Context provider inside my App, at the very top level.

I'm using it into 2 screen and in my custom tab bar from @react-navigation/native-stack

The error only happens in the component inside the tab-bar If I remove that component the error goes away (so the 2 screen are still working fine)

now I get the error:

Error: useNetwork must be used with NetworkProvider

This error is located at: in NetStatus (created by BabyPlayer) in BabyPlayer in Unknown (created by SafeAreaInsetsContext) in RCTView (created by View) in View (created by GestureHandlerRootView) in GestureHandlerRootView (created by SafeAreaInsetsContext) in RCTView (created by View) in View (created by SafeAreaInsetsContext) in SafeAreaProviderCompat (created by BottomTabView) in BottomTabView (created by BottomTabNavigator) in PreventRemoveProvider (created by NavigationContent) in NavigationContent in Unknown (created by BottomTabNavigator) in BottomTabNavigator (created by TabNav) in TabNav (created by TabNavigator) in SearchProvider (created by TabNavigator) in TabNavigator (created by SceneView) in StaticContainer in EnsureSingleNavigator (created by SceneView) in SceneView (created by SceneView) in RCTView (created by View) in View (created by DebugContainer) in DebugContainer (created by MaybeNestedStack) in MaybeNestedStack (created by SceneView) in RCTView (created by View) in View (created by SceneView) in RNSScreen in Unknown (created by InnerScreen) in Suspender (created by Freeze) in Suspense (created by Freeze) in Freeze (created by DelayedFreeze) in DelayedFreeze (created by InnerScreen) in InnerScreen (created by Screen) in Screen (created by SceneView) in SceneView (created by NativeStackViewInner) in Suspender (created by Freeze) in Suspense (created by Freeze) in Freeze (created by DelayedFreeze) in DelayedFreeze (created by ScreenStack) in RNSScreenStack (created by ScreenStack) in ScreenStack (created by NativeStackViewInner) in NativeStackViewInner (created by NativeStackView) in RCTView (created by View) in View (created by SafeAreaInsetsContext) in SafeAreaProviderCompat (created by NativeStackView) in NativeStackView (created by NativeStackNavigator) in PreventRemoveProvider (created by NavigationContent) in NavigationContent in Unknown (created by NativeStackNavigator) in NativeStackNavigator (created by PlayerStackNavigator) in PlayerStackNavigator (created by SceneView) in StaticContainer in EnsureSingleNavigator (created by SceneView) in SceneView (created by SceneView) in RCTView (created by View) in View (created by DebugContainer) in DebugContainer (created by MaybeNestedStack) in MaybeNestedStack (created by SceneView) in RCTView (created by View) in View (created by SceneView) in RNSScreen in Unknown (created by InnerScreen) in Suspender (created by Freeze) in Suspense (created by Freeze) in Freeze (created by DelayedFreeze) in DelayedFreeze (created by InnerScreen) in InnerScreen (created by Screen) in Screen (created by SceneView) in SceneView (created by NativeStackViewInner) in Suspender (created by Freeze) in Suspense (created by Freeze) in Freeze (created by DelayedFreeze) in DelayedFreeze (created by ScreenStack) in RNSScreenStack (created by ScreenStack) in ScreenStack (created by NativeStackViewInner) in NativeStackViewInner (created by NativeStackView) in RNCSafeAreaProvider (created by SafeAreaProvider) in SafeAreaProvider (created by SafeAreaInsetsContext) in SafeAreaProviderCompat (created by NativeStackView) in NativeStackView (created by NativeStackNavigator) in PreventRemoveProvider (created by NavigationContent) in NavigationContent in Unknown (created by NativeStackNavigator) in NativeStackNavigator (created by MainStackNavigator) in MainStackNavigator (created by App) in EnsureSingleNavigator in BaseNavigationContainer in ThemeProvider in NavigationContainerInner (created by App) in MsgProvider (created by App) in NetworkProvider (created by App) in SessionProvider (created by App) in Provider (created by App) in App in RCTView (created by View) in View (created by AppContainer) in RCTView (created by View) in View (created by AppContainer) in AppContainer

You can clearly see, here at the bottom, that the NetworkProvider is here, I don't know if it's a bug, or a false error, or what has been broken. I'm reporting this so that someone with more experience could understand what happens.

Also I've seen that if I comment out the component, load the app, and then reactivate the component the error does not fire. Usually when a context is missing, if you reactivate the component the error still fire any time.

Steps to reproduce

It happens immediatly after opening the app

React Native Version

0.73.2

Affected Platforms

Runtime - iOS

Output of npx react-native info

System:
  OS: macOS 14.2.1
  CPU: (8) x64 Intel(R) Core(TM) i5-8257U CPU @ 1.40GHz
  Memory: 16.55 MB / 8.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 21.5.0
    path: /usr/local/bin/node
  Yarn:
    version: 1.22.19
    path: ~/.yarn/bin/yarn
  npm:
    version: 10.2.4
    path: /usr/local/bin/npm
  Watchman:
    version: 2023.12.04.00
    path: /usr/local/bin/watchman
Managers:
  CocoaPods:
    version: 1.14.3
    path: /usr/local/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.2
      - iOS 17.2
      - macOS 14.2
      - tvOS 17.2
      - watchOS 10.2
  Android SDK: Not Found
IDEs:
  Android Studio: Not Found
  Xcode:
    version: 15.1/15C65
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 11.0.21
    path: /usr/bin/javac
  Ruby:
    version: 2.7.6
    path: /Users/simo97/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.73.2
    wanted: ^0.73.2
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

Stacktrace or Logs

Error: useNetwork must be used with NetworkProvider

This error is located at:
    in NetStatus (created by BabyPlayer)
    in BabyPlayer
    in Unknown (created by SafeAreaInsetsContext)
    in RCTView (created by View)
    in View (created by GestureHandlerRootView)
    in GestureHandlerRootView (created by SafeAreaInsetsContext)
    in RCTView (created by View)
    in View (created by SafeAreaInsetsContext)
    in SafeAreaProviderCompat (created by BottomTabView)
    in BottomTabView (created by BottomTabNavigator)
    in PreventRemoveProvider (created by NavigationContent)
    in NavigationContent
    in Unknown (created by BottomTabNavigator)
    in BottomTabNavigator (created by TabNav)
    in TabNav (created by TabNavigator)
    in SearchProvider (created by TabNavigator)
    in TabNavigator (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by SceneView)
    in RCTView (created by View)
    in View (created by DebugContainer)
    in DebugContainer (created by MaybeNestedStack)
    in MaybeNestedStack (created by SceneView)
    in RCTView (created by View)
    in View (created by SceneView)
    in RNSScreen
    in Unknown (created by InnerScreen)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by InnerScreen)
    in InnerScreen (created by Screen)
    in Screen (created by SceneView)
    in SceneView (created by NativeStackViewInner)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by ScreenStack)
    in RNSScreenStack (created by ScreenStack)
    in ScreenStack (created by NativeStackViewInner)
    in NativeStackViewInner (created by NativeStackView)
    in RCTView (created by View)
    in View (created by SafeAreaInsetsContext)
    in SafeAreaProviderCompat (created by NativeStackView)
    in NativeStackView (created by NativeStackNavigator)
    in PreventRemoveProvider (created by NavigationContent)
    in NavigationContent
    in Unknown (created by NativeStackNavigator)
    in NativeStackNavigator (created by PlayerStackNavigator)
    in PlayerStackNavigator (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by SceneView)
    in RCTView (created by View)
    in View (created by DebugContainer)
    in DebugContainer (created by MaybeNestedStack)
    in MaybeNestedStack (created by SceneView)
    in RCTView (created by View)
    in View (created by SceneView)
    in RNSScreen
    in Unknown (created by InnerScreen)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by InnerScreen)
    in InnerScreen (created by Screen)
    in Screen (created by SceneView)
    in SceneView (created by NativeStackViewInner)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by ScreenStack)
    in RNSScreenStack (created by ScreenStack)
    in ScreenStack (created by NativeStackViewInner)
    in NativeStackViewInner (created by NativeStackView)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by SafeAreaInsetsContext)
    in SafeAreaProviderCompat (created by NativeStackView)
    in NativeStackView (created by NativeStackNavigator)
    in PreventRemoveProvider (created by NavigationContent)
    in NavigationContent
    in Unknown (created by NativeStackNavigator)
    in NativeStackNavigator (created by MainStackNavigator)
    in MainStackNavigator (created by App)
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by App)
    in MsgProvider (created by App)
    in NetworkProvider (created by App)
    in SessionProvider (created by App)
    in Provider (created by App)
    in App
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer

Reproducer

no-reproducer

Screenshots and Videos

https://github.com/facebook/react-native/assets/93389293/cd8916d9-3f30-4872-af50-43577a14150b

github-actions[bot] commented 10 months ago
:warning: Missing Reproducible Example
:information_source: We could not detect a reproducible example in your issue report. Please provide either:
  • If your bug is UI related: a Snack
  • If your bug is build/update related: use our Reproducer Template. A reproducer needs to be in a GitHub repository under your username.
cortinico commented 10 months ago

After updating to react-native 0.72.3 a really strange thing happen to me.

From which version are you upgrading from?

Also can you create a reproducer?

Pnlvfx commented 10 months ago

@cortinico I'm upgrading from 0.73.1 to 0.73.2, sorry there was a typo in the versions before. I don't know if I can do the repro, I will try to do it tonight.

cortinico commented 10 months ago

I don't know if I can do the repro, I will try to do it tonight.

Please do as I don't see how 0.73.1 -> 0.73.2 could create this regression

Pnlvfx commented 10 months ago

@cortinico I've seen all the commits and I was thinking the same thing. I will definetely try do make a repro tonight

efstathiosntonas commented 10 months ago

@cortinico copying this from reddit where I tagged you in a comment:

u/cortinico metro freezes the app in "refreshing state" AND the cli after package installs (even ctrl+c won’t work), it throws similar error like the op’s, react found a string while expecting xxx for no reason, and ~one error that I can’t remember exactly but it’s something like required files/import not found~ errors like this popping out of nowhere: TypeError: 0, _$$_REQUIRE(_dependencyMap[26(...), "react-native-size-matters").s is not a function (it is undefined).

Only solution for the above is to nuke metro and restart, I always have my run command to clear cache and watchman del all.

one weird this is that iOS bundle goes to 100% immediately from a cold npm start while on android it displays the bundle loading just fine. (I’m talking about the green loading indicator on metro).

this could be definitely be happening because of metro f things up, something IS there and the metro doesn’t pick it up, I also use 0.73.2

https://github.com/facebook/react-native/assets/717975/927c3857-5656-47e7-a0bd-f8ccb744c283

cortinico commented 10 months ago

@efstathiosntonas that's most likely a separate issue. Please open an issue against facebook/metro then

Pnlvfx commented 10 months ago

I'm sorry if I did't provide the repro, but I'm full of work these days, I will do it when I can, do not close the issue for now because in my app it's still happening, even after I have deleted all the cache and rebuilt, and in both real phone and simulator. I've removed the component inside the tabBar for now.

Pnlvfx commented 10 months ago

Updates: It happens also with different import while reloading during development. From when I'm in 0.73.2 it happens consistently: TypeError: 0, _$$_REQUIRE(_dependencyMap[13(...)/../redux/store").useAppDispatch is not a function (it is undefined)

So I have to stop metro, and restart with reset cache. The context still missing. Sorry but I have not made the repro for now

Pnlvfx commented 10 months ago

@cortinico

image

image

Error like this happens almost every change I made, so I have to restart metro to let reload the app. Idk

bytemtek commented 7 months ago

@cortinico copying this from reddit where I tagged you in a comment:

u/cortinico metro freezes the app in "refreshing state" AND the cli after package installs (even ctrl+c won’t work), it throws similar error like the op’s, react found a string while expecting xxx for no reason, and ~one error that I can’t remember exactly but it’s something like required files/import not found~ errors like this popping out of nowhere: TypeError: 0, _$$_REQUIRE(_dependencyMap[26(...), "react-native-size-matters").s is not a function (it is undefined).

Only solution for the above is to nuke metro and restart, I always have my run command to clear cache and watchman del all.

one weird this is that iOS bundle goes to 100% immediately from a cold npm start while on android it displays the bundle loading just fine. (I’m talking about the green loading indicator on metro).

this could be definitely be happening because of metro f things up, something IS there and the metro doesn’t pick it up, I also use 0.73.2

Screen.Recording.2024-01-12.at.08.45.08.mov

Can you solve this problem ? I also have same problem.

bytemtek commented 7 months ago

Updates: It happens also with different import while reloading during development. From when I'm in 0.73.2 it happens consistently: TypeError: 0, _$$_REQUIRE(_dependencyMap[13(...)/../redux/store").useAppDispatch is not a function (it is undefined)

So I have to stop metro, and restart with reset cache. The context still missing. Sorry but I have not made the repro for now

Did you solve this problem ? I also have same problem.

efstathiosntonas commented 7 months ago

haven't found a solution, it drived me mad at first but now I'm used to it 🤯

everytime I install a package I have to kill metro for it to work again. If I let it hanging for about a minute it starts working again.

I'm using the latest watchman available, latest metro and latest babel plugins available as of today (13 April 24).

In the past I had the same issue because of babel messing things up but it was solved after a month of struggle (by babel).

One other thing that I suspect messing things up is the Proxyman app that I use to debug network traffic, this app installs a certificate for the proxy to work and start capturing traffic. I have the same suspicion about NordVPN app.

bytemtek commented 7 months ago

haven't found a solution, it drived me mad at first but now I'm used to it 🤯

everytime I install a package I have to kill metro for it to work again. If I let it hanging for about a minute it starts working again.

I'm using the latest watchman available, latest metro and latest babel plugins available as of today (13 April 24).

In the past I had the same issue because of babel messing things up but it was solved after a month of struggle (by babel).

One other thing that I suspect messing things up is the Proxyman app that I use to debug network traffic, this app installs a certificate for the proxy to work and start capturing traffic. I have the same suspicion about NordVPN app.

Reset metro not work for me, I almost get crazy. I think it's about RN 0.73

Screenshot_1713030561

efstathiosntonas commented 7 months ago

do you by any chance use react-native-svg-transformer with expo-modules-core? If yes, latest release of the transformer uses the expo babel transformer instead of react-native's one and it messes things up.

bytemtek commented 7 months ago

do you by any chance use react-native-svg with expo-modules-core? If yes, latest release of rn-svg uses the expo metro cofnig instead of react-native's one and it messes things up.

I don't use Expo at all.

efstathiosntonas commented 7 months ago

I meant react-native-svg-transformer, not svg, sorry.

I solved the error in the screenshot above by removing all expo imports and keep only the react-native ones.

If I were you I would search in the node_modules folder for references to expo babel transformer and replace with react-native by using patch-package

these lines are problematic: https://github.com/kristerkari/react-native-svg-transformer/issues/333

bytemtek commented 7 months ago

I don't use react-native-svg-transformer.

Now I write new function and import my code but I get error. I added all functions from new file to old functions files it's work :))

I guess I have problem with metro.

efstathiosntonas commented 7 months ago

there might be other modules in your node_modules that use the same strategy to import expo babel transformer that's why I said earlier to scan the entire node_modules folder for references.

efstathiosntonas commented 6 months ago

It seems watchman (at least version 2024.04.15.00) cannot handle too many files so after adding this in .watchmanconfig in the root of the project fixed the hanging metro for me:

{
  "ignore_dirs": [".git", "ios", "android"]
}

If you want to track what watchman is watching then enter this on terminal: watchman-wait <PATH_TO_PROJECT_ROOT> --max-events 0

My project has ~250 deps and thousands of commits in .git folder so I think watchman is clogged somehow due to millions of files open.

Finally life is back to normal now 😅

react-native-bot commented 4 weeks ago

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

react-native-bot commented 3 weeks ago

This issue was closed because it has been stalled for 7 days with no activity.