Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

null is not an object (evaluating 'this._component.getScrollableNode') #10635

Closed
jerson opened this issue Oct 31, 2016 · 61 comments
Closed

null is not an object (evaluating 'this._component.getScrollableNode') #10635

jerson opened this issue Oct 31, 2016 · 61 comments
Labels
Resolution: Fixed A PR that fixes this issue has been merged. Resolution: Locked This issue was locked by the bot.

Comments

@jerson
Copy link

jerson commented Oct 31, 2016

Description

http://crashes.to/s/280c411449d

Fatal Exception: com.facebook.react.common.JavascriptException: null is not an object (evaluating 'this._component.getScrollableNode'), stack:
value@297:1662
value@297:1031
unmountComponent@144:3508
unmountComponent@134:444
unmountComponent@144:3555
unmountComponent@134:444
unmountChildren@142:830
unmountChildren@139:2252
unmountComponent@119:361
unmountComponent@134:444
unmountComponent@144:3555
unmountComponent@134:444
unmountChildren@142:830
unmountChildren@139:2252
unmountComponent@119:361
unmountComponent@134:444
unmountChildren@142:830
unmountChildren@139:2252
unmountComponent@119:361
unmountComponent@134:444
unmountChildren@142:830
unmountChildren@139:2252
unmountComponent@119:361
unmountComponent@134:444
unmountComponent@144:3555
unmountComponent@134:444
unmountComponent@144:3555
unmountComponent@134:444
unmountComponent@144:3555
unmountComponent@134:444
unmountComponent@144:3555
unmountComponent@134:444
unmountComponent@144:3555
unmountComponent@134:444
unmountChildren@142:830
unmountChildren@139:2252
unmountComponent@119:361
unmountComponent@134:444
unmountChildren@142:830
unmountChildren@139:2252
unmountComponent@119:361
unmountComponent@134:444
unmountComponent@144:3555
unmountComponent@134:444
unmountComponent@144:3555
unmountComponent@134:444
unmountComponentFromNode@234:1542
unmountComponentAtNode@234:1438
unmountComponentAtNodeAndRemoveContainer@234:1196
unmountApplicationComponentAtRootTag@328:1109
value@58:2827
<unknown>@58:1062
d@58:130
value@58:1034

       at com.facebook.react.modules.core.ExceptionsManagerModule.showOrThrowError(ExceptionsManagerModule.java:97)
       at com.facebook.react.modules.core.ExceptionsManagerModule.reportFatalException(ExceptionsManagerModule.java:81)
       at java.lang.reflect.Method.invokeNative(Method.java)
       at java.lang.reflect.Method.invoke(Method.java:525)
       at com.facebook.react.bridge.BaseJavaModule$JavaMethod.invoke(BaseJavaModule.java:318)
       at com.facebook.react.cxxbridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:158)
       at com.facebook.react.bridge.queue.NativeRunnable.run(NativeRunnable.java)
       at android.os.Handler.handleCallback(Handler.java:730)
       at android.os.Handler.dispatchMessage(Handler.java:92)
       at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:31)
       at android.os.Looper.loop(Looper.java:137)
       at com.facebook.react.bridge.queue.MessageQueueThreadImpl$3.run(MessageQueueThreadImpl.java:196)
       at java.lang.Thread.run(Thread.java:841)

Additional Information

  • React Native version: RN 0.36
  • Platform: Android
  • Operating System: MacOS
@brentvatne
Copy link
Collaborator

@janicduplessis - based on the comment that @jerson included above this is related to Animated, any idea of the cause?

@npomfret
Copy link
Contributor

npomfret commented Nov 3, 2016

I'm getting a similar error

undefined is not an object (evaluating 'this._component.getScrollableNode')

That line doesn't appear in my code base, it must be in react-native 0.36.

@janicduplessis
Copy link
Contributor

This was added as part of native animated events PR

@janicduplessis
Copy link
Contributor

I don't know how exactly refs work well enough so I'm not sure why it is null. This code gets called in both componentDidMount and componentWillUnmount. There are some null checks before accessing it in other code of the component so I guess it can be a reasonable fix to just add one there.

@npomfret
Copy link
Contributor

npomfret commented Nov 3, 2016

I can see this (in 2 places)

      const ref = this._component.getScrollableNode ?
        this._component.getScrollableNode() :
        this._component;

So I guess this error means that _component is undefined, rather than the getScrollableNode being missing?

@janicduplessis
Copy link
Contributor

