[0.56] undefined is not an object (evaluating '_this._setComponentRef.bind') #20588

reedyrm · 2018-08-09T02:02:51Z

Review the documentation: https://facebook.github.io/react-native
Search for existing issues: https://github.com/facebook/react-native/issues
Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

React Native Environment Info:
System:
OS: macOS High Sierra 10.13.5
CPU: x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
Memory: 802.04 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.10.0 - ~/.nvm/v8.10.0/bin/node
Yarn: 1.9.2 - /usr/local/bin/yarn
npm: 5.6.0 - ~/.nvm/v8.10.0/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
Android SDK:
Build Tools: 23.0.1, 25.0.0, 25.0.2, 26.0.1, 26.0.2, 26.0.3, 27.0.0, 27.0.2, 27.0.3, 28.0.0
API Levels: 23, 24, 25, 26, 27
IDEs:
Android Studio: 3.1 AI-173.4670197
Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
npmPackages:
react: 16.4.1 => 16.4.1
react-native: 0.56.0 => 0.56.0
npmGlobalPackages:
react-native-git-upgrade: 0.2.7

Description

I recently upgraded my project from RN 0.55.2 to RN 0.56.0 and ran into following error. I was able to track it down to Animated.View. It first appeared in a library that I was using (react-navigation), but I was able to reproduce it with just a single item.

I noticed that earlier in RN 0.56.0 there were similar errors:

[0.56.0-rc.2] Animated.createAnimatedComponent causes undefined is not an object (_this_.setComponentref.bind) #19763

I tried to solve the problem using some of the linked solutions and was not able to make any progress.

Could there be an issue with https://github.com/facebook/react-native/blob/master/Libraries/Animated/src/createAnimatedComponent.js#L39 due to babel 7 changes?

TypeError: undefined is not an object (evaluating '_this._setComponentRef.bind')

This error is located at:
    in AnimatedComponent (at App.js:7)
    in App (at renderApplication.js:32)
    in RCTView (at View.js:43)
    in RCTView (at View.js:43)
    in AppContainer (at renderApplication.js:31)

AnimatedComponent
    index.bundle?platform=ios&dev=true&minify=false:45418:56
constructClassInstance
    index.bundle?platform=ios&dev=true&minify=false:20994:32
updateClassComponent
    index.bundle?platform=ios&dev=true&minify=false:22561:35
performUnitOfWork
    index.bundle?platform=ios&dev=true&minify=false:25090:27
workLoop
    index.bundle?platform=ios&dev=true&minify=false:25123:47
renderRoot
    index.bundle?platform=ios&dev=true&minify=false:25156:21
performWorkOnRoot
    index.bundle?platform=ios&dev=true&minify=false:25717:23
performWork
    index.bundle?platform=ios&dev=true&minify=false:25649:30
performSyncWork
    index.bundle?platform=ios&dev=true&minify=false:25624:20
requestWork
    index.bundle?platform=ios&dev=true&minify=false:25530:26
scheduleWork
    index.bundle?platform=ios&dev=true&minify=false:25392:28
scheduleRootUpdate
    index.bundle?platform=ios&dev=true&minify=false:25920:21
render
    index.bundle?platform=ios&dev=true&minify=false:26375:26
renderApplication
    index.bundle?platform=ios&dev=true&minify=false:64535:59
run
    index.bundle?platform=ios&dev=true&minify=false:64209:28
runApplication
    index.bundle?platform=ios&dev=true&minify=false:64259:28
__callFunction
    index.bundle?platform=ios&dev=true&minify=false:2630:49
<unknown>
    index.bundle?platform=ios&dev=true&minify=false:2407:31
__guard
    index.bundle?platform=ios&dev=true&minify=false:2583:15
callFunctionReturnFlushedQueue
    index.bundle?platform=ios&dev=true&minify=false:2406:21

Reproducible Demo

https://github.com/reedyrm/react-native-bind-undefined/tree/broken-animated-view

The text was updated successfully, but these errors were encountered:

EyMaddis · 2018-08-09T15:29:41Z

The issue seems to be that the definition of the flow type for _setComponentRef not only defines the type but also initializes the value with undefined.

react-native/Libraries/Animated/src/createAnimatedComponent.js

Line 33 in 288d2fa

_setComponentRef: Function;

This is probably a babel setup error, most likely around@babel/preset-flow and/or @babel/plugin-proposal-class-properties.

EDIT
I found this: babel/babel#8417

scriptum · 2018-08-13T14:23:11Z

