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
Related
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"]
};
};
Hey I Have been trying to add #observer to my react component but this error occurs : Support for the experimental syntax 'decorators-legacy' isn't currently enabled here are the steps I have taken:
1.npm install mobx --save and npm i mobx mobx-react --save
tried using observable did not work
added
[
require(‘#babel/plugin-proposal-decorators’).default,
{
legacy: true
}
],
didn't work so i removed it
Created .babelrc in at the root directory and added
{
"presets": ["react-native"],
"plugins": [
[
"#babel/plugin-proposal-decorators",
{
"legacy": true
}
]
]
}
and still not working
Editing:
I did what you just said and same error:
when I npm start -- --reset-cache, this appears on my terminal, maybe it might help:
Emitted 'error' event at:
at Server.WebSocketServer._onServerError (/Users/red/mApp/node_modules/ws/lib/WebSocketServer.js:82:50)
at Server.emit (events.js:202:15)
at emitErrorNT (net.js:1283:8)
at processTicksAndRejections (internal/process/next_tick.js:76:17)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! mapp#0.0.1 start: `node node_modules/react-native/local-cli/cli.js start "--reset-cache"`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the mapp#0.0.1 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
Package.json file
{
"name": "mapp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"#expo/vector-icons": "^10.0.2",
"babel-plugin-mobx-deep-action": "^1.6.1",
"jetifier": "^1.6.3",
"jsc-android": "241213.x.x",
"mobx": "^5.11.0",
"mobx-react": "^6.1.1",
"react": "16.8.3",
"react-native": "^0.59.10",
"react-native-background-fetch": "^2.6.0",
"react-native-background-geolocation": "^3.0.7",
"react-native-css-gradient": "^0.3.1",
"react-native-gesture-handler": "^1.3.0",
"react-native-ionicons": "^4.5.6",
"react-native-linear-gradient": "react-native-community/react-native-linear-gradient",
"react-native-maps": "^0.24.2",
"react-native-responsive-screen": "^1.2.2",
"react-native-svg": "^9.5.2",
"react-native-svg-transformer": "^0.13.0",
"react-native-vector-icons": "^6.5.0",
"react-native-vertical-tab-view": "^0.1.3",
"react-navigation": "^3.11.0",
"react-redux": "^7.1.0",
"redux": "^4.0.1"
},
"devDependencies": {
"#babel/core": "7.4.5",
"#babel/plugin-proposal-decorators": "^7.4.4",
"#babel/runtime": "7.4.5",
"babel-jest": "24.8.0",
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"jest": "24.8.0",
"metro-react-native-babel-preset": "0.54.1",
"react-test-renderer": "16.8.3",
"redux-devtools": "^3.5.0"
},
"jest": {
"preset": "react-native"
}
}
You have to add plugin-proposal-decorators in babel.config.js
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [['#babel/plugin-proposal-decorators', { legacy: true }]],
};
Add "babel-preset-react-native": "4.0.0", and reset cache
{
"name": "mapp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"#expo/vector-icons": "^10.0.2",
"babel-plugin-mobx-deep-action": "^1.6.1",
"jetifier": "^1.6.3",
"jsc-android": "241213.x.x",
"mobx": "^5.11.0",
"mobx-react": "^6.1.1",
"react": "16.8.3",
"react-native": "^0.59.10",
"react-native-background-fetch": "^2.6.0",
"react-native-background-geolocation": "^3.0.7",
"react-native-css-gradient": "^0.3.1",
"react-native-gesture-handler": "^1.3.0",
"react-native-ionicons": "^4.5.6",
"react-native-linear-gradient": "react-native-community/react-native-linear-gradient",
"react-native-maps": "^0.24.2",
"react-native-responsive-screen": "^1.2.2",
"react-native-svg": "^9.5.2",
"react-native-svg-transformer": "^0.13.0",
"react-native-vector-icons": "^6.5.0",
"react-native-vertical-tab-view": "^0.1.3",
"react-navigation": "^3.11.0",
"react-redux": "^7.1.0",
"redux": "^4.0.1"
},
"devDependencies": {
"#babel/core": "7.4.5",
"#babel/plugin-proposal-decorators": "^7.4.4",
"#babel/runtime": "7.4.5",
"babel-jest": "24.8.0",
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"jest": "24.8.0",
"metro-react-native-babel-preset": "0.54.1",
"react-test-renderer": "16.8.3",
"redux-devtools": "^3.5.0"
},
"jest": {
"preset": "react-native"
}
}
Just upgraded my react-native project from version 0.46.4 to 0.60.0 using yarn or npm and run with visual studio code result following error.
[Error] Error: Can't get fulfillment value from any promise, all promises were rejected.
This is my old package.json:
{
"name": "ShoppingApp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"native-base": "2.2.1",
"react": "16.0.0-alpha.12",
"react-native": "0.46.4",
"react-native-grid-view": "https://github.com/lucholaf/react-native-grid-view.git",
"react-native-scalable-image": "https://github.com/ihor/react-native-scalable-image.git",
"react-native-tabbar-bottom": "^1.0.4",
"react-native-numeric-input": "^1.8.0",
"react-navigation": "https://github.com/Maxeh/react-navigation.git",
"rn-viewpager": "https://github.com/zbtang/React-Native-ViewPager.git"
},
"devDependencies": {
"babel-jest": "21.0.0",
"babel-preset-react-native": "3.0.2",
"jest": "21.0.1",
"react-test-renderer": "16.0.0-alpha.12"
},
"jest": {
"preset": "react-native"
}
}
And my new package.json here
{
"name": "ShoppingApp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"native-base": "^2.12.1",
"react": "^16.8.6",
"react-native": "^0.60.0",
"react-native-grid-view": "^0.4.1",
"react-native-i18n": "^2.0.15",
"react-native-numeric-input": "^1.8.0",
"react-native-scalable-image": "^0.5.1",
"react-native-tabbar-bottom": "^1.0.4",
"react-navigation": "^3.11.0",
"rn-viewpager": "^1.2.9"
},
"devDependencies": {
"babel-jest": "21.0.0",
"babel-preset-react-native": "3.0.2",
"jest": "21.0.1",
"react-test-renderer": "16.0.0-alpha.12"
},
"jest": {
"preset": "react-native"
}
}
When I build my project with Visual Studio Code, show following error.
[Error] Error: Can't get fulfillment value from any promise, all promises were rejected.
Please let me upgrade my project and build it.
I found way to upgrade.
I changed dependencies carefully like following package.json.
{
"name": "ShoppingApp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "^16.8.6",
"react-native": "^0.60.0",
"react-native-grid-view": "https://github.com/lucholaf/react-native-grid-view.git",
"react-native-numeric-input": "^1.8.0",
"react-native-scalable-image": "https://github.com/ihor/react-native-scalable-image.git",
"react-native-tabbar-bottom": "^1.0.4",
"react-native-vector-icons": "^6.6.0",
"react-navigation": "https://github.com/Maxeh/react-navigation.git",
"rn-viewpager": "https://github.com/zbtang/React-Native-ViewPager.git"
},
"devDependencies": {
"#babel/core": "^7.5.0",
"#babel/runtime": "^7.5.2",
"#react-native-community/eslint-config": "^0.0.5",
"babel-jest": "^24.8.0",
"eslint": "^6.0.1",
"jest": "^24.8.0",
"metro-react-native-babel-preset": "^0.55.0",
"react-test-renderer": "^16.8.6"
},
"jest": {
"preset": "react-native"
}
}
As you can see I removed native-base and updated dev dependencies and add babel/core.
And delete node_modules, yarn or npm again.
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).
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.