yep _component being null is the issue here

@ide
Copy link
Contributor

ide commented Nov 3, 2016

@janicduplessis my hypothesis is that children get unmounted before the parent. What we should be doing then is in _setComponentRef, check if the ref is null (this means that the referenced child is being unmounted) and clean up anything related to it. Does that make sense?

@npomfret
Copy link
Contributor

npomfret commented Nov 4, 2016

Is there a work around in the mean time? Or is it likely to be caused by me misusing the library in some way.

@fanyuRN
Copy link

fanyuRN commented Nov 4, 2016

@npomfret yeah,my error is the same as you ;my RN version is 0.35

@npomfret
Copy link
Contributor

npomfret commented Nov 7, 2016

Any thoughts on a work around? It's crashing my app completely.

@ide
Copy link
Contributor

ide commented Nov 7, 2016

You could patch RN locally with null guards, it's not a good fix for the upstream codebase though.

@ajithamp
Copy link

screenshot_1479797301

i am also getting the same error someone help me quickly plsss

@szujak
Copy link

szujak commented Nov 29, 2016

I have this issue on this configuration:
RN: v0.38
Platform: iOS
Operating System: MacOS (Sierra)

On Android everything works fine

Also on iOS i had problem with, but i fix this by include libRCTAnimation.a manually
#11094
#10638

@npomfret
Copy link
Contributor

npomfret commented Dec 9, 2016

I still have this problem on RN 0.39. It's killing my app, but only of certain devices. Can't figure out why, but I don't know of a way to work around it. The view that it crashes on doesn't even have any animations on it.

http://crashes.to/s/c9af6ef3811

@janicduplessis
Copy link
Contributor

Is anyone able to reproduce the crash consitently? From the stacktrace in the redbox screenshot it looks like it happens in componentWillReceiveProps, maybe it's not safe to assume refs have been set in this method.

@janicduplessis
Copy link
Contributor

@gaearon Do you know if it's safe to use refs in componentWillReceiveProps with the current stack reconciler? I assume it is definitely not with Fiber.

@gaearon
Copy link
Collaborator

gaearon commented Dec 9, 2016

I don't think it is safe. They are detached before an update and attached after it's flushed.

@janicduplessis
Copy link
Contributor

janicduplessis commented Dec 9, 2016

Looking at it more this code doesn't really work properly because we need the new and the old ref. Using componentWillReceiveProps isn't a good idea there I think detaching in componentWillUpdate and re-attaching in componentDidUpdate is the proper way to do it.

@janicduplessis
Copy link
Contributor

@gaearon Would that be safe in both stack and fiber or would I need to also add a null check on the ref in componentWillUpdate?

@gaearon
Copy link
Collaborator

gaearon commented Dec 10, 2016

Can you create a minimal reproducing code for this? It’s hard for me to say without seeing what exactly you are running. You should be able to write this even against ReactDOM since reconciler works the same way. Does it happen sporadically or always? I would expect React to be consistent.

@janicduplessis
Copy link
Contributor

I don't know exactly, I was mostly speculating based on the reports in this issue, I've never experienced this crash. I'll see if I can figure out a repro case.

@janicduplessis
Copy link
Contributor

If someone that experience the crash could help figure out what causes this crash exactly it would also be great :)

@npomfret
Copy link
Contributor

My app is suffering from this, but only when I deploy through iTunesConnect / TestFlight. So far I've not been able to reproduce in dev mode. And it doesn't happen consistently unfortunately.

I've searched my codebase for both componentWillUpdate and componentWillReceiveProps and they don't appear. Sorry I can't be of more help

@janicduplessis
Copy link
Contributor

@npomfret You said earlier that the screen that crashed didn't have animations, are you using a navigation library? If so, which one? That could be where the crash is coming from.

@ajithamp Looks like you got the crash in dev mode, are you able to reproduce it? If so could you show us an example that causes it?

I tried reproducing this but wasn't able to, the ref seem fine in componentWillReceiveProps and I really don't see how it can be null. The code always renders the same component so the ref shouldn't ever change. Also tested with dev=false but that didn't help.

@gaearon
Copy link
Collaborator

gaearon commented Dec 11, 2016

@janicduplessis

the ref seem fine in componentWillReceiveProps and I really don't see how it can be null

It would be unsafe if _setComponentRef was different on every render, e.g. as a lambda.