babel/babel#8417 (comment) + cleaning /tmp/metro-cache resolved this issue for me.

krzysztof-miemiec · 2018-09-21T11:19:50Z

I was also struggling for hours with this issue, and the @babel/plugin-transform-flow-strip-types plugin helped. My babel.config.js:

module.exports = {
  'presets': [
    'module:metro-react-native-babel-preset',
    'module:react-native-dotenv',
  ],
  'sourceMaps': true,
  'plugins': [
    '@babel/transform-flow-strip-types',
    '@babel/proposal-class-properties',
    '@babel/proposal-object-rest-spread',
    '@babel/transform-runtime'
  ],
};

Credits for solution to #20150 (comment)

kennethnym · 2018-09-22T09:31:20Z

This worked for me. Thank you!

aerielcruz · 2018-09-26T07:54:05Z

I was also struggling for hours with this issue, and the @babel/plugin-transform-flow-strip-types plugin helped. My babel.config.js:

module.exports = {
  'presets': [
    'module:metro-react-native-babel-preset',
    'module:react-native-dotenv',
  ],
  'sourceMaps': true,
  'plugins': [
    '@babel/transform-flow-strip-types',
    '@babel/proposal-class-properties',
    '@babel/proposal-object-rest-spread',
    '@babel/transform-runtime'
  ],
};

Credits for solution to #20150 (comment)

@krzysztof-miemiec Should I create a new babel.config.js file? or could add it to my .babelrc file?

krzysztof-miemiec · 2018-09-26T08:02:33Z

@aerielcruz I had to replace my .babelrc with babel.config.js, because Jest didn't play well with Babel 7 using .babelrc. You can check if .babelrc works for you, and if it won't, try babel.config.js 😉

aerielcruz · 2018-09-26T08:17:24Z

@krzysztof-miemiec Thanks! Will try it out 😄

tcodes0 · 2018-10-03T13:35:47Z

Babel 7 here, react-native 0.57.1. My error looks like this. It started messing with me after I touched my babel config briefly. Trying fixes in thread...

FIXED: added @babel/plugin-transform-flow-strip-types, placed first in plugins array in .babelrc

seeya · 2018-10-15T09:37:00Z

Babel 7 here, react-native 0.57.1. My error looks like this. It started messing with me after I touched my babel config briefly. Trying fixes in thread...

FIXED: added @babel/plugin-transform-flow-strip-types, placed first in plugins array in .babelrc

Thanks, worked for me too.

dani-PYT · 2018-10-16T13:38:37Z

@seeya can you show your .babelrc file?

seeya · 2018-10-16T14:42:09Z

@seeya can you show your .babelrc file?
My babel.rc.

{ 
  "presets": ["module:metro-react-native-babel-preset"],
  "plugins": [
        ["@babel/plugin-transform-flow-strip-types"],
        ["@babel/plugin-proposal-decorators", { "legacy": true}],
        ["@babel/plugin-proposal-class-properties", { "loose": true}]
    ]
}

And my version of dependencies are as follows

  "dependencies": {
    "babel-plugin-transform-flow-strip-types": "^6.22.0",
    "mobx": "^5.5.0",
    "mobx-react": "^5.2.8",
    "mobx-state-tree": "^3.5.0",
    "native-base": "^2.8.1",
    "react": "16.5.0",
    "react-native": "0.57.1",
  },
  "devDependencies": {
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/plugin-proposal-decorators": "^7.1.2",
    "babel-jest": "23.6.0",
    "jest": "23.6.0",
    "metro-react-native-babel-preset": "0.48.0",
    "react-test-renderer": "16.5.0"
  }

If fails, react-native start --reset-cache do this. It worked for me.

kalahooo · 2018-10-20T18:34:50Z

If tips above do not help, try to clean cache.

leshphonc · 2018-10-24T08:01:34Z

If tips above do not help, try to clean cache.

How to clean cache

seeya · 2018-10-24T08:04:28Z

If tips above do not help, try to clean cache.

How to clean cache

try this

react-native start --reset-cache

jasonComing · 2018-11-08T02:05:41Z

these are the steps I have taken to resolve this issue in Windows

1. Close emulator
2. Kill all node.exe proccess
3. remove all files in temp
4. remove node_modules
5. install babel-plugin-transform-flow-strip-types
6. npm install
7. react-native start --reset-cache
8. react-native run-android

seasparta618 · 2018-11-15T03:19:23Z

these are the steps I have taken to resolve this issue in Windows

