react-native cannot read property 'bindings' of null

Question

I tried to run a react-native simulator.

However, this error came out in the simulator:

Failed to load bundle(http://localhost:8081/index.bundle?
platform=ios&dev=true&minify=false) 
with error:(/Users/sugawarasyuta/Desktop/albums/index.js:
Cannot read property 'bindings' of null(null))

I double‐checked my code syntax. But I feel like this is not about that. Do you know how to solve this error?

Here are my files:

index.js

import React from 'react';
import { AppRegistry,View } from 'react-native';
import Header from './src/components/header';
import AlbumList from './src/components/AlbumList';


//Create a component
const App = () => (
<View>
<Header headerText= {'albums'} />
<AlbumList />
</View>
);

AppRegistry.registerComponent('albums', () => App );

AlbumList.js

import React,{Component}from 'react';
import {View, Text} from 'react-native';
import axios from 'axios';

class AlbumList extends Component {

componentWillMount(){
    axios.get('https://rallycoding.herokuapp.com/api/music_albums')
    .then(response => console.log(response));

}
render(){
return(
    <View>
        <Text>AlbumList!!!</Text>
    </View>
    );
}
}
export default AlbumList;

These are terminal statements:

/usr/bin/codesign --force --sign - --entitlements /Users/sugawarasyuta/Desktop/albums/ios/build/Build/Intermediates.noindex/albums.build/Debug-iphonesimulator/albums.build/albums.app.xcent --timestamp=none /Users/sugawarasyuta/Desktop/albums/ios/build/Build/Products/Debug-iphonesimulator/albums.app

/Users/sugawarasyuta/Desktop/albums/ios/build/Build/Products/Debug-iphonesimulator/albums.app: resource fork, Finder information, or similar detritus not allowed

Command /usr/bin/codesign failed with exit code 1



** BUILD FAILED **


The following build commands failed:

    CodeSign build/Build/Products/Debug-iphonesimulator/albums.app
(1 failure)

Installing build/Build/Products/Debug-iphonesimulator/albums.app
Launching org.reactjs.native.example.albums
org.reactjs.native.example.albums: 8385

This is my package.json. Are those dependencies correct?