But this:

      return (
        <Component
          {...this._propsAnimated.__getValue()}
          ref={this._setComponentRef}
        />

looks safe to me too.

@npomfret
Copy link
Contributor

npomfret commented Dec 11, 2016

Please ignore my comment about not having animations on the page. I can't accurately tell from the crash reports what pages the user is actually looking at.

[EDIT] and I'm not using any navigation library other than what's in RN. Users claim that the crash happens without them doing anything, i.e. they open the app, wait for a bit and then it crashes. So no navigation.

@teyou
Copy link

teyou commented Dec 16, 2016

I also have this issue on this configuration:
RN: v0.38.1
Platform: Android , (haven't tested on IOS)

Was upgraded my RN fom 0.34 to 0.38.1
No error on development mode.
This issue only appears after I run under generated signed APK (production apk).

@bhaskarmurthy
Copy link

bhaskarmurthy commented Jun 27, 2017

I'm getting this error as well, only occurs in release builds on android. Debug builds seem to work fine.

Pretty stuck on this, it's blocking our release and I'm not sure where to proceed w/ debugging the root cause.

My stacktrace looks like:

06-27 15:12:17.952  9581  9655 E ReactNativeJS: undefined is not an object (evaluating 'this._component.getScrollableNode')
06-27 15:12:18.136  9581  9656 E AndroidRuntime: FATAL EXCEPTION: mqt_native_modules
06-27 15:12:18.136  9581  9656 E AndroidRuntime: Process: com.foo.bar, PID: 9581
06-27 15:12:18.136  9581  9656 E AndroidRuntime: com.facebook.react.common.JavascriptException: undefined is not an object (evaluating 'this._component.getScrollableNode'), stack:
06-27 15:12:18.136  9581  9656 E AndroidRuntime: value@230:2508
06-27 15:12:18.136  9581  9656 E AndroidRuntime: value@230:1877
06-27 15:12:18.136  9581  9656 E AndroidRuntime: unmountComponent@138:3581
06-27 15:12:18.136  9581  9656 E AndroidRuntime: unmountComponent@129:442
06-27 15:12:18.136  9581  9656 E AndroidRuntime: unmountComponent@138:3628
06-27 15:12:18.136  9581  9656 E AndroidRuntime: unmountComponent@129:442
06-27 15:12:18.136  9581  9656 E AndroidRuntime: unmountComponent@138:3628
06-27 15:12:18.136  9581  9656 E AndroidRuntime: unmountComponent@129:442
06-27 15:12:18.136  9581  9656 E AndroidRuntime: unmountChildren@136:826
06-27 15:12:18.136  9581  9656 E AndroidRuntime: unmountChildren@134:2295
06-27 15:12:18.136  9581  9656 E AndroidRuntime: unmountComponent@114:348
06-27 15:12:18.136  9581  9656 E AndroidRuntime: unmountComponent@129:442
06-27 15:12:18.136  9581  9656 E AndroidRuntime: _updateRenderedComponent@138:6863
06-27 15:12:18.136  9581  9656 E AndroidRuntime: _performComponentUpdate@138:6549
06-27 15:12:18.136  9581  9656 E AndroidRuntime: updateComponent@138:5788
06-27 15:12:18.136  9581  9656 E AndroidRuntime: receiveComponent@138:4813
06-27 15:12:18.136  9581  9656 E AndroidRuntime: receiveComponent@129:601
06-27 15:12:18.136  9581  9656 E AndroidRuntime: _updateRenderedComponent@138:6780
06-27 15:12:18.136  9581  9656 E AndroidRuntime: _performComponentUpdate@138:6549
06-27 15:12:18.136  9581  9656 E AndroidRuntime: updateComponent@138:5788
06-27 15:12:18.136  9581  9656 E AndroidRuntime: performUpdateIfNecessary@138:5029
06-27 15:12:18.136  9581  9656 E AndroidRuntime: performUpdateIfNecessary@129:963
06-27 15:12:18.136  9581  9656 E AndroidRuntime: s@125:940
06-27 15:12:18.136  9581  9656 E AndroidRuntime: perform@133:617
06-27 15:12:18.136  9581  9656 E AndroidRuntime: perform@133:617
06-27 15:12:18.136  9581  9656 E AndroidRuntime: perform@125:2082
06-27 15:12:18.136  9581  9656 E AndroidRuntime: k@125:2254
06-27 15:12:18.136  9581  9656 E AndroidRuntime: closeAll@133:1270
06-27 15:12:18.136  9581  9656 E AndroidRuntime: perform@133:704
06-27 15:12:18.136  9581  9656 E AndroidRuntime: batchedUpdates@206:485
06-27 15:12:18.136  9581  9656 E AndroidRuntime: o@125:412
06-27 15:12:18.136  9581  9656 E AndroidRuntime: _receiveRootNodeIDEvent@116:647
06-27 15:12:18.136  9581  9656 E AndroidRuntime: receiveTouches@116:1021
06-27 15:12:18.136  9581  9656 E AndroidRuntime: value@30:2778
06-27 15:12:18.136  9581  9656 E AndroidRuntime: <unknown>@30:1013
06-27 15:12:18.136  9581  9656 E AndroidRuntime: <unknown>@30:106
06-27 15:12:18.136  9581  9656 E AndroidRuntime: value@30:985
06-27 15:12:18.136  9581  9656 E AndroidRuntime:
06-27 15:12:18.136  9581  9656 E AndroidRuntime: 	at com.facebook.react.modules.core.ExceptionsManagerModule.showOrThrowError(ExceptionsManagerModule.java:97)
06-27 15:12:18.136  9581  9656 E AndroidRuntime: 	at com.facebook.react.modules.core.ExceptionsManagerModule.reportFatalException(ExceptionsManagerModule.java:81)
06-27 15:12:18.136  9581  9656 E AndroidRuntime: 	at java.lang.reflect.Method.invoke(Native Method)
06-27 15:12:18.136  9581  9656 E AndroidRuntime: 	at com.facebook.react.bridge.BaseJavaModule$JavaMethod.invoke(BaseJavaModule.java:319)
06-27 15:12:18.136  9581  9656 E AndroidRuntime: 	at com.facebook.react.cxxbridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:158)
06-27 15:12:18.136  9581  9656 E AndroidRuntime: 	at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method)
06-27 15:12:18.136  9581  9656 E AndroidRuntime: 	at android.os.Handler.handleCallback(Handler.java:751)
06-27 15:12:18.136  9581  9656 E AndroidRuntime: 	at android.os.Handler.dispatchMessage(Handler.java:95)
06-27 15:12:18.136  9581  9656 E AndroidRuntime: 	at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:31)
06-27 15:12:18.136  9581  9656 E AndroidRuntime: 	at android.os.Looper.loop(Looper.java:154)
06-27 15:12:18.136  9581  9656 E AndroidRuntime: 	at com.facebook.react.bridge.queue.MessageQueueThreadImpl$3.run(MessageQueueThreadImpl.java:196)
06-27 15:12:18.136  9581  9656 E AndroidRuntime: 	at java.lang.Thread.run(Thread.java:761)

