web-dev-qa-db-fra.com

Impossible de lire la propriété 'bindings' de null Erreur dans React Native

Je reçois un message d'erreur suivant sur l'émulateur/le périphérique lors de l'exécution de l'application à partir de react-native.

** ERROR **

  The development server returned response error code: 500

URL: http: //10.0.2.2:8081/index.delta?platform=Android&dev=true&minify=false

  Body: {
    "type": "TransformError",
    "lineNumber": 0,
    "errors": [{
      "description": "/Users/admin/Documents/Pulse/Phase II/Projects/Pulse-mobile-common-rn/App.js: Cannot read property 'bindings' of null",
      "lineNumber": 0
    }],
    "name": "SyntaxError",
    "message": "/Users/admin/Documents/Pulse/Phase II/Projects/Pulse-mobile-common-rn/App.js: Cannot read property 'bindings' of null",
    "stack": "TypeError: Cannot read property 'bindings' of null\n    at Scope.moveBindingTo (/Users/admin/Documents/Pulse/Phase II/Projects/Pulse-mobile-common-rn/node_modules/@babel/traverse/lib/scope/index.js:867:13)\n    at BlockScoping.updateScopeInfo (/Users/admin/Documents/Pulse/Phase II/Projects/Pulse-mobile-common-rn/node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:364:17)\n    at BlockScoping.run (/Users/admin/Documents/Pulse/Phase II/Projects/Pulse-mobile-common-rn/node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:330:12)\n    at PluginPass.BlockStatementSwitchStatementProgram (/Users/admin/Documents/Pulse/Phase II/Projects/Pulse-mobile-common-rn/node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:70:24)\n    at newFn (/Users/admin/Documents/Pulse/Phase II/Projects/Pulse-mobile-common-rn/node_modules/@babel/traverse/lib/visitors.js:193:21)\n    at NodePath._call (/Users/admin/Documents/Pulse/Phase II/Projects/Pulse-mobile-common-rn/node_modules/@babel/traverse/lib/path/context.js:53:20)\n    at NodePath.call (/Users/admin/Documents/Pulse/Phase II/Projects/Pulse-mobile-common-rn/node_modules/@babel/traverse/lib/path/context.js:40:17)\n    at NodePath.visit (/Users/admin/Documents/Pulse/Phase II/Projects/Pulse-mobile-common-rn/node_modules/@babel/traverse/lib/path/context.js:88:12)\n    at TraversalContext.visitQueue (/Users/admin/Documents/Pulse/Phase II/Projects/Pulse-mobile-common-rn/node_modules/@babel/traverse/lib/context.js:118:16)"
  }
processBundleResult
BundleDownloader.Java: 296
access$200
BundleDownloader.Java: 37
onResponse
BundleDownloader.Java: 174
execute
RealCall.Java: 153
run
NamedRunnable.Java: 32
runWorker
ThreadPoolExecutor.Java: 1162
run
ThreadPoolExecutor.Java: 636
run
Thread.Java: 764

Package.json

{
  "name": "pulsemobile",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "pretty": "prettier --semi true --print-width 120 --arrow-parens always --single-quote --trailing-comma all --write \"src/**/*.js\"",
    "precommit": "lint-staged",
    "offline-Android": "react-native bundle --dev false --platform Android --entry-file index.js --bundle-output ./Android/app/build/intermediates/assets/debug/index.Android.bundle --assets-dest ./Android/app/build/intermediates/res/merged/debug",
    "offline-ios": "react-native bundle --entry-file='index.js' --bundle-output='./ios/playmaker/main.jsbundle' --dev=false --platform='ios' --assets-dest='./ios'"
  },
  "lint-staged": {
    "*.js": [
      "eslint --fix",
      "yarn pretty",
      "git add"
    ]
  },
  "dependencies": {
    "@babel/runtime": "^7.0.0",
    "axios": "^0.18.0",
    "dateformat": "^3.0.3",
    "native-base": "^2.7.1",
    "prop-types": "^15.6.2",
    "react": "16.5.0",
    "react-native": "0.57.1",
    "react-native-device-settings": "^1.2.0",
    "react-native-extra-dimensions-Android": "^0.21.0",
    "react-native-fused-location": "^0.2.1",
    "react-native-geocoding": "^0.2.0",
    "react-native-iphone-x-helper": "^1.1.0",
    "react-native-permissions": "^1.1.1",
    "react-native-vector-icons": "^5.0.0",
    "react-navigation": "^v1.3.2",
    "react-navigation-redux-helpers": "^1.0.2",
    "react-redux": "^5.0.6",
    "redux": "^3.7.2",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.2.0"
  },
  "devDependencies": {
    "babel-eslint": "^8.2.5",
    "babel-jest": "23.6.0",
    "babel-preset-react-native": "4.0.0",
    "enzyme": "^3.6.0",
    "enzyme-adapter-react-16": "^1.4.0",
    "eslint-config-airbnb": "^17.0.0",
    "eslint-plugin-flowtype": "^2.49.3",
    "eslint-plugin-import": "^2.13.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-react": "^7.10.0",
    "husky": "^0.14.3",
    "eslint": "^5.0.1",
    "jest": "23.6.0",
    "metro-react-native-babel-preset": "0.46.0",
    "react-test-renderer": "16.5.0",
    "lint-staged": "^7.2.0",
    "prettier": "^1.13.6",
    "react-dom": "^16.4.2",
    "redux-mock-store": "^1.5.3"
  },
  "jest": {
    "collectCoverage": true,
    "preset": "react-native",
    "transformIgnorePatterns": [
      "node_modules/(realm)/"
    ],
    "setupTestFrameworkScriptFile": "./test/setupJest.js",
    "moduleDirectories": [
      "node_modules"
    ],
    "transform": {
      "^.+\\.jsx?$": "babel-jest"
    },
    "unmockedModulePathPatterns": [
      "promise",
      "source-map"
    ]
  },
  "rnpm": {
    "assets": [
      "./src/app/assets/fonts/"
    ]
  }
}

App.js C'est le contenu du fichier App.js

 

   /**
     * Sample React Native App
     * https://github.com/facebook/react-native
     *
     * @format
     * @flow
     */

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import store from './src/lib/Store';
import Root from './src/components/Root';

export default class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <Root />
      </Provider>
    );
  }
}

Contenu du fichier Index.js

/** @format */

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

**. babelrc :: **

{ "presets": [ "réagit natif" ] }

J'ai essayé avec la solution suivante de liens, mais aucune de ces solutions n'a résolu ce problème

  1. Mise à niveau vers babel 7: impossible de lire la propriété 'bindings' of null
  2. react-native ne peut pas lire la propriété 'bindings' of null
  3. https://github.com/babel/babel/issues/8575
  4. https://github.com/storybooks/storybook/issues/3937
4
  1. Dans le fichier ".babelrc":

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

  1. Sur le terminal "npm install".
  2. Sur le terminal "réagit nativement sous Android". 

Cela fonctionne pour moi.

1
Masthan Vali Syed

J'ai rencontré le même problème et ai fait ce qui suit:

  1. lancez le projet avec react-native init - "version = 0.57.0" nomprojet.
  2. Sur index.js, changez AppRegistry.registerComponent(appName, () => App); en AppRegistry.registerComponent('the_name_you_have_given_on_your_project', () => App);
  3. Supprimer la ligne import {name as appName} from './app.json';
  4. exécuter avec react-native run-ios ou react-native run-Android
0
ToroLoco