1. Close emulator
2. Kill all node.exe proccess
3. remove all files in temp
4. remove node_modules
5. install babel-plugin-transform-flow-strip-types
6. npm install
7. react-native start --reset-cache
8. react-native run-android

this really did help! Thanks!

joncursi · 2018-11-27T07:11:50Z

I hit this error using @babel/preset-flow. Had to remove the preset and instead use @babel/plugin-transform-flow-strip-types.

flacito · 2018-11-29T13:14:34Z

For iOS,adding @babel/plugin-transform-flow-strip-types and then cleaning the build dir in XCode.

drborges · 2018-12-04T02:12:48Z

Same here. Make sure you reset the cache after adding @babel/plugin-transform-flow-strip-types.

$ react-native --version
react-native-cli: 2.0.1
react-native: 0.57.5

.babelrc

{
  "presets": [
    "module:metro-react-native-babel-preset"
  ],
  "plugins": [
    ["@babel/plugin-transform-flow-strip-types"],
    ["@babel/plugin-proposal-class-properties", { "loose": true }]
  ]
}

Summary: There are some versions of babel 7's flow support that cause problems with property initializers. I changed this code to use class properties to fix the issue. See #20588 Reviewed By: TheSavior Differential Revision: D13396959 fbshipit-source-id: a76266ac0c8a6a19a1c45f7136de4aba9c72581d

tangliang1 · 2018-12-18T13:19:17Z

My .babelrc is also this, and all the dependencies are latest.

{ 
  "presets": ["module:metro-react-native-babel-preset"],
  "plugins": [
        ["@babel/plugin-transform-flow-strip-types"],
        ["@babel/plugin-proposal-decorators", { "legacy": true}],
        ["@babel/plugin-proposal-class-properties", { "loose": true}]
    ]
}

If still wrong, try react-native start --reset-cache
that works for me. thanks @seeya

TyLy83 · 2018-12-18T21:59:42Z

thank @tangliang1 for point this out.

tr3v3r · 2019-01-16T08:40:09Z

Try:
"watchman watch-del-all && rm -rf $TMPDIR/react-* && rm -rf $TMPDIR/metro-* && rm -rf $TMPDIR/haste-* && yarn cache clean"

Worked for me

18945168 · 2019-01-18T15:06:31Z

Babel 7 here, react-native 0.57.1. My error looks like this. It started messing with me after I touched my babel config briefly. Trying fixes in thread...

FIXED: added @babel/plugin-transform-flow-strip-types, placed first in plugins array in .babelrc

i have the problem because of i use 'react-navigation', when i remove 'react-navigation' its run ok, this is work for me, to add the plugin --> @babel/plugin-transform-flow-strip-types

igor90007 · 2019-03-04T18:47:14Z

"mobx": "4.9.2",
"mobx-react": "5.4.3",
"react-native": "0.58.6",
works for me

ShaubertIlya · 2019-03-19T17:30:06Z

Those who not solved this issue. Try to run react-native start in terminal before react-native run-android or ios. In my case it was all about node js window

unadlib · 2019-04-25T08:07:52Z

Thank you so much, I almost gave up using react navigation.

This was referenced Aug 9, 2018

Migrated to RN 0.56.0 and encountering an error with StackNavigator react-navigation/react-navigation#4830

Closed

fixed naming conflict in createAnimatedComponent setComponentRef #20589

Closed

90dy mentioned this issue Aug 24, 2018

Unhandled JS Exception: TypeError: TypeError: Cannot read property 'bind' of undefined react-navigation/redux-helpers#58

Closed

devthejo mentioned this issue Sep 11, 2018

[0.57.0-rc.4] TypeError: undefined is not an object (evaluating '_this._setComponentRef.bind') #21055

Closed

3 tasks

m-vdb mentioned this issue Sep 19, 2018

[0.56.0][iOS][Android] Can't find variable: require #21048

Closed

3 tasks

cameronbell mentioned this issue Oct 28, 2018

AnimatedEvent TypeError: Cannot read property 'bind' of undefined satya164/react-native-tab-view#630

Closed

tibbus mentioned this issue Nov 8, 2018

Cannot read property 'bind' of undefined / undefined is not an object evaluating _this._setComponentRef.bind #22157

Closed

3 tasks

crecotun mentioned this issue Nov 24, 2018

RN 0.57 TypeScript Enabled: "undefined is not an object" react-navigation/react-navigation#4990

Closed

reedyrm closed this as completed Dec 5, 2018

shooterRao mentioned this issue Jan 17, 2019