@celodauane
Copy link

celodauane commented Jul 13, 2017

I'm also getting the exact same error on when running the app on Android. This error displays on every touch event.

screenshot 2017-07-13 09 50 19

Dependencies:
"react": "~15.4.1"
"react-native": "0.42.0"

@OrangePiPiPiPi
Copy link

it happened to me yesterday,but I found in my project that caused by third party Component,I use 'jpush-react-native'and 'jcore-react-native' ,maybe the latest version is not suit for my project,so,my solution is remove them temporary

@sergeylaptev
Copy link

sergeylaptev commented Aug 10, 2017

If you use custom component as direct child of TouchableOpacity, TouchableHighlight please be sure, that it's a class which extends Component or PureComponent.
I had simple Icon stateless component:

import React from 'react'
import { Image } from 'react-native'

const Icon = ({ glyph, ...props }) => (
  <Image {...props} source={glyph} />
)

Sometimes I was using it as direct child of <TouchableOpacity />.

<TouchableOpacity>
  <Icon glyph={...} />
</TouchableOpacity>

This causes the same error message as in this thread. After switching into class implementation everything works fine.

import React, { PureComponent } from 'react'
import { Image } from 'react-native'

class Icon extends PureComponent {
  render () {
    const { glyph, ...props } = this.props

    return (
      <Image {...props} source={glyph} />
    )
  }
}

@kiok46
Copy link

kiok46 commented Aug 14, 2017

Still exists.

"react": "16.0.0-alpha.12",
"react-native": "0.47.1",

EDIT: I have made a custom Card element, simple file nothing fancy (40 lines) and this error occurs when import it in some other JS file. Funny part is that It doesn't occur when importing but occurs when that component is used.

import { Card } from './Card';

No error ^

<Card>
</Card>

