从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 这是App.js文件中的内容
{
"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/"
]
}
}
Index.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>
);
}
}
**。babelrc :: **
{ “预设”:[ “反应性的” ] }
我尝试了以下链接解决方案,但这些解决方案都无法解决此问题
答案 0 :(得分:3)
{ “预设”:[ “模块:Metro-React-Native-Babel预设” ] }
这对我有用。
答案 1 :(得分:0)
我也遇到了同样的问题,并且做了以下事情:
AppRegistry.registerComponent(appName, () => App);
更改为AppRegistry.registerComponent('the_name_you_have_given_on_your_project', () => App);
import {name as appName} from './app.json';
react-native run-ios
或react-native run-android