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")
Related
I have been using redux-persist for about 6 months, it never happened but this time in my new project redux-persist is not working I don't know what's the reason. Please note that I cannot downgrade as I'll have to re-eject the project and I can't do that. Need a quick fix.
Any help will be appreciated. Thanks.
My Package.json
"dependencies": {
"#ptomasroos/react-native-multi-slider": "^1.0.0",
"#react-native-community/async-storage": "^1.5.1",
"native-base": "2.12.1",
"react": "16.8.6",
"react-native": "0.60.4",
"react-native-animatable": "^1.3.2",
"react-native-calendar-picker": "^6.0.1",
"react-native-calendar-strip": "^1.3.8",
"react-native-calendars": "^1.200.0",
"react-native-document-picker": "^3.2.4",
"react-native-gesture-handler": "^1.3.0",
"react-native-image-picker": "^1.0.1",
"react-native-linear-gradient": "^2.5.4",
"react-native-parallax-scroll-view": "^0.21.3",
"react-native-permissions": "^1.2.0",
"react-native-progress-bar-animated": "^1.0.6",
"react-native-ratings": "^6.3.1",
"react-native-render-html": "^4.1.2",
"react-native-scaling-drawer": "^1.0.1",
"react-native-snap-carousel": "^3.8.0",
"react-native-splash-screen": "^3.2.0",
"react-native-star-rating": "^1.1.0",
"react-native-toast": "^1.0.1",
"react-native-vector-icons": "^6.6.0",
"react-native-wheel-picker-android": "^2.0.5",
"react-navigation": "^3.11.1",
"react-redux": "^7.1.0",
"redux": "^4.0.4",
"redux-persist": "5.6.12",
"redux-thunk": "^2.3.0",
"rn-range-slider": "^1.2.5"
},
"devDependencies": {
"#babel/core": "7.5.5",
"#babel/runtime": "7.5.5",
"#react-native-community/eslint-config": "0.0.3",
"babel-jest": "24.8.0",
"eslint": "6.0.1",
"jest": "24.8.0",
"metro-react-native-babel-preset": "0.54.1",
"react-test-renderer": "16.8.6"
},
"jest": {
"preset": "react-native"
}
}
I was able to resolve this issue by adding "persist/REHYDRATE" action in my reduces, However I have no idea what this action does but resolved my issue
case "persist/REHYDRATE":{
return{
...action.payload.global
}
}
Where global is the name of my reduces
When I follow the instruction from https://reactnavigation.org/docs/en/getting-started.html
and run the application, I have this error
Requiring module "node_modules/react-native-gesture-handler/index.js", which threw an exception: TypeError:
"dependencies": {
"react": "^16.8.6",
"react-art": "^16.6.3",
"react-dom": "16.8.6",
"react-native": "^0.59.8",
"react-native-gesture-handler": "^1.2.2",
"react-native-modal-selector": "^1.0.3",
"react-native-vector-icons": "^6.1.0",
"react-native-web": "0.11.2",
"react-navigation": "^3.0.0"
},
"resolutions": {
"uglify-es": "3.2.2"
},
"devDependencies": {
"#types/jest": "24.0.12",
"#types/node": "^10.12.12",
"#types/react": "16.8.15",
"#types/react-dom": "^16.0.11",
"#types/react-native": "^0.57.60",
"#types/react-navigation": "^3.0.7",
"#types/react-test-renderer": "16.8.1",
"babel-jest": "24.7.1",
"jest": "24.7.1",
"metro-react-native-babel-preset": "0.50.0",
"prettier": "1.17.0",
"react-art": "16.8.6",
"react-native-typescript-transformer": "^1.2.10",
"react-scripts": "3.0.0",
"react-scripts-ts": "^3.1.0",
"react-test-renderer": "16.8.6",
"ts-jest": "24.0.2",
"tslint": "5.16.0",
"tslint-config-prettier": "1.18.0",
"typescript": "3.4.5"
},
You need to install react-native-gesture-handler package to make it works npm install --save react-native-gesture-handler and link it.
Complete installation guide can be found here: https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html
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.
Error screenshot
Error log on server
package.json code
"dependencies": {
"#babel/plugin-external-helpers": "^7.0.0",
"#types/events": "^1.2.0",
"#types/prop-types": "^15.5.5",
"#types/query-string": "^6.1.0",
"#types/react": "^16.4.14",
"#types/react-native": "^0.56.23",
"#types/react-native-drawer-layout": "^1.3.5",
"#types/react-navigation": "^2.0.21",
"antd-mobile-rn": "^2.2.1",
"axios": "^0.18.0",
"babel-plugin-import": "^1.9.1",
"events": "^3.0.0",
"mobx": "4.3.1",
"mobx-react": "^5.2.8",
"moment": "^2.22.2",
"query-string": "^6.1.0",
"react": "16.5.0",
"react-native": "0.57.0",
"react-native-image-zoom-viewer": "^2.2.18",
"react-native-keyboard-aware-scroll-view": "^0.7.2",
"react-native-simple-radio-button": "^2.7.3",
"react-native-swipeout": "^2.3.6",
"react-navigation": "^2.16.0"
},
"devDependencies": {
"babel-jest": "23.6.0",
"jest": "23.6.0",
"metro-react-native-babel-preset": "0.45.4",
"react-test-renderer": "16.5.0"
},
"jest": {
"preset": "react-native"
}
Check your .babelrc file it must have something like this
{
"presets": ["module:metro-react-native-babel-preset"]
}
I'm getting this error after updating react-native to "^0.56.0":
bundling failed: Error: Plugin/Preset files are not allowed to export objects, only functions. In /Users/ben/vepo/frontend/node_modules/babel-preset-flow/lib/index.js
I tried to do something similar to the highest voted answer here but instead for babel-preset-flow:
https://github.com/babel/babel-loader/issues/540
.babelrc:
"presets": ["react-native", "flow", "#babel/preset-flow"]
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/preset-flow": "^7.0.0-beta.52",
"#babel/preset-react": "^7.0.0-beta.52",
"babel-preset-react-native": "^4.0.0",
"flow-typed": "^2.4.0",
"generator-rn-toolbox": "^2.2.0",
"imagemagick": "^0.1.3",
"immutable": "4.0.0-rc.9",
"metro-bundler": "^0.22.1",
"native-base": "^2.3.3",
"prop-types": "^15.5.10",
"react": "16.3.1",
"react-native": "^0.56.0",
"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": "facebook/react-native-fbsdk#065507a",
"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-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",
"yarn": "^1.3.2",
"yoga": "^0.0.0"
},
"devDependencies": {
"adm-zip": "^0.4.7",
"babel-cli": "^6.26.0",
"babel-eslint": "^7.1.1",
"babel-plugin-module-resolver": "^2.7.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.72.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"
}
}
Nothing is working. Any ideas?
EDIT: there is no node_modules/babel-preset-flow folder at all
I had the same error and resolved it by uninstalling babel-preset-flow and installing #babel/preset-flow. I believe this is due to React Native 56 using Babel 7. And add to .babelrc
{
"presets": ["#babel/preset-flow"]
}
Upgrade your babel-preset-react-native dependency.
"babel-preset-react-native": "^5",
You don't need to have #babel/preset-react or #babel/preset-flow installed.
Hope this helps.
Open .babelrc file and then edit the presets section of the code as follows:
"presets": ["module:metro-react-native-babel-preset"],
I solved this issue by installing "babel-preset-react-native-stage-0" in my project and changed .babelrc file:
"presets": [
"babel-preset-react-native-stage-0/decorator-support"
]
for Babel 7 and above and according to this document create a file with name bable.config.js instead of .babelrc and then export presets like this :
const presets = [
"flow"
]
module.exports = {presets}