Closed nathell closed 4 weeks ago
Out of curiosity, I checked React 16.13.1. Same behaviour in RN.
I’ve also checked that, in browser, React 17.0.2 (but not 16.13.1) gobbles up the error as well when using a production build:
React 16.13.1 | React 17.0.2 | |
---|---|---|
Development | ✅ Throws error | ✅ Throws error |
Production | ✅ Throws error | ❌ Captures error |
Experimental code (save as index.html
and open in browser; replace production.min.js
with development.js
and 17
with 16.13
as needed):
<div id="root"></div>
<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
<script>
const h = React.createElement;
const Hello = () => {
React.useEffect(() => {
console.log('mount');
return () => {
console.log('cleanup');
throw new Error('KABOOM!');
console.log('cleanup2');
}
}, []);
return 'Hello!';
}
const App = () => {
const [shown, show] = React.useState(true);
return h('div', null, [
shown ? h(Hello, {}, null) : null,
h('button', {onClick: () => show(!shown)}, 'Toggle')
]);
}
ReactDOM.render(
h(App, {}, null),
document.getElementById("root")
);
</script>
Possibly related: https://github.com/facebook/react/issues/22650
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.
Any updates?
Any update regarding fix ?
any solution for this
Full error
Warning: Internal React error: Attempted to capture a commit phase error inside a detached tree. This indicates a bug in React. Likely causes include deleting the same fiber more than once, committing an already-finished tree, or an inconsistent return pointer.
Error message:
TypeError: undefined is not a function
in BottomTabBar (created by BottomTabView)
in SafeAreaProviderCompat (created by BottomTabView)
in BottomTabView (created by BottomTabNavigator)
in BottomTabNavigator (created by BottomTabs)
in BottomTabs (created by SceneView)
in StaticContainer
in EnsureSingleNavigator (created by SceneView)
in SceneView (created by RouteView)
in RCTView (created by View)
in View (created by DebugContainer)
in DebugContainer (created by MaybeNestedStack)
in MaybeNestedStack (created by RouteView)
in RNSScreen (created by AnimatedComponent)
in AnimatedComponent
in AnimatedComponentWrapper (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 RouteView)
in RouteView (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 NativeStackNavigator (created by InsideStack)
in InsideStack (created by SceneView)
in StaticContainer
in EnsureSingleNavigator (created by SceneView)
in SceneView (created by CardContainer)
in RCTView (created by View)
in View (created by CardContainer)
in RCTView (created by View)
in View (created by CardContainer)
in RCTView (created by View)
in View
in CardSheet (created by Card)
in RCTView (created by View)
in View (created by AnimatedComponent)
in AnimatedComponent
in AnimatedComponentWrapper (created by PanGestureHandler)
in PanGestureHandler (created by PanGestureHandler)
in PanGestureHandler (created by Card)
in RCTView (created by View)
in View (created by AnimatedComponent)
in AnimatedComponent
in AnimatedComponentWrapper (created by Card)
in RCTView (created by View)
in View (created by Card)
in Card (created by CardContainer)
in CardContainer (created by CardStack)
in RNSScreen (created by AnimatedComponent)
in AnimatedComponent
in AnimatedComponentWrapper (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 MaybeScreen)
in MaybeScreen (created by CardStack)
ERROR Warning: Internal React error: Attempted to capture a commit phase error inside a detached tree. This indicates a bug in React. Likely causes include deleting the same fiber more than once, committing an already-finished tree, or an inconsistent return pointer.
Full error
Warning: Internal React error: Attempted to capture a commit phase error inside a detached tree. This indicates a bug in React. Likely causes include deleting the same fiber more than once, committing an already-finished tree, or an inconsistent return pointer. Error message: TypeError: undefined is not a function in BottomTabBar (created by BottomTabView) in SafeAreaProviderCompat (created by BottomTabView) in BottomTabView (created by BottomTabNavigator) in BottomTabNavigator (created by BottomTabs) in BottomTabs (created by SceneView) in StaticContainer in EnsureSingleNavigator (created by SceneView) in SceneView (created by RouteView) in RCTView (created by View) in View (created by DebugContainer) in DebugContainer (created by MaybeNestedStack) in MaybeNestedStack (created by RouteView) in RNSScreen (created by AnimatedComponent) in AnimatedComponent in AnimatedComponentWrapper (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 RouteView) in RouteView (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 NativeStackNavigator (created by InsideStack) in InsideStack (created by SceneView) in StaticContainer in EnsureSingleNavigator (created by SceneView) in SceneView (created by CardContainer) in RCTView (created by View) in View (created by CardContainer) in RCTView (created by View) in View (created by CardContainer) in RCTView (created by View) in View in CardSheet (created by Card) in RCTView (created by View) in View (created by AnimatedComponent) in AnimatedComponent in AnimatedComponentWrapper (created by PanGestureHandler) in PanGestureHandler (created by PanGestureHandler) in PanGestureHandler (created by Card) in RCTView (created by View) in View (created by AnimatedComponent) in AnimatedComponent in AnimatedComponentWrapper (created by Card) in RCTView (created by View) in View (created by Card) in Card (created by CardContainer) in CardContainer (created by CardStack) in RNSScreen (created by AnimatedComponent) in AnimatedComponent in AnimatedComponentWrapper (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 MaybeScreen) in MaybeScreen (created by CardStack) ERROR Warning: Internal React error: Attempted to capture a commit phase error inside a detached tree. This indicates a bug in React. Likely causes include deleting the same fiber more than once, committing an already-finished tree, or an inconsistent return pointer.
this us an issue with native base
Full error
Warning: Internal React error: Attempted to capture a commit phase error inside a detached tree. This indicates a bug in React. Likely causes include deleting the same fiber more than once, committing an already-finished tree, or an inconsistent return pointer. Error message: TypeError: undefined is not a function in BottomTabBar (created by BottomTabView) in SafeAreaProviderCompat (created by BottomTabView) in BottomTabView (created by BottomTabNavigator) in BottomTabNavigator (created by BottomTabs) in BottomTabs (created by SceneView) in StaticContainer in EnsureSingleNavigator (created by SceneView) in SceneView (created by RouteView) in RCTView (created by View) in View (created by DebugContainer) in DebugContainer (created by MaybeNestedStack) in MaybeNestedStack (created by RouteView) in RNSScreen (created by AnimatedComponent) in AnimatedComponent in AnimatedComponentWrapper (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 RouteView) in RouteView (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 NativeStackNavigator (created by InsideStack) in InsideStack (created by SceneView) in StaticContainer in EnsureSingleNavigator (created by SceneView) in SceneView (created by CardContainer) in RCTView (created by View) in View (created by CardContainer) in RCTView (created by View) in View (created by CardContainer) in RCTView (created by View) in View in CardSheet (created by Card) in RCTView (created by View) in View (created by AnimatedComponent) in AnimatedComponent in AnimatedComponentWrapper (created by PanGestureHandler) in PanGestureHandler (created by PanGestureHandler) in PanGestureHandler (created by Card) in RCTView (created by View) in View (created by AnimatedComponent) in AnimatedComponent in AnimatedComponentWrapper (created by Card) in RCTView (created by View) in View (created by Card) in Card (created by CardContainer) in CardContainer (created by CardStack) in RNSScreen (created by AnimatedComponent) in AnimatedComponent in AnimatedComponentWrapper (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 MaybeScreen) in MaybeScreen (created by CardStack) ERROR Warning: Internal React error: Attempted to capture a commit phase error inside a detached tree. This indicates a bug in React. Likely causes include deleting the same fiber more than once, committing an already-finished tree, or an inconsistent return pointer.
@satya164 Do you have any solution regarding this ?
@Kailash-MAF trying to find out this issue. but didnt find out
I got roughly the same issue here, with react base
Error Stack :
Warning: Internal React error: Attempted to capture a commit phase error inside a detached tree. This indicates a bug in React. Likely causes include deleting the same fiber more than once, committing an already-finished tree, or an inconsistent return pointer.
Error message:
TypeError: undefined is not a function
in HybridProvider (created by NativeBaseProvider)
in ResponsiveQueryProvider (created by NativeBaseProvider)
in RNCSafeAreaProvider (created by SafeAreaProvider)
in SafeAreaProvider (created by NativeBaseProvider)
in NativeBaseConfigProviderProvider (created by NativeBaseProvider)
in NativeBaseProvider (created by App)
in Provider (created by App)
in App
I got the same error!
Warning: Internal React error: Attempted to capture a commit phase error inside a detached tree. This indicates a bug in React. Likely causes include deleting the same fiber more than once, committing an already-finished tree, or an inconsistent return pointer.
Error message:
TypeError: undefined is not a function in HybridProvider (created by NativeBaseProvider) in ResponsiveQueryProvider (created by NativeBaseProvider) in RNCSafeAreaProvider (created by SafeAreaProvider) in SafeAreaProvider (created by NativeBaseProvider) in NativeBaseConfigProviderProvider (created by NativeBaseProvider) in NativeBaseProvider (created by Register) in Register (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 RNSScreen (created by AnimatedComponent) in AnimatedComponent in AnimatedComponentWrapper (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)
solved it ?
same issue facing here
I also have this issue...
yap me too , have this issue , anyone can solve it ?
Check if any async is used inside useEffect hook and remove it. Worked for me
The return in a useEffect
should be a function: https://reactjs.org/docs/hooks-effect.html#:~:text=Effects%20with%20Cleanup. If you're getting an error, check what you're returning in the useEffect
Same problems. Device Infor:
Window 11
Android 12
I am experiencing the same problem. The error gets thrown when I fast refresh but not when I enter the page
I am experiencing the same problem. The error gets thrown when I fast refresh but not when I enter the page
I removed async and await from a useEffect
Full error
Warning: Internal React error: Attempted to capture a commit phase error inside a detached tree. This indicates a bug in React. Likely causes include deleting the same fiber more than once, committing an already-finished tree, or an inconsistent return pointer. Error message: TypeError: undefined is not a function in BottomTabBar (created by BottomTabView) in SafeAreaProviderCompat (created by BottomTabView) in BottomTabView (created by BottomTabNavigator) in BottomTabNavigator (created by BottomTabs) in BottomTabs (created by SceneView) in StaticContainer in EnsureSingleNavigator (created by SceneView) in SceneView (created by RouteView) in RCTView (created by View) in View (created by DebugContainer) in DebugContainer (created by MaybeNestedStack) in MaybeNestedStack (created by RouteView) in RNSScreen (created by AnimatedComponent) in AnimatedComponent in AnimatedComponentWrapper (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 RouteView) in RouteView (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 NativeStackNavigator (created by InsideStack) in InsideStack (created by SceneView) in StaticContainer in EnsureSingleNavigator (created by SceneView) in SceneView (created by CardContainer) in RCTView (created by View) in View (created by CardContainer) in RCTView (created by View) in View (created by CardContainer) in RCTView (created by View) in View in CardSheet (created by Card) in RCTView (created by View) in View (created by AnimatedComponent) in AnimatedComponent in AnimatedComponentWrapper (created by PanGestureHandler) in PanGestureHandler (created by PanGestureHandler) in PanGestureHandler (created by Card) in RCTView (created by View) in View (created by AnimatedComponent) in AnimatedComponent in AnimatedComponentWrapper (created by Card) in RCTView (created by View) in View (created by Card) in Card (created by CardContainer) in CardContainer (created by CardStack) in RNSScreen (created by AnimatedComponent) in AnimatedComponent in AnimatedComponentWrapper (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 MaybeScreen) in MaybeScreen (created by CardStack) ERROR Warning: Internal React error: Attempted to capture a commit phase error inside a detached tree. This indicates a bug in React. Likely causes include deleting the same fiber more than once, committing an already-finished tree, or an inconsistent return pointer.
any update?? I get the same error when I updated my RN to .0.71.1
@Degan90 and for anyone else in the future, it's not an RN problem as far as I can tell. The problem is something to do with your code in the useEffect. Previous solutions from comments above:
Your problem might be different from the ones listed above but you'll have to debug the code yourself to figure out the exact problem. I would start by reading the RN doc or searching up the error to find other mistakes when using useEffect
that might be similar to yours
I've fixed that by changing my listeners, with the new React Native version we need to change them.
any updates?
any solution???????
@jarapamikaella @trehman82 and any future commenters. Please read the comments already left in this issue: https://github.com/facebook/react-native/issues/32673?notification_referrer_id=NT_kwDOAsIbh7MyNzUwOTI2MDc0OjQ2Mjc1NDYz#issuecomment-1406970645.
There are no solutions/updates posted because as far as I can tell this is a problem the way you are using useEffect
so you need to debug your own code.
@jarapamikaella @trehman82 and any future commenters. Please read the comments already left in this issue: #32673.
There are no solutions/updates posted because as far as I can tell this is a problem the way you are using
useEffect
so you need to debug your own code.
Thanks for reply. Actually I am not using useEffect in my project. All the components are class based. I don't know whats the matter. Regards!
@zahid502 I've already stated my answer numerous times in the thread above. No one can help you since it is likely a problem with your code. Do not ping specific commenters unless you are specifically replying to them.
We just upgraded React Native from 0.69.7 to 0.71.3 and we started getting this in tons of Testing Library tests. Started by removing all the useEffects in a component to test a simple render test, and was still getting the error. So I stripped the component of anything besides a View inside a SafeAreaView and still getting the error in the test.
So now the Tree is simply this:
const testingLibraryAPI = render(
<NavigationContainer>
<Navigator>
<NavigatorScreen
name={'TESTScreen'}
component={Splash}
/>
</Navigator>
</NavigationContainer>
);
Theres no error in the tests if I render the Component without the Navigator stack, so seems to be related to @react-navigation
The return in a
useEffect
should be a function: https://reactjs.org/docs/hooks-effect.html#:~:text=Effects%20with%20Cleanup. If you're getting an error, check what you're returning in theuseEffect
Thank you so much! migrating from RN 0.64 -> 0.71 and a lot of different things discovered.
@UnderTheMoonspell I'm also getting this error without anything weird happening in my useEffect
calls, and it's happening when I navigate to a route in @react-navigation. So I think you're on to something...
I thought the solution is that you guys, when calling event Listener .. i.e-->> useEffect (e => { e.addEventListener} //you should do this.. const any_name = e => { e.addEventListener}
// and for clearing the event you should this! return ()=> { any_name.remove(); },[] )
The anothet possibilty is that when using addListener in ReactNative. i.e navigation.addListener() must need a route that you as a 2nd argument when you don't pass and destructure any route then that will be cause for undefined!
I've fixed that by changing my listeners, with the new React Native version we need to change them.
I had already updated the listeners to: ⚠️⚠️⚠️⚠️⚠️⚠️
Keyboard.addListener('keyboardDidShow', keyboardDidShow);
Keyboard.addListener('keyboardDidHide', keyboardDidHide);
// cleanup function
return() => {
Keyboard.removeAllListeners('keyboardDidShow');
Keyboard.removeAllListeners('keyboardDidHide');
};
But following @colaquecez suggestion worked great, problem solved. 🚀😁🎉😉👏🎊
const unKeyboardDidShow = Keyboard.addListener('keyboardDidShow', keyboardDidShow);
const unKeyboardDidHide = Keyboard.addListener('keyboardDidHide', keyboardDidHide);
// cleanup function
return() => {
unKeyboardDidShow.remove();
unKeyboardDidHide.remove();
};
Thanks!
Upgrading from react-navigation 5 to react-navigation 6 solved the problem for me.
@colaquecez suggestion worked for me as well.
const updateDeviceDim = Dimensions.addEventListener("change", updateWidth);
return ()=>{
updateDeviceDim.remove();
}
// Dimensions.addEventListener("change", updateWidth);
// return () => {
// Dimensions.removeEventListener("change", updateWidth);
// };
Thank you :)
for those having an issue with react-navigation, I had the same issue after upgrading to RN 0.71.8, my app is using react-navigation and I implemented deep linking following their documentation for v5 here: https://reactnavigation.org/docs/5.x/deep-linking
The doc provide an example with this piece of code:
return () => {
// Clean up the event listeners
Linking.removeEventListener('url', onReceiveURL); <=== HERE
branch.unsubscribe();
};
wich was causing the issue on my app. Note that the latest version of the doc: https://reactnavigation.org/docs/deep-linking/ provide an updated example
return () => {
// Clean up the event listeners
unsubscribeFirebase();
linkingSubscription.remove(); <=== HERE
};
Hope this can help
I've fixed that by changing my listeners, with the new React Native version we need to change them.
You saved me, Thanks!
<ApiProvider api={userApi} setupListeners={false}>{children}</ApiProvider>
for react native v0.72.3
I fixed by adding setupListeners={false}
it worked for me.
I've fixed that by changing my listeners, with the new React Native version we need to change them.
This fixed it for me. Good looking out. Thanks.
I have encountered the same error; furthermore, I've had an additional error:
TypeError: undefined is not a function
, providing location of the error: ../node_modules/react-native-modal/dist/modal.js
.
The invalid code was:
Instead of (correct code):
Turns out there is no such property as 'removeListeners
' on type 'DeviceEventEmitterStatic
'. Instead, the correct, existing property was removeAllListeners
. However, note that editing code of the outsource library in node_modules is usually not a good idea.
I know it might seem as a stupid error, let me tell you, it is really stupid. But since I wasn't working on the project from the start, and also I was upgrading from RN version 0.66.5 to 0.72.3, I think it's acceptable. I just hope this will help someone to find a clue for the solution of their problem.
Hello,
You need:
useEffect(() => {
const func = async() => {
}
func();
// IMPORTANT
return () => {};
}, []);
so you need to return a cleanup function in any case even if you don't need it
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.
This issue was closed because it has been stalled for 7 days with no activity.
Description
When an app includes a functional component which calls
React.useEffect
with a cleanup callback, and that callback throws an error when called, the following is produced in the console:The error is not detectable otherwise: the error boundary component does not catch it, nor does installing a global handler with
ErrorUtils.setGlobalHandler()
.This is on React Native 0.66.3 and React 17.0.2. I’ve also checked React 17.0.1 (no difference in behaviour), and RN 0.65.0 (the one that we currently use in production) which also gobbles up the error, but silently, without producing any message in the console.
The app seemingly continues to work after the error occurs.
I don’t think this is an actual React bug (as opposed to React Native), because on web, the error appears in the browser console, as expected.
I checked only the debug build behaviour, not the release one. It may be the case that in release builds the error sometimes does bubble up to the global error handler (if set), because we’re seeing prod exceptions that are likely to be related to this issue. For the record, what causes this for us is this issue in react-navigation, exacerbated by the fact that they had moved removing listeners to a
useEffects
cleanup function.Version
0.66.3
Output of
react-native info
Steps to reproduce
Create a RN app with
react-native init myapp
.Edit
App.js
to read:Touch me
twice.Expected result (in the
react-native start
output):Actual result:
Snack, code example, screenshot, or link to a repository
No response