react native eslint pre-commit does not work - react-native

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

Related

Why Jest coverage creates an .html file from every component?

I'm testing a React Native app.
I run jest --coverage and I get 233 files:
I still get the coverage file and I can see the coverage through index.html.
But why the other files.
Here is the package.json
{
"name": "entoutonika",
"version": "0.0.1",
"private": true,
"scripts": {
"8": "react-native run-ios --simulator=\"iPhone 8 Plus\" ",
"11": "react-native run-ios --simulator=\"iPhone 11 Pro Max\" ",
"ios": "react-native run-ios",
"and": "react-native run-android",
"se": "react-native run-ios --simulator=\"iPhone SE (2nd generation)\" ",
"ipad13": "react-native run-ios --simulator=\"iPad Pro (12.9-inch) (5th generation)\" ",
"air": "react-native run-ios --simulator=\"iPad Air (4th generation)\" ",
"start": "react-native start",
"test": "jest --runInBand --detectOpenHandles --forceExit",
"watch": "jest --watch",
"cov": "jest --coverage",
"lint": "eslint . --ext .js,.jsx,.ts,.tsx",
"typecheck": "npx tsc",
"checkformat": "prettier --check \"**/*.{js,jsx,ts,tsx,json}\"",
"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json}\"",
"prepare": "npm run typecheck && lint-staged && husky install",
"postinstall": "npx typesync"
},
"dependencies": {
"#react-native-community/async-storage": "^1.12.1",
"#react-native-community/netinfo": "^7.1.9",
"#react-navigation/drawer": "^6.1.8",
"#react-navigation/elements": "^1.2.1",
"#react-navigation/native": "^6.0.6",
"#react-navigation/native-stack": "^6.2.5",
"firebase": "^9.4.1",
"formik": "^2.2.9",
"lottie-react-native": "^4.1.3",
"moment": "^2.29.1",
"react": "17.0.2",
"react-native": "0.66.1",
"react-native-bootsplash": "^4.0.2",
"react-native-code-push": "^7.0.4",
"react-native-gesture-handler": "^1.10.3",
"react-native-image-picker": "^4.3.0",
"react-native-reanimated": "^2.2.3",
"react-native-safe-area-context": "^3.3.2",
"react-native-screens": "^3.10.1",
"react-native-sound": "^0.11.1",
"react-native-vector-icons": "^9.0.0",
"react-redux": "^7.2.5",
"redux": "^4.1.1",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.3.0",
"typescript": "^4.4.4",
"yup": "^0.32.11"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#babel/preset-typescript": "^7.16.7",
"#babel/runtime": "^7.12.5",
"#react-native-community/eslint-config": "^2.0.0",
"#testing-library/jest-native": "^4.0.4",
"#testing-library/react": "^12.1.2",
"#testing-library/react-native": "^9.0.0",
"#types/babel__core": "^7.1.16",
"#types/eslint": "^7.28.2",
"#types/jest": "^26.0.24",
"#types/mocha": "^9.0.0",
"#types/react": "17.0.2",
"#types/react-native": "^0.65.0",
"#types/react-native-vector-icons": "^6.4.9",
"#types/react-redux": "^7.1.20",
"#types/react-test-renderer": "^17.0.1",
"#typescript-eslint/eslint-plugin": "^5.1.0",
"#typescript-eslint/parser": "^5.1.0",
"babel-jest": "^26.6.3",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-react": "^7.26.1",
"eslint-plugin-testing-library": "^5.0.5",
"husky": "^7.0.0",
"jest": "^26.6.3",
"jest-fetch-mock": "^3.0.3",
"lint-staged": ">=10",
"metro-react-native-babel-preset": "^0.66.2",
"react-test-renderer": "^17.0.2",
"redux-devtools-extension": "^2.13.9"
},
"resolutions": {
"#types/react": "^17"
},
"jest": {
"verbose": true,
"preset": "react-native",
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json",
"node"
],
"setupFilesAfterEnv": [
"#testing-library/jest-native/extend-expect"
],
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/assetsTransformer.js",
"\\.(css|less)$": "<rootDir>/assetsTransformer.js"
},
"moduleDirectories": [
"node_modules",
"src"
],
"transform": {
"^.+\\.js$": "babel-jest"
},
"transformIgnorePatterns": [
"/node_modules/(?!native-base)/"
],
"setupFiles": [
"./setupJest.js"
]
},
"lint-staged": {
"*.{js,jsx,ts,tsx}": "eslint --cache --fix",
"*.{js,jsx,ts,tsx, json}": "prettier --write"
},
"rnpm": {
"assets": [
"./assets/fonts/"
]
}
}
What I do now is check the coverage, and then delete all the files.
I don't have this issue with React projects.
Is there something wrong with the configuration?
Those files are expected since are part of the repo itself so you can see lines of code covered by your tests etc.
You need to add the folder where those are generated into your .gitignore since the whole coverage shouldn't be tracked in your repo.

