React-native: TypeError: undefined is not a function (evaluating 'instance.render()')

[jerinho]

Environment

• OS: Windows 10
• Node: 8.11.4
• Yarn: 1.9.4
• npm: 6.4.1
• react-native-cli: 2.0.1
• react-native: 0.57.5

Description

TypeError: undefined is not a function (evaluating 'instance.render()')
This error is located at: in AppContainer (at renderApplication.js:33)

Reproducible Demo

--- package.json ---

{
  "name": "test",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "@babel/core": "^7.1.6",
    "babel-core": "^6.26.3",
    "react": "16.6.1",
    "react-native": "0.57.5"
  },
  "devDependencies": {
    "babel-jest": "23.6.0",
    "jest": "23.6.0",
    "metro-react-native-babel-preset": "0.49.2",
    "react-test-renderer": "16.6.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

very simple. just "react-native run-android" and tada !!

[react-native-bot]

Can you run react-native info and edit your issue to include these results under the Environment section?

If you believe this information is irrelevant to the reported issue, you may write [skip envinfo] under Environment to let us know.

[jerinho]

Can you run react-native info and edit your issue to include these results under the Environment section?

If you believe this information is irrelevant to the reported issue, you may write [skip envinfo] under Environment to let us know.

i don't think any other info included from react-native info is needed to solve this issue

[anehkumar]

Hi, Have you found any solution to this problem? I am facing the same problem

[jerinho]

Hi, Have you found any solution to this problem? I am facing the same problem

sadly no. i'd revert to RN 0.55.4

[arvindlaljaiswal]

Hi All,
This issue is easily reproducible with the following steps

1. create a new project
2. npm install
3. react-native run-android

following is the package.json file elements came when "react-native info" cmd executed in the terminal.

React Native Environment Info:
System:
OS: macOS High Sierra 10.13.4
CPU: (4) x64 Intel(R) Core(TM) i5-2415M CPU @ 2.30GHz
Memory: 22.35 MB / 6.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.9.4 - /usr/local/bin/node
npm: 6.4.1 - /usr/local/bin/npm
Watchman: 4.9.4 - /usr/local/bin/watchman
SDKs:
Android SDK:
API Levels: 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27
Build Tools: 19.0.1, 19.1.0, 20.0.0, 21.0.0, 21.1.1, 21.1.2, 22.0.1, 23.0.0, 23.0.1, 23.0.2, 25.0.2, 26.0.1, 26.0.2, 27.0.3, 28.0.0
System Images: android-18 | ARM EABI v7a, android-18 | Intel x86 Atom, android-18 | Google APIs Intel x86 Atom, android-19 | ARM EABI v7a, android-19 | Intel x86 Atom, android-20 | Android Wear ARM EABI v7a, android-20 | Android Wear Intel x86 Atom, android-21 | Android TV ARM EABI v7a, android-21 | Android TV Intel x86 Atom, android-21 | Android Wear ARM EABI v7a, android-21 | Android Wear Intel x86 Atom, android-21 | ARM EABI v7a, android-21 | Intel x86 Atom, android-21 | Intel x86 Atom_64, android-21 | Google APIs ARM EABI v7a, android-21 | Google APIs Intel x86 Atom, android-21 | Google APIs Intel x86 Atom_64, android-22 | Google APIs Intel x86 Atom_64, android-23 | Android TV ARM EABI v7a, android-23 | Android TV Intel x86 Atom, android-23 | ARM EABI v7a, android-23 | Intel x86 Atom, android-23 | Intel x86 Atom_64, android-23 | Google APIs ARM EABI v7a, android-23 | Google APIs Intel x86 Atom, android-23 | Google APIs Intel x86 Atom_64, android-24 | ARM 64 v8a, android-24 | ARM EABI v7a, android-24 | Intel x86 Atom, android-24 | Intel x86 Atom_64, android-24 | Google APIs Intel x86 Atom_64, android-26 | Google APIs Intel x86 Atom, android-26 | Google APIs Intel x86 Atom_64
IDEs:
Android Studio: 2.1 AI-143.2915827
Xcode: /undefined - /usr/bin/xcodebuild
npmPackages:
react: ^16.6.1 => 16.6.1
react-native: ^0.57.7 => 0.57.7
npmGlobalPackages:
react-native-cli: 2.0.1

This issue is replicated in the new version of react native.

Please let me know if i m doing anything wrong.

[Khalid-Nowaf]

I have the same issue, using RN 0.57.7

[jerinho]

finally i've found the solution. at least it works for me. i've moved to here. it even teaches you how to migrate from here 😆

[duchunter]

i dunno how but yarn add @babel/runtime or npm i -s @babel/runtime works for me

[abdulsalam90]

same here, "react": "16.7.0", "react-native": "^0.57.8",

[huytran123]

Use this version to resolve this error :). I have tested it, and worked fine:
"react": "16.6.3",
"react-native": "0.58.0-rc.2"

