Related
I've updated react native to 0.59.5 and am getting this error:
bundling failed: TypeError: Cannot read property 'bindings' of null
at Scope.moveBindingTo (/Users/ben/vepo/frontend/node_modules/#babel/traverse/lib/scope/index.js:864:13)
at convertBlockScopedToVar (/Users/ben/vepo/frontend/node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:139:13)
at PluginPass.VariableDeclaration (/Users/ben/vepo/frontend/node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:26:9)
at newFn (/Users/ben/vepo/frontend/node_modules/#babel/traverse/lib/visitors.js:193:21)
at NodePath._call (/Users/ben/vepo/frontend/node_modules/#babel/traverse/lib/path/context.js:53:20)
at NodePath.call (/Users/ben/vepo/frontend/node_modules/#babel/traverse/lib/path/context.js:40:17)
at NodePath.visit (/Users/ben/vepo/frontend/node_modules/#babel/traverse/lib/path/context.js:88:12)
at TraversalContext.visitQueue (/Users/ben/vepo/frontend/node_modules/#babel/traverse/lib/context.js:118:16)
at TraversalContext.visitSingle (/Users/ben/vepo/frontend/node_modules/#babel/traverse/lib/context.js:90:19)
Ive seen solutions to upgrade babel-preset-react-native to 5.0.2. I've done that and it didn't work. Another solution was to use metro-react-native-babel-preset instead. That didn't work either. Another solution was to use #babel/preset-env. That didn't work either. I even commented out the code that the error is complaining about so I don't even know how it is giving the same error on that commented out line of code now...Any ideas?
package.json
{
"name": "vepo",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"rnpm": {
"assets": [
"./app/fonts"
]
},
"jest": {
"preset": "react-native",
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
"\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
}
},
"dependencies": {
"#babel/core": "^7.4.3",
"#babel/preset-env": "^7.4.3",
"babel-preset-react-native": "5.0.2",
"flow-typed": "^2.4.0",
"generator-rn-toolbox": "^2.2.0",
"imagemagick": "^0.1.3",
"immutable": "4.0.0-rc.9",
"list": "^2.0.15",
"metro-bundler": "^0.22.1",
"metro-react-native-babel-preset": "^0.53.1",
"native-base": "^2.3.3",
"prop-types": "^15.5.10",
"react": "16.8.3",
"react-native": "0.59.5",
"react-native-aws3": "^0.0.8",
"react-native-blur": "^3.1.3",
"react-native-check-box": "^2.1.0",
"react-native-communications": "^2.2.1",
"react-native-drawer": "^2.3.0",
"react-native-easy-toast": "^1.2.0",
"react-native-elements": "^0.19.1",
"react-native-fbsdk": "^0.8.0",
"react-native-gesture-handler": "1.0.12",
"react-native-git-upgrade": "^0.2.7",
"react-native-image-picker": "^0.26.7",
"react-native-interactable": "0.1.2",
"react-native-mail": "^3.0.2",
"react-native-maps": "^0.16.4",
"react-native-modal": "^2.3.2",
"react-native-modalbox": "^1.3.9",
"react-native-multiple-choice": "^0.0.8",
"react-native-navigation": "^1.1.100",
"react-native-off-canvas-menu": "^0.1.31",
"react-native-optimized-flatlist": "^1.0.1",
"react-native-redux-router": "^1.0.7",
"react-native-root-toast": "^3.0.2",
"react-native-select-multiple": "^1.0.3",
"react-native-side-menu": "^0.20.1",
"react-native-vector-icons": "^5.0.0",
"react-navigation": "3.0.8",
"react-navigation-tabs": "^1.0.1",
"react-redux": "^5.0.3",
"redux": "^3.6.0",
"redux-immutable": "^4.0.0",
"redux-observable": "^0.14.1",
"redux-thunk": "^2.3.0",
"reselect": "^3.0.0",
"rxjs": "^5.2.0",
"yarn": "^1.3.2",
"yoga": "^0.0.0"
},
"devDependencies": {
"adm-zip": "^0.4.11",
"babel-cli": "^6.26.0",
"babel-eslint": "^7.1.1",
"babel-plugin-module-resolver": "^2.7.0",
"babel-preset-flow": "^6.23.0",
"eslint": "^3.17.0",
"eslint-config-prettier": "^2.9.0",
"eslint-plugin-flowtype": "^2.30.3",
"eslint-plugin-jsx": "^0.0.2",
"eslint-plugin-react": "^6.10.0",
"eslint-plugin-react-native": "^2.3.1",
"flow-bin": "^0.75.0",
"plist": "^2.1.0",
"react-devtools": "^3.2.1",
"react-test-renderer": "~15.4.1",
"redux-devtools": "^3.3.2",
"remote-redux-devtools": "^0.5.7",
"remotedev-server": "^0.2.4",
"xcode": "^1.0.0"
}
}
.babelrc
{
"presets": ["#babel/preset-env"]
}
When I restarted my computer it worked.
code that worked:
.babelrc
{
"presets": ["module:metro-react-native-babel-preset"]
}
package.json
{
"name": "vepo",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"rnpm": {
"assets": [
"./app/fonts"
]
},
"jest": {
"preset": "react-native",
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
"\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
}
},
"dependencies": {
"#babel/core": "^7.4.3",
"#babel/preset-env": "^7.4.3",
"babel-preset-react-native": "5.0.2",
"flow-typed": "^2.4.0",
"generator-rn-toolbox": "^2.2.0",
"imagemagick": "^0.1.3",
"immutable": "4.0.0-rc.9",
"list": "^2.0.15",
"metro-bundler": "^0.22.1",
"metro-react-native-babel-preset": "^0.53.1",
"native-base": "2.12.1",
"prop-types": "^15.5.10",
"react": "16.8.3",
"react-native": "0.59.5",
"react-native-aws3": "^0.0.8",
"react-native-blur": "^3.1.3",
"react-native-check-box": "^2.1.0",
"react-native-communications": "^2.2.1",
"react-native-drawer": "^2.3.0",
"react-native-easy-toast": "^1.2.0",
"react-native-elements": "^0.19.1",
"react-native-fbsdk": "^0.8.0",
"react-native-gesture-handler": "1.0.12",
"react-native-git-upgrade": "^0.2.7",
"react-native-image-picker": "^0.26.7",
"react-native-interactable": "0.1.2",
"react-native-mail": "^3.0.2",
"react-native-maps": "^0.16.4",
"react-native-modal": "^2.3.2",
"react-native-modalbox": "^1.3.9",
"react-native-multiple-choice": "^0.0.8",
"react-native-navigation": "^1.1.100",
"react-native-off-canvas-menu": "^0.1.31",
"react-native-optimized-flatlist": "^1.0.1",
"react-native-redux-router": "^1.0.7",
"react-native-root-toast": "^3.0.2",
"react-native-select-multiple": "^1.0.3",
"react-native-side-menu": "^0.20.1",
"react-native-vector-icons": "^5.0.0",
"react-navigation": "3.0.8",
"react-navigation-tabs": "^1.0.1",
"react-redux": "^5.0.3",
"react-timer-mixin": "^0.13.4",
"redux": "^3.6.0",
"redux-immutable": "^4.0.0",
"redux-observable": "^0.14.1",
"redux-thunk": "^2.3.0",
"reselect": "^3.0.0",
"rxjs": "^5.2.0",
"yarn": "^1.3.2",
"yoga": "^0.0.0"
},
"devDependencies": {
"adm-zip": "^0.4.11",
"babel-cli": "^6.26.0",
"babel-eslint": "^7.1.1",
"babel-plugin-module-resolver": "^2.7.0",
"babel-preset-flow": "^6.23.0",
"eslint": "^3.17.0",
"eslint-config-prettier": "^2.9.0",
"eslint-plugin-flowtype": "^2.30.3",
"eslint-plugin-jsx": "^0.0.2",
"eslint-plugin-react": "^6.10.0",
"eslint-plugin-react-native": "^2.3.1",
"flow-bin": "^0.75.0",
"plist": "^2.1.0",
"react-devtools": "^3.2.1",
"react-test-renderer": "~15.4.1",
"redux-devtools": "^3.3.2",
"remote-redux-devtools": "^0.5.7",
"remotedev-server": "^0.2.4",
"xcode": "^1.0.0"
}
}
all my test using react-test-renderer or enzyme break after upgrading to react-native 0.58.6
Errors I got are e.g.
TypeError: Cannot read property 'default' of undefined
Expected value to be truthy, instead received undefined
TypeError: Cannot read property 'dive' of undefined
TypeError: Cannot read property 'find' of undefined
Has someone experienced a similar behaviour? I tried different versions of enzyme, or jest but hat no luck.
my dependencies:
"dependencies": {
"firebase": "^5.9.0",
"prop-types": "^15.6.0",
"react": "16.6.3",
"react-native": "0.58.6",
"react-native-code-push": "^5.5.2",
"react-native-image-picker": "^0.28.0",
"react-native-keychain": "^3.0.0",
"react-native-paper": "^1.12.0",
"react-native-vector-icons": "^6.4.1",
"react-navigation": "^1.6.1",
"react-redux": "^5.0.7",
"redux": "^3.7.2",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0",
"yarn": "^1.9.4"
},
"devDependencies": {
"babel-eslint": "^8.2.2",
"babel-jest": "^23.6.0",
"enzyme": "^3.8.0",
"enzyme-adapter-react-16": "^1.7.1",
"eslint": "^4.18.1",
"eslint-config-airbnb": "^16.1.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.12.3",
"husky": "^0.14.3",
"jest": "^23.6.0",
"jest-fetch-mock": "^2.1.0",
"lint-staged": "^7.2.2",
"metro-react-native-babel-preset": "^0.53.1",
"prettier": "1.10.2",
"react-dom": "^16.7.0",
"react-test-renderer": "^16.7.0",
"redux-mock-store": "^1.5.3"
},
"jest": {
"preset": "react-native",
"setupFiles": ["<rootDir>/tests/setup.js"],
"collectCoverageFrom": ["app/**/*.js", "!app/components/index.js"],
"transform": {
"^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
},
"transformIgnorePatterns": [
"node_modules/(?!(jest-)?react-native|react-navigation)"
]
}
reproducer
https://github.com/defrian/TestProject.git
I solved the issue by removing
"transform": {
"^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
},
from the package.json
solution found here https://github.com/facebook/react-native/issues/22175#issuecomment-474786382
i also added/updated some dev dependencies:
"babel-core": "^7.0.0-bridge.0", (new)
"babel-jest": "24.5.0", (from "^23.6.0")
"enzyme": "^3.9.0", (from "^3.8.0")
"enzyme-adapter-react-16": "^1.11.2", (from "^1.7.1")
"jest": "^24.5.0", (from "^23.6.0")
"react-test-renderer": "^16.8.4", (from "^16.7.0")
I am trying to upgrade my app from react native 0.56 to 0.57.3, but I'm getting the following issue when my app is loading:
error: bundling failed: Error: Plugin/Preset files are not allowed to export objects, only functions. In /Users/otaviogaiao/Projetos/citsmart/citsmart-itsm-mobile-field-service/node_modules/babel-preset-react-native/index.js
at createDescriptor (/Users/otaviogaiao/Projetos/citsmart/citsmart-itsm-mobile-field-service/node_modules/#babel/core/lib/config/config-descriptors.js:178:11)
at items.map (/Users/otaviogaiao/Projetos/citsmart/citsmart-itsm-mobile-field-service/node_modules/#babel/core/lib/config/config-descriptors.js:109:50)
at Array.map (<anonymous>)
at createDescriptors (/Users/otaviogaiao/Projetos/citsmart/citsmart-itsm-mobile-field-service/node_modules/#babel/core/lib/config/config-descriptors.js:109:29)
at createPresetDescriptors (/Users/otaviogaiao/Projetos/citsmart/citsmart-itsm-mobile-field-service/node_modules/#babel/core/lib/config/config-descriptors.js:101:10)
at presets (/Users/otaviogaiao/Projetos/citsmart/citsmart-itsm-mobile-field-service/node_modules/#babel/core/lib/config/config-descriptors.js:47:19)
at mergeChainOpts (/Users/otaviogaiao/Projetos/citsmart/citsmart-itsm-mobile-field-service/node_modules/#babel/core/lib/config/config-chain.js:315:26)
at /Users/otaviogaiao/Projetos/citsmart/citsmart-itsm-mobile-field-service/node_modules/#babel/core/lib/config/config-chain.js:278:7
at mergeExtendsChain (/Users/otaviogaiao/Projetos/citsmart/citsmart-itsm-mobile-field-service/node_modules/#babel/core/lib/config/config-chain.js:294:21)
I have tried deleting node_modules, cleaning the build folder, etc.
My package.json file is:
"dependencies": {
"axios": "^0.18.0",
"date-fns": "^1.29.0",
"lodash.intersection": "^4.4.0",
"lodash.isempty": "^4.4.0",
"lodash.pick": "^4.4.0",
"normalizr": "^3.2.4",
"prop-types": "^15.6.1",
"react": "16.5",
"react-native": "0.57.3",
"react-native-actionsheet": "^2.4.2",
"react-native-code-push": "^5.4.2",
"react-native-datepicker": "^1.7.2",
"react-native-elements": "^0.19.1",
"react-native-geolocation-service": "^1.1.0",
"react-native-i18n": "^2.0.12",
"react-native-image-picker": "^0.26.10",
"react-native-map-link": "^2.0.1",
"react-native-maps": "git+https://github.com/otaviogaiao/react-native-maps#master",
"react-native-maps-super-cluster": "git+https://github.com/otaviogaiao/react-native-maps-super-cluster.git#1.4.2",
"react-native-material-dropdown": "^0.11.1",
"react-native-modal": "^6.5.0",
"react-native-nested-scroll-view": "^7.0.0",
"react-native-responsive-screen": "^1.1.6",
"react-native-splash-screen": "3.0.9",
"react-native-sqlite-storage": "^3.3.5",
"react-native-text-input-mask": "^0.7.0",
"react-native-vector-icons": "^4.6.0",
"react-navigation": "2.0.4",
"react-navigation-redux-helpers": "1.1.2",
"react-redux": "^5.0.7",
"redux": "^4.0.0",
"redux-logger": "^3.0.6",
"redux-persist": "^5.10.0",
"redux-saga": "^0.16.0",
"remove-accents": "^0.4.2",
"rn-fetch-blob": "^0.10.13",
"url": "^0.11.0"
},
"devDependencies": {
"#babel/core": "^7.0.0",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^8.2.3",
"babel-jest": "22.4.4",
"eslint": "^4.19.1",
"eslint-config-airbnb": "^16.1.0",
"eslint-plugin-import": "^2.12.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-prettier": "^2.6.0",
"eslint-plugin-react": "^7.8.2",
"jest": "22.4.4",
"metro-react-native-babel-preset": "^0.45.0",
"prettier": "1.12.1",
"prettier-eslint": "^8.8.1",
"react-test-renderer": "16.5"
},
and this is my .babelrc file:
{
"presets": [
"react-native",
"module:metro-react-native-babel-preset"
],
"env": {
"development": {
"plugins": [
"#babel/plugin-transform-react-jsx-source"
]
}
},
"retainLines": true
}
I looked around for answers, but couldn't find anything that helped me.
Any help is appreciated.
I'm getting this error:
The development server returned response 404. Cannot find entry file
index.js.
Here is my folder structure:
package.json
{
"name": "vepo",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"rnpm": {
"assets": [
"./app/fonts"
]
},
"jest": {
"preset": "react-native",
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
"\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
}
},
"dependencies": {
"flow-typed": "^2.0.0",
"generator-rn-toolbox": "^2.2.0",
"imagemagick": "^0.1.3",
"immutable": "^3.8.1",
"native-base": "2.3.0",
"prop-types": "^15.5.10",
"react": "16.0.0",
"react-native": "0.50.3",
"react-native-aws3": "^0.0.8",
"react-native-blur": "^3.1.3",
"react-native-communications": "^2.2.1",
"react-native-drawer": "^2.3.0",
//"react-native-fbsdk": "git://github.com/facebook/react-native-fbsdk#065507aa1d2b8b0b6cb50d13117694123f8303fa",
"react-native-git-upgrade": "^0.2.7",
"react-native-image-picker": "^0.26.4",
"react-native-interactable": "^0.1.2",
"react-native-mail": "^3.0.2",
"react-native-maps": "^0.16.4",
"react-native-modal": "^2.3.2",
"react-native-modalbox": "^1.3.9",
"react-native-multiple-choice": "^0.0.8",
"react-native-navigation": "^1.1.100",
"react-native-off-canvas-menu": "^0.1.31",
"react-native-optimized-flatlist": "^1.0.1",
"react-native-redux-router": "^1.0.7",
"react-native-select-multiple": "^1.0.3",
"react-native-side-menu": "^0.20.1",
"react-native-vector-icons": "^4.4.0",
"react-navigation": "^1.0.0-beta.11",
"react-redux": "^5.0.3",
"redux": "^3.6.0",
"redux-immutable": "^4.0.0",
"redux-observable": "^0.14.1",
"reselect": "^3.0.0",
"rxjs": "^5.2.0",
"yoga": "^0.0.0"
},
"devDependencies": {
"babel-eslint": "^7.1.1",
"babel-jest": "19.0.0",
"babel-plugin-module-resolver": "^2.7.0",
"babel-preset-react-native": "3.0.1",
"eslint": "^3.17.0",
"eslint-plugin-flowtype": "^2.30.3",
"eslint-plugin-jsx": "^0.0.2",
"eslint-plugin-react": "^6.10.0",
"eslint-plugin-react-native": "^2.3.1",
"flow-bin": "^0.42.0",
"jest": "19.0.2",
"jest-cli": "^19.0.2",
"react-test-renderer": "~15.4.1",
"redux-devtools": "^3.3.2",
"remote-redux-devtools": "^0.5.7"
}
}
What am I doing wrong, to cause that error?
Create an index.js file in root directory of your project and copy your index.android.js or index.ios.js into it.
after RN 49 by default, we don't have different entries for ios and android. so we have just one index.js file that both android and ios use it.
I am getting a syntax error when running my react native app on iOS 10.2 iPhone 7 Plus simulator and iPhone 7 Plus physical device but not on iPhone 7. I have to idea where to begin looking for problem.
Here is my package.json file.
{
"name": "NativeProject",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "webpack-dev-server --progress --colors --hot --inline --host 0.0.0.0 --port 3000",
"test": "jest",
"build": "webpack -p"
},
"rnpm": {
"assets": [
"fonts"
]
},
"jest": {
"preset": "jest-react-native",
"globals": {
"__DEV__": true
}
},
"dependencies": {
"babel-cli": "^6.22.2",
"babel-core": "^6.22.1",
"babel-jest": "^18.0.0",
"babel-loader": "^6.2.4",
"babel-polyfill": "^6.22.0",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.22.0",
"babel-preset-react-native": "^1.9.1",
"babel-preset-stage-2": "^6.22.0",
"classnames": "^2.2.5",
"crypto-js": "^3.1.9-1",
"css-loader": "^0.26.1",
"express": "^4.14.1",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.10.0",
"firebase": "^3.6.8",
"font-awesome": "^4.7.0",
"html-webpack-plugin": "^2.28.0",
"jest": "^18.0.0",
"jest-react-native": "^18.0.0",
"json-loader": "^0.5.4",
"moment": "^2.17.1",
"postcss": "^5.2.11",
"postcss-cssnext": "^2.9.0",
"postcss-import": "^9.0.0",
"postcss-loader": "^1.2.1",
"react": "^15.4.2",
"react-addons-css-transition-group": "^15.4.1",
"react-dom": "^15.4.1",
"react-native": "^0.41.1",
"react-native-calendar": "^0.10.0",
"react-native-calendar-picker": "^3.0.0",,
"react-native-cli": "^2.0.1",
"react-native-fbsdk": "^0.5.0",
"react-native-google-places-autocomplete": "^1.2.7",
"react-native-sglistview": "^0.3.2",
"react-native-swipeout": "git+https://github.com/magrinj/react-native-swipeout.git",
"react-native-vector-icons": "^4.0.0",
"react-native-video": "1.0.0",
"react-redux": "^5.0.2",
"react-router": "^3.0.2",
"react-test-renderer": "^15.4.1",
"redux": "^3.6.0",
"redux-logger": "^2.8.1",
"redux-mock-store": "^1.2.2",
"redux-thunk": "^2.2.0",
"reselect": "^2.5.4",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.3.0"
},
"devDependencies": {
"extract-text-webpack-plugin": "^2.0.0-rc.3"
}
}