My bable.src file code is here
{
"presets": ["es2015"]
}
Package.json file code is here
{
"name": "Zoylo",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"postinstall": "rm ./node_modules/react-native/local-cli/core/__fixtures__/files/package.json",
"test": "jest"
},
"dependencies": {
"#ptomasroos/react-native-multi-slider": "0.0.11",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"jwt-node-decoder": "0.0.4",
"npm": "^5.3.0",
"prop-types": "^15.6.1",
"react": "^16.2.0",
"react-dom": "^16.3.2",
"react-native": "^0.52.0",
},
"devDependencies": {
"babel-eslint": "^8.0.3",
"babel-jest": "20.0.3",
"babel-plugin-transform-export-extensions": "^6.22.0",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-react-native": "^4.0.0",
"babel-preset-stage-2": "^6.24.1",
"jest": "20.0.4",
"react-test-renderer": "16.0.0-alpha.12"
},
}
I think its a bable issue. Its working fine just 1 day ago and after npm install i am facing this issue.
I got the answer. I had some problem in .babelrc file now here is my new .babelrc file
{ "env": { "test": { "presets": [ "env", "react", "es2015", "stage-2" ], "plugins": [ "transform-export-extensions" ], "only": [ "./**/*.js", "node_modules/jest-runtime" ] } }, "presets": [ "react-native" ] }
and need to run this command also.
watchman watch-del-all && rm -rf node_modules/ && npm cache clean --force && npm install && npm start -- --reset-cache
Related
I want to enforce eslint rules before commit and I have configured pre-commit in react-native package.js file but it is not showing eslint error on commit. if I run yar run lint works fine.
Below is my Package.js file
{
"name": "test",
"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": {
"react": "17.0.2",
"react-native": "0.65.1",
"storyblok-js-client": "^4.0.9",
"react-query": "^3.19.1",
"react-redux": "^7.2.4",
"graphql": "^15.5.0",
"graphql-request": "^3.5.0",
"react-native-typography": "^1.4.1",
"rn-fetch-blob": "^0.12.0",
"react-native-webview": "^11.13.0",
"base-64": "^1.0.0"
},
"devDependencies": {
"#babel/core": "^7.15.5",
"#babel/runtime": "^7.15.4",
"#react-native-community/eslint-config": "^3.0.1",
"#typescript-eslint/eslint-plugin": "^4.31.1",
"#typescript-eslint/parser": "^4.31.1",
"babel-jest": "^27.2.0",
"eslint": "^7.32.0",
"eslint-plugin-react": "^7.25.1",
"jest": "^27.2.0",
"metro-react-native-babel-preset": "^0.66.2",
"react-native-codegen": "^0.0.7",
"react-test-renderer": "17.0.2",
"#testing-library/react-native": "^7.2.0",
"eslint-plugin-jest": "^24.4.0",
"fetch-mock": "^9.11.0",
"husky": "^7.0.2",
"lint-staged": "^11.1.2",
"typescript-styled-plugin": "^0.18.1"
},
"lint-staged": {
"src/**/*.{ts,tsx, js, jsx}": [
"eslint --ext .tsx --ext .ts src/ --fix"
],
"./src/**": [
"prettier --write ."
]
},
"husky": {
"hooks": {
"pre-commit": "lint-staged && pretty-quick --staged"
},
"jest": {
"preset": "react-native"
}
}
}
Did you run husky install?
You can also try to add a file named 'pre-commit' to the .husky folder with the following content:
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx lint-staged
I get this error when I run npm test. I've looked at a number of posts, solutions, etc. that suggest making edits to package.json, babel.config.js, jest.config.js and I still receive this error. I thought it could be a version issue with React Native, but I'm on the latest version 0.60.4 and it's mentioned in a few issues that this is solved in master. Perhaps I'm overlooking something, but I'm coming up short on what else it could be.
The following is the test that fails as a result:
import { geolocationRequest } from '../location';
let mockGeoCoding = jest.fn();
jest.mock('react-native-geocoding', () => ({
openURL: mockGeoCoding,
}));
describe('geolocationRequest', () => {
it('creates a properly formatted action', () => {
expect(geolocationRequest()).toMatchSnapshot();
})
})
Thoughts?
package.json
{
"name": "<app-name>",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start --config ../../../../rn-cli.config.js",
"start:ios": "react-native run-ios",
"start:android": "react-native run-android",
"clean:ios": "cd ios/ && pod deintegrate && pod install",
"clean:android": "cd android && ./gradlew clean",
"test": "jest --watch",
"test:coverage": "jest --coverage && open coverage/lcov-report/index.html",
"fix": "eslint --fix .",
"lint:ts": "tslint --fix --project ./tsconfig.json",
"lint:fix": "npm run lint:ts --fix",
"lint:check": "tslint --type-check --project"
},
"dependencies": {
"#react-native-community/async-storage": "1.4.2",
"appcenter": "1.12.2",
"appcenter-analytics": "1.12.2",
"appcenter-crashes": "1.12.2",
"axios": "^0.19.0",
"expo-font": "4.0.0",
"polyline": "0.2.0",
"react": "16.8.6",
"react-devtools": "3.6.1",
"react-native": "0.60.*",
"react-native-animatable": "1.3.2",
"react-native-auth0": "1.4.2",
"react-native-easy-grid": "0.2.1",
"react-native-elements": "1.1.0",
"react-native-geocoding": "0.3.0",
"react-native-gesture-handler": "1.3.0",
"react-native-maps": "0.24.2",
"react-native-vector-icons": "6.4.2",
"react-navigation": "3.9.1",
"react-redux": "7.1.0",
"redux": "4.0.0",
"redux-thunk": "2.3.0",
"scheduler": "0.14.0"
},
"devDependencies": {
"#babel/plugin-proposal-class-properties": "^7.5.5",
"#babel/preset-typescript": "^7.3.3",
"#types/enzyme": "^3.10.3",
"#types/enzyme-adapter-react-16": "^1.0.5",
"#types/jest": "^24.0.17",
"#types/polyline": "0.1.28",
"#types/react": "16.8.13",
"#types/react-native": "0.57.43",
"#types/react-native-auth0": "1.3.0",
"#types/react-native-vector-icons": "6.4.0",
"#types/react-redux": "^7.1.1",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "10.0.1",
"babel-jest": "24.3.1",
"babel-preset-expo": "5.1.1",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.14.0",
"enzyme-to-json": "^3.4.0",
"eslint": "5.15.1",
"eslint-config-airbnb": "17.1.0",
"eslint-plugin-import": "2.16.0",
"eslint-plugin-jsx-a11y": "6.2.1",
"eslint-plugin-react": "7.12.4",
"jest": "^24.3.1",
"jest-fetch-mock": "^2.1.2",
"jest-localstorage-mock": "^2.4.0",
"metro-react-native-babel-preset": "0.53.0",
"react-dom": "^16.8.6",
"react-native-typescript-transformer": "1.2.12",
"react-test-renderer": "^16.6.3",
"redux-mock-store": "^1.5.3",
"ts-jest": "^24.0.2",
"tslint": "5.16.0",
"typescript": "3.4.3"
},
"jest": {
"preset": "react-native"
}
}
jest.config.js
module.exports = {
"preset": 'react-native',
"verbose": true,
"setupFilesAfterEnv": ["<rootDir>/__tests__/setup.js", "jest-localstorage-mock"],
"roots": [
"<rootDir>/src"
],
"transform": {
"^.+\\.tsx?$": "ts-jest",
},
"testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json",
"node"
],
"testPathIgnorePatterns": ['/node_modules/'],
"snapshotSerializers": ["enzyme-to-json/serializer"],
// "collectCoverageFrom": ["src/**/*.tsx"],
"collectCoverage": true,
};
babel.config.js
module.exports = {
"presets": ["module:metro-react-native-babel-preset"]
}
I've been struggling with the same issue.
Based on this comment on github From harudev
[...] So I tested some files to test project, and find out "react-native.config.js" file was the reason.
If there is someone suffered this issue, try to remove file or options from one of your "*.config.js" 😅
So I did remove all of my *.config.js file and the error is now gone.
Hopefully this could help you.
Note that you can reproduce the behavior of the *.confing.js file with package.json
For me this happened at an update of RN from 0.59.10 to 0.61.4.
I tried several fixes but nothing worked.
The only workaround that I've found was to set metro.config.js as below:
const blacklist = require('metro-config/src/defaults/blacklist');
module.exports = {
resolver: {
blacklistRE: blacklist([
/node_modules\/.*\/node_modules\/react-native\/.*/,
]),
},
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
}),
},
};
Source: jamalx31's answer from here:
https://github.com/facebook/react-native/issues/24065#issuecomment-537489786
The issue is reported and documented here:
https://github.com/facebook/react-native/issues/24065
and here:
https://github.com/facebook/react-native/issues/23943
Had the same error, after a good amount of soul searching (google searching)
i just ran npx react-native start oposed to runing my local react-native.
Im building a crossplatform monorepo application for Web, Android and iOS from this example https://github.com/brunolemos/react-native-web-monorepo and when I added React Native Base to my project I changed my config-overrides.js according to this guide https://docs.nativebase.io/docs/GetStarted.html for Web
But after that I got
SyntaxError: C:\Users\maksi\Desktop\ecmsk\node_modules\native-base\node_modules\react-native-vector-icons\lib\create-icon-set-from-fontawesome5.js: Support for the experimental syntax 'classProperties' isn't currently enabled error.
I tried adding loose option to #babel/plugin-proposal-class-properties plugin but that didn't work. And I also tried adding plugins to my package.json and that didn't work either.
package.json
{
"name": "web",
"version": "0.0.1",
"private": true,
"dependencies": {
"#types/history": "^4.7.2",
"#types/js-cookie": "^2.2.2",
"#types/react": "^16.8.23",
"#types/react-redux": "^7.1.1",
"#types/redux-api-middleware": "^3.0.1",
"connected-react-router": "^6.5.2",
"history": "^4.9.0",
"js-cookie": "^2.2.0",
"native-base": "^2.13.4",
"react": "16.8.4",
"react-art": "^16.8.6",
"react-dom": "16.8.4",
"react-native-elements": "^1.1.0",
"react-native-vector-icons": "^6.6.0",
"react-native-web": "0.10.0",
"react-redux": "^7.1.0",
"react-router": "^5.0.1",
"react-scripts": "2.1.8",
"redux": "^4.0.4",
"redux-api-middleware": "^3.0.1"
},
"scripts": {
"compile": "tsc -b",
"prestart": "npm run compile",
"start": "concurrently \"npm run compile -- -w\" \"npm run _start\"",
"_start": "react-app-rewired start",
"prebuild": "npm run compile",
"build": "react-app-rewired build",
"pretest": "npm run compile",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"#babel/plugin-proposal-class-properties": "^7.5.5",
"babel-plugin-react-native-web": "^0.11.5",
"concurrently": "*",
"customize-cra": "^0.4.1",
"react-app-rewired": "^2.1.3",
"typescript": "*"
}
}
config-overrides.js
const path = require('path');
const {
override,
addWebpackAlias,
babelInclude,
addBabelPlugins
} = require('customize-cra');
module.exports = override(
addWebpackAlias({
"react-native/Libraries/Renderer/shims/ReactNativePropRegistry": "react-native-web/dist/modules/ReactNativePropRegistry",
"react-native": "react-native-web"
}),
babelInclude([
path.resolve('src'),
path.resolve('../components/src'),
path.resolve('../../node_modules/native-base-shoutem-theme'),
path.resolve('../../node_modules/react-navigation'),
path.resolve('../../node_modules/react-native-easy-grid'),
path.resolve('../../node_modules/react-native-drawer'),
path.resolve('../../node_modules/react-native-safe-area-view'),
path.resolve('../../node_modules/react-native-vector-icons'),
path.resolve('../../node_modules/react-native-keyboard-aware-scroll-view'),
path.resolve('../../node_modules/react-native-web'),
path.resolve('../../node_modules/react-native-tab-view'),
path.resolve('../../node_modules/static-container'),
]),
addBabelPlugins(
"#babel/plugin-proposal-class-properties"
),
);
The problem might be the included paths. In my case I have it this way:
babelInclude([
path.resolve('node_modules/react-native-typing-animation'),
path.resolve('src')
])
Paths are relative to the config.overrides file.
I just upgraded from RN 0.55.4 to 0.59.3.....now Im getting following error:
Error: Unable to resolve module metro/src/lib/bundle-modules/HMRClient from ....\node_modules\react-native\Libraries\Utilities\HMRClient.js: Module metro/src/lib/bundle-modules/HMRClient does not exist in the Haste module map
The HMRClient.js file does include the following require statement: const MetroHMRClient = require('metro/src/lib/bundle-modules/HMRClient');.....and I cant see that path beginning with 'metro' anywhere so I guess I need to add it somehow. There is also another require statement as follows: const invariant = require('invariant'); ....no file name 'invariant' exists either.
Facebook say this was fixed back in 0.53.0 master but looks like its back
https://github.com/facebook/react-native/issues/17742
Below is my package.json
{
"name": "xs",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest",
"flow": "flow",
"flow start": "flow start",
"flow stop": "flow stop",
"flow status": "flow status",
"flow coverage": "flow coverage"
},
"dependencies": {
"firebase": "^5.11.1",
"flow": "^0.2.3",
"flow-bin": "^0.65.0",
"prop-types": "^15.6.1",
"react": "16.8.3",
"react-native": "0.59.3",
"react-native-elements": "^0.19.0",
"react-native-google-places-autocomplete": "^1.3.9",
"react-native-maps": "git://github.com/react-native-community/react-native-maps.git#master",
"react-native-switch": "^1.4.0",
"react-native-vector-icons": "^4.5.0",
"react-navigation": "^2.5.5",
"react-redux": "^5.1.0",
"redux": "^4.0.1",
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"babel-eslint": "^8.2.6",
"babel-preset-flow": "^6.23.0",
"eslint": "^4.9.0",
"eslint-config-airbnb": "^16.1.0",
"eslint-plugin-import": "^2.17.3",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-react": "^7.13.0",
"prettier-eslint": "^8.8.2",
"#babel/core": "^7.4.3",
"#babel/runtime": "^7.4.3",
"babel-jest": "^24.7.1",
"jest": "^24.7.1",
"metro-react-native-babel-preset": "^0.53.1",
"react-test-renderer": "16.8.3"
},
"jest": {
"preset": "react-native"
}
}
Please help!
p.s. the below suggestion does not work
To resolve try the following:
1. Clear watchman watches: watchman watch-del-all.
2. Delete the node_modules folder: rm -rf node_modules && npm install.
3. Reset Metro Bundler cache: rm -rf /tmp/metro-bundler-cache-* or npm start -- --reset-cache.
4. Remove haste cache: rm -rf /tmp/haste-map-react-native-packager-*.
Pay attention when running npm install to see if there is any need for a specific version of something.
First check babel config files then if it doesn't work try the changes in package.json.
Try config files and deps as below.
This is a config that worked for me for an update from 0.54 to 0.59.5:
package.json:
" dependencies": {
"react": "16.8.3",
"react-native": "0.59.5",
// ...
},
"devDependencies": {
"#babel/core": "^7.0.0-0",
"babel-core": "^7.0.0-bridge.0",
"metro-react-native-babel-preset": "0.53.0",
"react-test-renderer": "16.6.3",
// ...
}
babel.config.js:
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
};
.babelrc:
{
"presets": ["module:metro-react-native-babel-preset"]
}
The only useful info I could find in the RN release notes about babel and metro changes was at [0.57] here:
https://github.com/react-native-community/releases/blob/master/CHANGELOG.md
UPDATE NOTE:
Trying config files as the ones from a new working project (created with 0.59.9) doesn't seem to work for an update from 0.54 to 0.59
babel.config.js:
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
};
metro.config.js:
module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
}),
},
};
and no .babelrc file.
package.json:
"devDependencies": {
"#babel/core": "^7.4.5",
"#babel/runtime": "^7.4.5",
"metro-react-native-babel-preset": "^0.54.1",
},
When I run create-react-native-app I'm getting a peer dependency for react-native-maps to use react-native#0.54. I need to be able to use react-native#0.55.2 and react#16.3.1
Presented below is the package.json file for react-native-maps. Notice line 81,82,97 and 98
could someone show how to edit this json file and how to update react-native-maps?
When I tried with:
npm --depth 9999 update
I ended up getting tons of errors about duplicate packages.
{
"_from": "react-native-maps#0.21.0",
"_id": "react-native-maps#0.21.0",
"_inBundle": false,
"_integrity": "sha512-FkCCV1AyaT5ut5ZTKNIdFWBxRUXZovGTydy7U4Cyifj2dv0Q3Sv21B0Myj+aoGhJhvBJzxsU25dDGQN3TP7b/Q==",
"_location": "/react-native-maps",
"_phantomChildren": {
"babel-plugin-check-es2015-constants": "6.22.0",
"babel-plugin-syntax-async-functions": "6.13.0",
"babel-plugin-syntax-class-properties": "6.13.0",
"babel-plugin-syntax-flow": "6.18.0",
"babel-plugin-syntax-jsx": "6.18.0",
"babel-plugin-syntax-trailing-function-commas": "6.22.0",
"babel-plugin-transform-class-properties": "6.24.1",
"babel-plugin-transform-es2015-arrow-functions": "6.22.0",
"babel-plugin-transform-es2015-block-scoping": "6.26.0",
"babel-plugin-transform-es2015-classes": "6.24.1",
"babel-plugin-transform-es2015-computed-properties": "6.24.1",
"babel-plugin-transform-es2015-destructuring": "6.23.0",
"babel-plugin-transform-es2015-for-of": "6.23.0",
"babel-plugin-transform-es2015-function-name": "6.24.1",
"babel-plugin-transform-es2015-literals": "6.22.0",
"babel-plugin-transform-es2015-modules-commonjs": "6.26.2",
"babel-plugin-transform-es2015-parameters": "6.24.1",
"babel-plugin-transform-es2015-shorthand-properties": "6.24.1",
"babel-plugin-transform-es2015-spread": "6.22.0",
"babel-plugin-transform-es2015-template-literals": "6.22.0",
"babel-plugin-transform-flow-strip-types": "6.22.0",
"babel-plugin-transform-object-assign": "6.22.0",
"babel-plugin-transform-object-rest-spread": "6.26.0",
"babel-plugin-transform-react-display-name": "6.25.0",
"babel-plugin-transform-react-jsx": "6.24.1",
"babel-plugin-transform-react-jsx-source": "6.22.0",
"babel-plugin-transform-regenerator": "6.26.0",
"lodash": "4.17.10",
"react-transform-hmr": "1.0.4"
},
"_requested": {
"type": "version",
"registry": true,
"raw": "react-native-maps#0.21.0",
"name": "react-native-maps",
"escapedName": "react-native-maps",
"rawSpec": "0.21.0",
"saveSpec": null,
"fetchSpec": "0.21.0"
},
"_requiredBy": [
"/expo"
],
"_resolved": "https://registry.npmjs.org/react-native-maps/-/react-native-maps-0.21.0.tgz",
"_shasum": "005f58e93d7623ad59667e8002101970ddf235c2",
"_spec": "react-native-maps#0.21.0",
"_where": "d:\\atestbed\\native-react\\lecture4-contacts\\node_modules\\expo",
"author": {
"name": "Leland Richardson",
"email": "leland.m.richardson#gmail.com"
},
"bugs": {
"url": "https://github.com/airbnb/react-native-maps/issues"
},
"bundleDependencies": false,
"dependencies": {
"babel-plugin-module-resolver": "^2.3.0",
"babel-preset-react-native": "1.9.0"
},
"deprecated": false,
"description": "React Native Mapview component for iOS + Android",
"devDependencies": {
"babel-eslint": "^6.1.2",
"babel-preset-airbnb": "^1.1.1",
"eslint": "^3.3.1",
"eslint-config-airbnb": "^10.0.1",
"eslint-plugin-import": "^1.14.0",
"eslint-plugin-jsx-a11y": "^2.1.0",
"eslint-plugin-prefer-object-spread": "^1.1.0",
"eslint-plugin-react": "^6.1.2",
"gitbook-cli": "^2.3.0",
"lodash": "^4.17.2",
"prop-types": "^15.5.10",
"react": "^16.3.0-alpha.1",
"react-native": "^0.54"
},
"homepage": "https://github.com/airbnb/react-native-maps#readme",
"keywords": [
"react",
"react-native",
"react-component",
"map",
"mapview",
"google-maps",
"mapkit"
],
"main": "index.js",
"name": "react-native-maps",
"peerDependencies": {
"react": "^16.0",
"react-native": "^0.51 || ^0.52 || ^0.53 || ^0.54",
"prop-types": "^15.0 || ^16.0"
},
"repository": {
"type": "git",
"url": "git+https://github.com/airbnb/react-native-maps.git"
},
"rnpm": {
"android": {
"sourceDir": "./lib/android"
}
},
"scripts": {
"build": "npm run build:js && npm run build:android && npm run build:ios",
"build:android": "./gradlew :react-native-maps:assembleDebug",
"build:ios": "bundle install --path ./example/ios/bundles && bundle exec pod install --project-directory=./example/ios/",
"build:js": "exit 0",
"ci": "npm run lint",
"lint": "eslint ./",
"preversion": "./scripts/update-version.js",
"run:android": "./gradlew installDebug && npm run start:android",
"run:ios": "react-native run-ios --project-path ./example/ios",
"run:packager": "./node_modules/react-native/packager/packager.sh",
"start": "node node_modules/react-native/local-cli/cli.js start",
"start:android": "adb shell am start -n com.airbnb.android.react.maps.example/.MainActivity"
},
"version": "0.21.0"
}
ok, so if we just update the package.json file for react-native-maps in the following way:
under devDependencies:
"react": "^16.3.1",
"react-native": "^0.55.2"
under peerDependencies:
"react": "^16.3.1",
"react-native": "^0.55",
then back in the top project install eslint#4.0.0 and ajv#6.0.0 and add them to the dependencies in the package.json.