[rosebless]

any idea? i can't solve this problem. i try all comment but not work, and don't want to change react-native to flutter

[rosebless]

any one know the cause of problem?

[bmwertman]

I get;
TypeError: instance.render is not a function. (In 'instance.render()', 'instance.render' is undefined)
This error is located at: in AppContainer (at renderApplication.js:33)

running the versions @huytran123 provided.

[AgingChan]

I have encountered the same error. Also tried to re-generate the ios/android code using react-native eject but no good.

Here is the output of react-native info

  React Native Environment Info:
    System:
      OS: macOS 10.14.2
      CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
      Memory: 884.87 MB / 16.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 8.11.4 - ~/.nvm/versions/node/v8.11.4/bin/node
      Yarn: 1.9.4 - /usr/local/bin/yarn
      npm: 6.4.1 - ~/.nvm/versions/node/v8.11.4/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
      Android SDK:
        API Levels: 23, 26, 27, 28
        Build Tools: 26.0.2, 26.0.3, 27.0.3, 28.0.2
        System Images: android-23 | Google APIs Intel x86 Atom, android-25 | Google Play Intel x86 Atom
    IDEs:
      Android Studio: 3.1 AI-173.4907809
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.6.3 => 16.6.3
      react-native: 0.57.08 => 0.57.8
    npmGlobalPackages:
      create-react-native-app: 1.0.0
      react-native-asset: 1.1.2
      react-native-cli: 2.0.1
      react-native-git-upgrade: 0.2.7

[bosz]

Damn, can't find any single solutions to this problem. Can someone do something about this???

[cassianomon]

Using render as:
render = () => {

solved for me, but is it necessary? Even if I just return:

render() {
    return <View />
}

it gives me this error...

[bosz]

My own error was coming up because i had no render() method in the class component.

Maybe you add a render method and see if it works.

[liaopen123]

I solved it .with:

• watchman watch-del-all
• rm -rf node_modules/.cache
• react-native start --resetCache

[friederbluemle]

Geez, I just wasted about an hour until I figured out that the solution (at least for my problem), was:

react-native start --resetCache

[marcelkalveram]

@cassianomon's suggestion to use the class field double arrow solved it for me as well:
render = () => { instead of render() {

[ferrannp]

Hello there 👋 this issue has been reported for an old version of React Native. Ideally we'd like everyone to be using 0.59 (see the awesome changes it brought) but we know updating can be a pain. We are going to close this issue because it's from a version before 0.57, which is really old.

But please, if it's actually still an issue with 0.59 please comment below and we can reopen it 😊

[ptmt]

Observing this after upgrading to 0.59.4 and removing all possible caches. It seems that I have to keep digging. replacing render = () => {} solves the problem, interesting why.

[ptmt]

My issue was related to babel. Make sure you correctly upgraded babel, double check your root files (babel.config.js, package.json) by making react-native init something into separate folder if react-native-upgrade failed you.

[i6mi6]

For react native 0.59 I ran react-native init inside a new folder, copied all babel dependencies, .babelrc and babel.config.js and updated those inside my project, then it worked like charm.

[budleigh]

Seeing this with 0.59. I've tried 14 different babel presets, from just preset-env to babel-preset-react-native and the default module:metro-react-native-babel-preset. In all cases, replacing render with an arrow function fixes the issue, but fails otherwise.