React-Native navigation unable to resolve module - react-native

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.

Related

`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

react native eslint pre-commit does not work

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

Unable to resolve module #react-navigation/material-top-tabs?

I tried many commands to solve this issue, but i couldnt find the answer, nothing worked. Last, i used
npm install react-navigation-tabs
react-native start --reset-cache
but they didnt work, i still get the same error.
I installed it as
npm install #react-navigation/material-top-tabs react-native-tab-view#^2.16.0
and imported this import { createMaterialTopTabNavigator } from '#react-navigation/material-top-tabs'; but still no, it doesn't work.
this is my package.json as i thought there may be a problem with;
{
"name": "smarthome",
"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/material-bottom-tabs": "^5.3.15",
"#react-navigation/native": "^5.9.4",
"#react-navigation/stack": "^5.14.4",
"native-base": "^2.15.2",
"react": "17.0.1",
"react-native": "0.64.0",
"react-native-gesture-handler": "^1.10.3",
"react-native-paper": "^4.8.1",
"react-native-safe-area-context": "^3.2.0",
"react-native-screens": "^3.1.1",
"react-native-vector-icons": "^8.1.0",
"react-navigation": "^4.4.4",
"react-navigation-stack": "^2.10.4",
"react-navigation-tabs": "^2.11.1"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#babel/runtime": "^7.12.5",
"#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.64.0",
"react-test-renderer": "17.0.1"
},
"jest": {
"preset": "react-native"
}
}
npm uninstall react-native-cli
npx rm -rf node_modules
npm install -i -g --force react-native-cli
those codes solved my problem.

Unable to resolve module `assert` from `node_modules\#jest\console\build\BufferedConsole.js`: assert could not be found within the project

I started getting this error all of a sudden on my working react-native app. I have tried all possible solutions available on other questions like clearing cache and all but nothing worked for me.
Even I tried to run my previous working apps and creating new app but getting the same error for all.
Please let me know if you need any further details to look into the issue.
Any kind of help will be much appreciated.
Thanks in advance.
Below is my package.json
{
"name": "MyApp",
"version": "0.0.1",
"private": true,
"rnpm": {
"assets": [
"./assets/fonts"
]
},
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint .",
"clean": "react-native-clean-project"
},
"dependencies": {
"#react-native-community/masked-view": "^0.1.10",
"#react-navigation/bottom-tabs": "^5.9.1",
"#react-navigation/drawer": "^5.9.2",
"#react-navigation/material-bottom-tabs": "^5.2.18",
"#react-navigation/native": "^5.7.5",
"#react-navigation/stack": "^5.9.2",
"react": "16.13.1",
"react-native": "0.63.2",
"react-native-clean-project": "^3.4.0",
"react-native-gesture-handler": "^1.8.0",
"react-native-reanimated": "^1.13.1",
"react-native-safe-area-context": "^3.1.8",
"react-native-screens": "^2.11.0",
"react-native-splash-screen": "^3.2.0",
"react-native-tab-view": "^2.15.1",
"react-native-vector-icons": "^7.1.0",
"react-native-webview": "^10.9.0"
},
"devDependencies": {
"#babel/core": "^7.8.4",
"#babel/runtime": "^7.8.4",
"#react-native-community/eslint-config": "^1.1.0",
"babel-jest": "^25.1.0",
"eslint": "^6.5.1",
"jest": "^25.1.0",
"metro-react-native-babel-preset": "^0.59.0",
"react-test-renderer": "16.13.1"
},
"jest": {
"preset": "react-native"
}
}

child_process could not be found within the project-- react native

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.