{
"name": "albums",  
"version": "0.0.1",

"private": true,

"scripts": {
 "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },


  "dependencies": {

"axios": "^0.18.0",

"babel-plugin-transform-es2015-arrow-functions": "^6.22.0",

"react": "16.3.1",

"react-native": "^0.56.0"

 },

"devDependencies": {

"@babel/preset-env": "^7.0.0-beta.53",

"babel-jest": "23.0.1",

"babel-preset-es2015": "^6.24.1",

 "babel-preset-react-native": "4.0.0",

"eslint-config-rallycoding": "^3.2.0",

 "jest": "23.1.0",

"react-test-renderer": "16.3.1"

},

"jest": {

 "preset": "react-native"

 }

}

I upgraded "babel-preset-react-native" from "4.0.0" to "^5.0.1" and another error came out:

error: bundling failed: SyntaxError: 
/Users/sugawarasyuta/Desktop/albums/index.js: Unexpected token (11:3)



  10 | const App = () => {

> 11 |    <Header headerText= {'albums'} />

     |    ^

  12 | 

  13 | };



at Parser.raise

(/Users/sugawarasyuta/Desktop/albums/node_modules
/@babel/core/node_modules/babylon/lib/index.js:776:15)

at Parser.unexpected    
(/Users/sugawarasyuta/Desktop/albums/node_modules/
@babel/core/node_modules/babylon/lib/index.js:2079:16)

at Parser.parseExprAtom (/Users/sugawarasyuta/Desktop/albums/node_modules/@babel/core/node_modules/babylon/lib/index.js:3157:20)

at Parser.parseExprSubscripts (/Users/sugawarasyuta/Desktop/albums/node_modules/@babel/core/node_modules/babylon/lib/index.js:2757:21)

at Parser.parseMaybeUnary (/Users/sugawarasyuta/Desktop/albums/node_modules/@babel/core/node_modules/babylon/lib/index.js:2736:21)

at Parser.parseExprOps (/Users/sugawarasyuta/Desktop/albums/node_modules/@babel/core/node_modules/babylon/lib/index.js:2643:21)

at Parser.parseMaybeConditional (/Users/sugawarasyuta/Desktop/albums/node_modules/@babel/core/node_modules/babylon/lib/index.js:2615:21)

at Parser.parseMaybeAssign (/Users/sugawarasyuta/Desktop/albums/node_modules/@babel/core/node_modules/babylon/lib/index.js:2562:21)

at Parser.parseExpression (/Users/sugawarasyuta/Desktop/albums/node_modules/@babel/core/node_modules/babylon/lib/index.js:2515:21)

at Parser.parseStatementContent (/Users/sugawarasyuta/Desktop/albums/node_modules/@babel/core/node_modules/babylon/lib/index.js:4076:21)
 BUNDLE  [ios, dev] ../../index.js ░░░░░░░░░░░░░░░░ 0.0% (0/1), failed.

I feel like this is not because of syntax error simply, but cause of dependencies. Do you know how can I fix it?

which version of react-native do you use? FYI, there is similar issue on github. https://github.com/facebook/react-native/issues/20074#issuecomment-403048203 — zigen, Jul 07 '18 at 06:26
thanks for your comment! I am using these version. react-native-cli: 2.0.1 react-native: 0.56.0 — 管原秀太, Jul 12 '18 at 03:14

score 32 · Answer 1 · answered Jul 12 '18 at 16:17

32

Without any further information, I suspect you need to update babel-preset-react-native.

When upgrading to 0.56, make sure to bump your babel-preset-react-native package.json dependency to ^5.0.1 or newer.

https://github.com/facebook/react-native/releases

answered Jul 12 '18 at 16:17

Laurie Williams

383
2
8

I am gonna try it later, and then report it . – 管原秀太 Jul 17 '18 at 04:11

Ronan Boiteau · Answer 2 · 2019-01-16T01:47:18.783

16

For React Native 0.57

When upgrading to React Native 0.57, follow these steps to fix this issue:

Upgrade the version of React in the package.json to 16.5
Change the babel-preset dependency from "babel-preset-react-native": "^5" to "metro-react-native-babel-preset": "^0.45.0"

Change the .babelrc configuration to:

{
  "presets": ["module:metro-react-native-babel-preset"]
}

Run rm -rf node_modules/ to remove your old modules
Run npm install to get a fresh node_modules/
Run react-native upgrade to upgrade your config files
Run rm -rf android/build/ ios/build/ to get rid of your old compiled apps
Run your app again, it should work!

Source for the first steps

edited Jan 16 '19 at 01:47

answered Oct 22 '18 at 09:42

Ronan Boiteau

9,608
6
34
56

1

When I make react-native-git-upgrade it throws: git-upgrade ERR! Error: Couldn't find preset "module:metro-react-native-babel-preset" relative to directory "project;'s root directory". Why? – Caio Saldanha Dec 03 '18 at 19:19
@CaioSaldanha It is a common error, it is advised to use react-native upgrade for RN 0.59+ or if you have an older version of react-native use rn-diff-purge to compare and manually update. – Dror Bar May 27 '19 at 11:17

RedEarth · Answer 3 · 2018-11-05T23:35:44.450

REACT NATIVE 0.57 FRESH INSTALLS iOS ANDROID

I did a fresh install of react native from react-native init projectName

The package.json

{
  "name": "JesteeTestee",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
},
  "dependencies": {
    "react": "^16.5.2",
    "react-native": "0.57.4"
},
devDependencies": {
  "babel-jest": "23.6.0",
  "jest": "23.6.0",
  "metro-react-native-babel-preset": "^0.47.0",
  "react-test-renderer": "16.6.0-alpha.8af6728"
},
"jest": {
  "preset": "react-native",
  "transform": {
    "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
  }
}

}

As you can see it is the latest, current version of RN@0.57.4 and metro-react-native-babel-preset@0.47.0.

Also the default .babelrc

{
  "presets": ["module:metro-react-native-babel-preset"]
}

Simply added the following to the Jest part of the package.json;

"transform": {
  "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
}

Given the hours I spent finding this today, if you are doing a fresh install and hit a snag just delete the project, start again and try this simple step only.

Tested for react-native run-ios and run-android.

score 0 · Answer 4 · answered Jul 21 '21 at 09:24

0

FOR REACT-NATIVE VERSION 0.57 OR MORE

On babel.config.js, simply change presets as below

"presets": ["module:metro-react-native-babel-preset"]

This worked for me after trying many different solutions

answered Jul 21 '21 at 09:24

batuhancam

1

react-native cannot read property 'bindings' of null

4 Answers4

For React Native 0.57

Linked