`native-base` .However, this package itself specifies a `main` module field that could not be resolved

Error: While trying to resolve module native-base from file C:\Users\byambadorj\Desktop\LoginEx\src\LoginScreen.js, the package C:\Users\byambadorj\Desktop\LoginEx\node_modules\native-base\package.json was successfully found. However, this package itself specifies a main module field that could not be resolved (C:\Users\byambadorj\Desktop\LoginEx\node_modules\native-base\src\index. Indeed, none of these files exist
C:\Users\byambadorj\Desktop\LoginEx\node_modules\native-base\src\index(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
C:\Users\byambadorj\Desktop\LoginEx\node_modules\native-base\src\index\index(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
at DependencyGraph.resolveDependency (C:\Users\byambadorj\Desktop\LoginEx\node_modules\metro\src\node-haste\DependencyGraph.js:311:17)......
This is my package.json
{
"name": "LoginEx",
"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-navigation/native": "^6.0.6",
"native-base": "^3.2.2",
"react": "17.0.2",
"react-native": "0.66.4",
"react-native-safe-area-context": "^3.3.2",
"react-native-screens": "^3.10.1",
"react-native-size-matters": "^0.4.0"
},
"devDependencies": {
"#babel/core": "7.16.7",
"#babel/runtime": "7.16.7",
"#react-native-community/eslint-config": "2.0.0",
"babel-jest": "26.6.3",
"eslint": "7.14.0",
"jest": "26.6.3",
"metro-react-native-babel-preset": "0.66.2",
"react-test-renderer": "17.0.2"
},
"jest": {
"preset": "react-native"
}
}
Try stopping metro and restart it by clearing cache.
npm start --reset-cache

Cannot find module '#babel\runtime\package.json'

I tried to run my app, but suddenly I have given this error.
warn Package #babel/runtime has been ignored because it contains invalid configuration. Reason: Cannot find module '#babel\runtime\package.json'
but I have #babel\runtime in package.json
here is package.json's file
{
"name": "rasa",
"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": {
"deprecated-react-native-listview": "0.0.6",
"react": "16.11.0",
"react-native": "0.62.2",
"react-native-responsive-dimensions": "^3.1.1"
},
"devDependencies": {
"#babel/core": "^7.6.2",
"#babel/runtime": "^7.6.2",
"#react-native-community/eslint-config": "^0.0.5",
"babel-jest": "^24.9.0",
"eslint": "^6.5.1",
"jest": "^24.9.0",
"metro-react-native-babel-preset": "^0.58.0",
"react-test-renderer": "16.11.0"
},
"jest": {
"preset": "react-native"
}
}
How can I fix it, I don't want to initialize my project again, is there anyway to fix this problem?
Maybe try npm install in command line and run again.

React-Native navigation unable to resolve module

I am getting an error that #react-navigation/native could not be found within the project. I tried to install it and my package.json file says. I am not sure what to do next to get it running. Cheers {
"name": "sample",
"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-native-community/masked-view": "^0.1.10",
"#react-navigation/native": "^5.5.1",
"#react-navigation/stack": "^5.5.1",
"react": "16.11.0",
"react-native": "0.62.2",
"react-native-gesture-handler": "^1.6.1",
"react-native-reanimated": "^1.9.0",
"react-native-safe-area-context": "^3.0.4",
"react-native-screens": "^2.8.0"
},
"devDependencies": {
"#babel/core": "^7.10.2",
"#babel/runtime": "^7.10.2",
"#react-native-community/eslint-config": "^2.0.0",
"babel-jest": "^26.0.1",
"eslint": "^7.2.0",
"jest": "^26.0.1",
"metro-react-native-babel-preset": "^0.59.0",
"react-test-renderer": "16.11.0"
},
"jest": {
"preset": "react-native"
}
}
I get that problem sometimes as well, when I restart the app the problem is gone. I don't know why it happens, though.

Upgrading RN project from 0.46.4 to 0.60.0 and run in VSCode result Can't get fulfillment value from any promise, all promises were rejected

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.