Im trying to run this React native app and after installing its dependencies (npm install) and running the app with react-native run-android I am getting this error:
After googling this error I found this: Solution attempt
Which says that I should upgrade the material-ui library.
After updating to the version 1.30.1 of the library I get the same error.
Here is my package.json:
{
"name": "name",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"#ptomasroos/react-native-multi-slider": "^0.0.11",
"moment": "^2.20.1",
"react": "16.0.0",
"react-native": "0.50.3",
"react-native-drawer-layout-polyfill": "^2.0.0",
"react-native-fbsdk": "^0.7.0",
"react-native-gesture-handler": "^1.0.0-alpha.41",
"react-native-image-picker": "^0.26.7",
"react-native-image-resizer": "^1.0.0",
"react-native-maps": "^0.17.1",
"react-native-material-dropdown": "^0.7.1",
"react-native-material-ui": "^1.30.1",
"react-native-modal-datetime-picker": "^5.1.0",
"react-native-router-flux": "^4.0.0-beta.28",
"react-native-star-rating": "^1.0.8",
"react-native-tab-view": "0.0.70",
"react-native-vector-icons": "^4.5.0",
"react-redux": "^5.0.6",
"redux": "^3.7.2",
"redux-persist": "4.8.2",
"redux-thunk": "^2.2.0"
},
"devDependencies": {
"babel-jest": "22.1.0",
"babel-preset-react-native": "4.0.0",
"jest": "22.1.4",
"react-test-renderer": "16.0.0"
},
"jest": {
"preset": "react-native"
},
"rnpm": {
"assets": [
"./fuentes/"
]
}
}
What can I do to fix this error?
To fix this I updated my React and React Native versions to the latest available.
Related
I keep getting export * from #react-navigation/core. Unexpected token export whenever I try to run my test for my project :
https://github.com/MatTaNg/React-Native
(run npm i && npm run test:watch [don't worry npm i doesn't take long its a small project])
Here's my package.json
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"test": "jest",
"test:watch": "npm run test -- --watchAll"
},
"dependencies": {
"#types/jest": "^26.0.8",
"#types/node": "^14.0.27",
"expo": "~38.0.8",
"expo-status-bar": "^1.0.2",
"react": "~16.11.0",
"react-dom": "~16.11.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
"react-native-gesture-handler": "^1.7.0",
"react-native-reanimated": "^1.10.1",
"react-native-responsive-screen": "^1.4.1",
"react-native-router-flux": "^4.2.0",
"react-native-screens": "^2.9.0",
"react-native-web": "~0.11.7",
"react-test-renderer": "^16.13.1"
},
"devDependencies": {
"#babel/core": "^7.8.6",
"#testing-library/jest-native": "^3.3.0",
"#testing-library/react-native": "^7.0.1",
"#types/react": "~16.9.41",
"#types/react-native": "~0.62.13",
"jest": "^26.2.2",
"typescript": "~3.9.5"
},
"transformIgnorePatterns": [
"node_modules/(?!(jest-)?react-native)",
"node_modules/?!(react-navigation)"
],
"jest": {
"preset": "react-native"
},
"private": true
}
I'm just not able to figure this out. Something with react-navigation core is messing everything up I think.
Another, separate issue is that for some reason the HTML (jsx) isn't showing up on my mobile device (IOS) but its working fine in the browser. Seems like its just ignoring all the html inside my route.
EDIT:
I've followed the docs https://docs.expo.io/guides/testing-with-jest/
I've just added this to my package.json:
"jest": {
"preset": "react-native",
"transformIgnorePatterns": [
"node_modules/(?!(jest-)?react-native|react-clone-referenced-element|#react-native-community|expo(nent)?|#expo(nent)?/.*|react-navigation|#react-navigation/.*|#unimodules/.*|unimodules|sentry-expo|native-base|#sentry/.*)"
]
},
But now I'm getting this error when I run my test:
you are using expo therefore, you need to install expo-jest and use "preset": "jest-expo"
yarn add jest-expo --dev
package.json
"scripts": {
...
"test": "jest"
},
"jest": {
"preset": "jest-expo"
}
Here is DOCS for Expo jest. so, change expo jest configuration according to docs like below.
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"test": "jest",
"test:watch": "npm run test -- --watchAll"
},
"dependencies": {
"#types/jest": "^26.0.8",
"#types/node": "^14.0.27",
"expo": "~38.0.8",
"expo-status-bar": "^1.0.2",
"react": "~16.11.0",
"react-dom": "~16.11.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
"react-native-gesture-handler": "^1.7.0",
"react-native-reanimated": "^1.10.1",
"react-native-responsive-screen": "^1.4.1",
"react-native-router-flux": "^4.2.0",
"react-native-screens": "^2.9.0",
"react-native-web": "~0.11.7",
"react-test-renderer": "^16.13.1"
},
"devDependencies": {
"#babel/core": "^7.8.6",
"#testing-library/jest-native": "^3.3.0",
"#testing-library/react-native": "^7.0.1",
"#types/react": "~16.9.41",
"#types/react-native": "~0.62.13",
"jest": "^26.2.2",
"typescript": "~3.9.5",
"jest-expo": "^38.0.0"
},
"jest": {
"preset": "jest-expo",
"transformIgnorePatterns": [
"node_modules/(?!(jest-)?react-native|react-clone-referenced-element|#react-native-community|expo(nent)?|#expo(nent)?/.*|react-navigation|#react-navigation/.*|#unimodules/.*|unimodules|sentry-expo|native-base|#sentry/.*)"
]
},
"private": true
}
hope this will help you
so i am trying to run this react-native app built on expo i am having trouble configuring things.
here's my .babelrc
{
"presets": ["#babel/preset-env","#babel/react"],
"plugins": [
"#babel/plugin-proposal-class-properties"
]
}
my package.json
{
"name": "APP NAME",
"version": "0.1.0",
"private": true,
"devDependencies": {
"#babel/preset-react": "^7.9.4",
"babel-eslint": "^10.0.1",
"babel-preset-env": "^1.7.0",
"eslint": "^5.7.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jest": "^21.25.1",
"eslint-plugin-jsx-a11y": "^6.1.2",
"eslint-plugin-react": "^7.11.1",
"jest-expo": "^37.0.0",
"react-native-debugger-open": "^0.3.17",
"react-native-scripts": "1.11.1",
"react-test-renderer": "16.2.0"
},
"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
"scripts": {
"start": "react-native-scripts start",
"eject": "react-native-scripts eject",
"android": "react-native-scripts android",
"lint": "eslint --ignore-path .gitignore .",
"lint:fix": "eslint --fix --ignore-path .gitignore .",
"ios": "react-native-scripts ios",
"test": "node node_modules/jest/bin/jest.js",
"debug": "open 'rndebugger://set-debugger-loc?host=localhost&port=19001'"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"#react-native-community/viewpager": "^3.3.0",
"axios": "^0.18.0",
"babel-preset-react-native": "^4.0.1",
"date-fns": "^1.29.0",
"enzyme": "^3.7.0",
"enzyme-adapter-react-16": "^1.6.0",
"expo": "^37.0.0",
"lodash": "^4.17.10",
"prop-types": "^15.6.2",
"react": "16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
"react-native-app-intro-slider": "^0.2.4",
"react-native-chart-kit": "^1.2.1",
"react-native-datepicker": "^1.7.2",
"react-native-hr-component": "^1.0.6",
"react-native-mock-render": "^0.1.2",
"react-native-modal-datetime-picker": "^6.0.0",
"react-native-paystack": "^3.1.4",
"react-native-picker-select": "^5.1.0",
"react-native-scrollable-tab-view": "^1.0.0",
"react-native-tab-view": "^2.14.0",
"react-native-vector-icons": "^4.6.0",
"react-native-webview-bridge": "^0.33.0",
"react-navigation": "^2.9.3",
"react-redux": "^5.0.7",
"redux": "^4.0.0",
"redux-devtools-extension": "^2.13.5",
"redux-logger": "^3.0.6",
"redux-mock-store": "^1.5.3",
"redux-persist": "^5.10.0",
"redux-thunk": "^2.2.0",
"styled-components": "^3.2.3",
"whatwg-fetch": "^2.0.4"
}
}
so at first i had an error like
node_modules/react-native-scrollable-tab-view/node_modules/#react-native-community/viewpager/js/index.js: Plugin/Preset files are not allowed to export objects, only functions. In node_modules/babel-preset-expo/index.js
this got fixed when i remove "babel-preset-expo" from my .babelrc and replaced it with the above content now i am having another error like this:
SyntaxError: /node_modules/react-native-scrollable-tab-view/node_modules/#react-native-community/viewpager/js/index.js: Unexpected token (10:12)
8 | */
9 |
> 10 | import type {PageScrollState as _PageScrollState} from './types';
| ^
11 | import type {PageScrollEvent as _PageScrollEvent} from './types';
12 | import type {PageScrollStateChangedEvent as _PageScrollStateChangedEvent} from './types';
13 | import type {PageSelectedEvent as _PageSelectedEvent} from './types';
Failed building JavaScript bundle
so any ideas why this is happening and how to fix it would be appreciated. Thanks
EDIT:
okay so i have added "react-native" to the babel presets array and the previous error i gone but now i got a new error saying:
node_modules/react-navigation-deprecated-tab-navigator/node_modules/react-native-tab-view/src/TabViewPagerExperimental.js: Cannot read property 'bindings' of null
If there is no .babel.rc present, you can create your own. Add whatever else you may need in there just as you would with .babelrc and it should work. I tried this out yesterday on my Expo managed RN app and it seems to have worked.
// Filename: .babelrc
{
"presets": ["babel-preset-expo"],
"plugins": ["transform-decorators-legacy"],
"env": {
"development": {
"plugins": ["transform-react-jsx-source"]
}
}
}
Edit: This was initial answer...
Expo can be created with two workflows. You would get a .babelrc for a bare workflow, and a babel.config.js for a managed workflow.
If you have "babel.config.js" you could try the following instead of worrying about .babelrc
module.exports = function (api) {
api.cache(true);
return {
presets: ["babel-preset-expo"],
plugins: ["babel-plugin-proposal-class-properties"]
};
};
Created a new project on react native 0.61.4
Copied the screens and functionality from previous project which was on 0.55.4.
Everything is build but the bundling is failed with the following errors:
error: bundling failed: Error: Unable to resolve module child_process from node_modules\jest-changed-files\node_modules\execa\index.js: child_process could not be found within the project.
Error: Bundling failed
Package.json:
{
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"execa": "^3.2.0",
"jest-changed-files": "^24.9.0",
"mockjs": "^1.1.0",
"moment": "^2.24.0",
"native-base": "^2.13.8",
"react": "16.9.0",
"react-moment": "^0.9.6",
"react-month-picker": "^1.3.11",
"react-native": "0.61.4",
"react-native-datepicker-dialog": "0.0.9",
"react-native-gesture-handler": "^1.5.0",
"react-native-image-slider-show": "^1.0.3",
"react-native-keyboard-aware-scroll-view": "^0.9.1",
"react-native-linear-gradient": "^2.5.6",
"react-native-modal-datetime-picker": "^7.6.0",
"react-native-month-selector": "^1.4.0",
"react-native-responsive-screen": "^1.3.0",
"react-native-simple-table": "0.0.3",
"react-native-slideshow": "^1.0.1",
"react-native-spinkit": "^1.5.0",
"react-native-svg": "^9.13.3",
"react-native-swipe-gestures": "^1.0.4",
"react-navigation": "^4.0.10",
"react-navigation-stack": "^1.10.3",
"react-time-picker": "^3.7.2"
},
"devDependencies": {
"#babel/core": "^7.6.4",
"#babel/runtime": "^7.6.3",
"#react-native-community/eslint-config": "^0.0.5",
"babel-jest": "^24.9.0",
"eslint": "^6.6.0",
"jest": "^24.9.0",
"metro-react-native-babel-preset": "^0.57.0",
"path": "^0.12.7",
"react-test-renderer": "16.9.0"
},
"jest": {
"preset": "react-native"
},
"browser": { "child_process": false }
}
Any help would be appreciated!
Please clean your project then run project.Some library is not adding by autolinking fearure so please check and add properly like firebase library need to add manually.I attached some screenshot so please check.
Check in any of the files you were working on recently and be sure you are not mistakenly importing child_process somewhere. In my case it was process as shown in the image above.
I am trying to make ESLint and Prettier work for days but whatever I do, nothing changes.
I don't even know what I installed globally but here is my project's local package.json
{
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.0.4",
"babel-preset-react-native": "4.0.0",
"global": "^4.3.2",
"react": "16.5.0",
"react-native": "0.57.2",
"react-native-linear-gradient": "^2.4.0",
"react-native-navigation": "^1.1.488",
"react-native-snap-carousel": "^3.7.5",
"react-native-vector-icons": "^6.0.2",
"react-navigation": "^2.17.0"
},
"devDependencies": {
"babel-eslint": "^10.0.1",
"babel-jest": "23.6.0",
"eslint-config-prettier": "^3.1.0",
"eslint-plugin-prettier": "^3.0.0",
"jest": "23.6.0",
"prettier": "^1.14.3",
"react-test-renderer": "16.5.0"
},
"jest": {
"preset": "react-native"
}
}
my .eslintrc contains
{
"extends": ["react-app", "plugin:prettier/recommended"]
}
And output in ESLint section says
[Error - 1:15:10 PM] Cannot find module 'eslint-plugin-prettier' Referenced from: /Users/me/project/.eslintrc
I have VSCode settings adjusted, so that is fine, but this simple doesn't work.
I believe you're missing the main eslint package.
Can you try adding this to your package.json
"eslint": "^5.8.0",
Installing all required packages wasn't enough for me, I also had to restart my IDE (Webstorm).
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}