React-native: [0.56] undefined is not an object (evaluating '_this._setComponentRef.bind')

[reedyrm]

• [X] Review the documentation: https://facebook.github.io/react-native
• [X] Search for existing issues: https://github.com/facebook/react-native/issues
• [X] 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:

• https://github.com/facebook/react-native/issues/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

[EyMaddis]

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.

https://github.com/facebook/react-native/blob/288d2fa81a5d21e47f7804c9d4647b4dce27e558/Libraries/Animated/src/createAnimatedComponent.js#L33

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

EDIT
I found this: https://github.com/babel/babel/issues/8417

[scriptum]

https://github.com/babel/babel/issues/8417#issuecomment-411757644 + cleaning /tmp/metro-cache resolved this issue for me.

[krzysztof-miemiec]

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 https://github.com/facebook/react-native/issues/20150#issuecomment-417858270

[MrCreeper1008]

This worked for me. Thank you!

[aerielcruz]

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]

@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]

@krzysztof-miemiec Thanks! Will try it out 😄

[Thomazella]

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]

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]

@seeya can you show your .babelrc file?

[seeya]

@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]

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

[Evangelione]

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

How to clean cache

[seeya]

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

How to clean cache

try this

react-native start --reset-cache

[jasonComing]

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]

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]

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

[flacito]

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

[drborges]

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 }]
  ]
}

[tangliang1]

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]

thank @tangliang1 for point this out.

[tr3v3r]

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

Worked for me

[18945168]

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]

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

[ShaubertIlya]

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]

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