iOS启动时，报错，TypeError: undefined is not an object (evaluating this._callListeners.bind') shooterRao/react-native-fruitStore#5

Open

gengjiawen mentioned this issue Jan 17, 2019

[Meta] Android target ES6 and beyond with new jsc landed on master #23049

Closed

agreea mentioned this issue Jan 21, 2019

undefined is not a function ("@@iterator") react-navigation/react-navigation#5503

Closed

RichardLindhout mentioned this issue Mar 2, 2019

PaperProvider not working with RNN Wix V2 callstack/react-native-paper#857

Closed

halilb mentioned this issue Mar 25, 2019

Cannot read property 'bind' of undefined halilb/react-native-textinput-effects#99

Closed

Xiao-HuangShu mentioned this issue Apr 19, 2019

TypeError:undefined is not an object(evaluating this._call Listeners.bind) react-navigation/react-navigation#5825

Closed

facebook locked as resolved and limited conversation to collaborators Dec 5, 2019

react-native-bot added the Resolution: Locked This issue was locked by the bot. label Dec 5, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[0.56] undefined is not an object (evaluating '_this._setComponentRef.bind') #20588

[0.56] undefined is not an object (evaluating '_this._setComponentRef.bind') #20588

reedyrm commented Aug 9, 2018 •

edited

Loading

EyMaddis commented Aug 9, 2018 •

edited

Loading

scriptum commented Aug 13, 2018 •

edited

Loading

krzysztof-miemiec commented Sep 21, 2018

kennethnym commented Sep 22, 2018

aerielcruz commented Sep 26, 2018

krzysztof-miemiec commented Sep 26, 2018

aerielcruz commented Sep 26, 2018

tcodes0 commented Oct 3, 2018 •

edited

Loading

seeya commented Oct 15, 2018

dani-PYT commented Oct 16, 2018

seeya commented Oct 16, 2018 •

edited

Loading

kalahooo commented Oct 20, 2018

leshphonc commented Oct 24, 2018

seeya commented Oct 24, 2018 •

edited

Loading

jasonComing commented Nov 8, 2018

seasparta618 commented Nov 15, 2018

joncursi commented Nov 27, 2018

flacito commented Nov 29, 2018

drborges commented Dec 4, 2018

tangliang1 commented Dec 18, 2018 •

edited

Loading

TyLy83 commented Dec 18, 2018

tr3v3r commented Jan 16, 2019

18945168 commented Jan 18, 2019

igor90007 commented Mar 4, 2019

ShaubertIlya commented Mar 19, 2019

unadlib commented Apr 25, 2019

[0.56] undefined is not an object (evaluating '_this._setComponentRef.bind') #20588

[0.56] undefined is not an object (evaluating '_this._setComponentRef.bind') #20588

Comments

reedyrm commented Aug 9, 2018 • edited Loading

Environment

Description

Reproducible Demo

EyMaddis commented Aug 9, 2018 • edited Loading

scriptum commented Aug 13, 2018 • edited Loading

krzysztof-miemiec commented Sep 21, 2018

kennethnym commented Sep 22, 2018

aerielcruz commented Sep 26, 2018

krzysztof-miemiec commented Sep 26, 2018

aerielcruz commented Sep 26, 2018

tcodes0 commented Oct 3, 2018 • edited Loading

seeya commented Oct 15, 2018

dani-PYT commented Oct 16, 2018

seeya commented Oct 16, 2018 • edited Loading

kalahooo commented Oct 20, 2018

leshphonc commented Oct 24, 2018

seeya commented Oct 24, 2018 • edited Loading

jasonComing commented Nov 8, 2018

seasparta618 commented Nov 15, 2018

joncursi commented Nov 27, 2018

flacito commented Nov 29, 2018

drborges commented Dec 4, 2018

tangliang1 commented Dec 18, 2018 • edited Loading

TyLy83 commented Dec 18, 2018

tr3v3r commented Jan 16, 2019

18945168 commented Jan 18, 2019

igor90007 commented Mar 4, 2019

ShaubertIlya commented Mar 19, 2019

unadlib commented Apr 25, 2019

reedyrm commented Aug 9, 2018 •

edited

Loading

EyMaddis commented Aug 9, 2018 •

edited

Loading

scriptum commented Aug 13, 2018 •

edited

Loading

tcodes0 commented Oct 3, 2018 •

edited

Loading

seeya commented Oct 16, 2018 •

edited

Loading

seeya commented Oct 24, 2018 •

edited

Loading

tangliang1 commented Dec 18, 2018 •

edited

Loading