error.

I am not using any Animation.

Edit 2: Solved it:

how?

I was doing export default Card (my bad) changing it to export {Card} fixed it.

Hope it helps someone.

@zackify
Copy link

zackify commented Sep 5, 2017

Ran into this on iOS using a release build. Any ideas?
image

@zackify
Copy link

zackify commented Sep 29, 2017

Hopefully this helps someone!

I narrowed it down in my app to react-navigation

When null'ing out the route stack and pushing a new route (without a stack in between or resetting correctly) it will throw this when you hit the back button. Here's the change I made:

image

@3210jr
Copy link

3210jr commented Oct 11, 2017

@zackify i think my issue is solvable by your approach. What is the file name of this file you are editing?

Thanks again!

@jamesone
Copy link

@zackify I think it's todo with react-navigation 🤔 When I route from a tab navigator to a stack navigator, it throws this error. However I cannot confirm this.

Any ideas?

@jiaqiu-09
Copy link

same issue . any solutions ?

@Unlighten
Copy link

Same issue here.

@phil-andrews
Copy link

phil-andrews commented Dec 28, 2017

I had this same issue and found the culprit to be linked to a module react-native-autofocus in what, I think, is use of Input. This probably won't solve your issue since the package is not widely used, but it might help you debug your source.

The issue only arose after building for production. It was for both iOS and Android.

"react": "16.0.0-alpha.12"
"react-native": "0.47.2"
"react-native-autofocus": "0.0.6"

@SaGaR1084
Copy link

SaGaR1084 commented Jan 27, 2018

screenshot_1517051632

@charleycesar
Copy link

charleycesar commented Feb 4, 2018

I had the same issue but my problem only happen when I called AsyncStorage and use on this way

my friends @phil-andrews , @Unlighten , @Jiujiale , @jamesone , @zackify and @jerson
check if you are use AsyncStorage

My mistake was use AsyncStorage in this way

 await AsyncStorage.setItem("acceptedTerms_" + this.props.userId, "1").then(() => {
            myCallBack()
        });

I fix change my AsyncStorage to:

 await AsyncStorage.setItem("acceptedTerms_" + this.props.userId, "1", () => {
            myCallBack()
        });

facebook-github-bot pushed a commit that referenced this issue Feb 14, 2018
…nctional

Summary:
Stateless functional components don't support refs and we need that for the component to work, it used to crash with this error message: `undefined is not an object (evaluating 'this._component.getScrollableNode')`. This makes it clear what the issue is.

Fixes some of the errors in #10635, not sure if it fixes all the cases described in the issue though.

**Test plan**
Tested that passing a component with createClass or extends Component works but passing a function causes an error.

[GENERAL] [ENHANCEMENT] [Animated] - Verify that the component passed to createAnimatedComponent is not functional
Closes #15019

Differential Revision: D6988096

Pulled By: sahrens

fbshipit-source-id: ec0ffa763245e786f44b4a1d56c0738876c25782
Plo4ox pushed a commit to Plo4ox/react-native that referenced this issue Feb 17, 2018
…nctional

Summary:
Stateless functional components don't support refs and we need that for the component to work, it used to crash with this error message: `undefined is not an object (evaluating 'this._component.getScrollableNode')`. This makes it clear what the issue is.

Fixes some of the errors in facebook#10635, not sure if it fixes all the cases described in the issue though.

**Test plan**
Tested that passing a component with createClass or extends Component works but passing a function causes an error.

[GENERAL] [ENHANCEMENT] [Animated] - Verify that the component passed to createAnimatedComponent is not functional
Closes facebook#15019

Differential Revision: D6988096

Pulled By: sahrens

fbshipit-source-id: ec0ffa763245e786f44b4a1d56c0738876c25782
@hramos
Copy link
Contributor

hramos commented May 14, 2018

It looks like 10b642a was an attempt to fix some of the crashes surfaced here. No one has commented on this issue since that fix landed, so I'll go ahead and close this.

For anyone else landing here in the future, who believes they are encountering a related issue: please open a new bug report with all the relevant information for your situation.

@hramos hramos closed this as completed May 14, 2018
@hramos hramos added Resolution: Fixed A PR that fixes this issue has been merged. 🔶AsyncStorage labels May 14, 2018
@facebook facebook locked as resolved and limited conversation to collaborators Dec 11, 2019
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Dec 11, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Resolution: Fixed A PR that fixes this issue has been merged. Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

No branches or pull requests