Develop Reference

Can't resolve react-navigation/core

I'm trying to build a React Native app with some navigation, and i got this error whenever i build it, i'm using expo to build the app :
Android Bundling failed 6098ms
While trying to resolve module `#react-navigation/core` from file `/Users/laurent/Documents/Delivery/Tek3/DEV/B-DEV-501-LYN-5-1-redditech-laurent.cazette/node_modules/#react-navigation/native/src/ResourceSavingSceneView.js`, the package `/Users/laurent/Documents/Delivery/Tek3/DEV/B-DEV-501-LYN-5-1-redditech-laurent.cazette/node_modules/#react-navigation/core/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/Users/laurent/Documents/Delivery/Tek3/DEV/B-DEV-501-LYN-5-1-redditech-laurent.cazette/node_modules/#react-navigation/core/lib/module/index.js`. Indeed, none of these files exist:
* /Users/laurent/Documents/Delivery/Tek3/DEV/B-DEV-501-LYN-5-1-redditech-laurent.cazette/node_modules/#react-navigation/core/lib/module/index.js(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
* /Users/laurent/Documents/Delivery/Tek3/DEV/B-DEV-501-LYN-5-1-redditech-laurent.cazette/node_modules/#react-navigation/core/lib/module/index.js/index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
I think I've already installed all dependencies, but here is my package.json in case I forgot anything :
{
"main": "index.js",
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"web": "expo start --web",
"start": "react-native start"
},
"dependencies": {
"#react-native-community/masked-view": "^0.1.11",
"#react-navigation/core": "react-navigation/core",
"#react-navigation/native": "react-navigation/native",
"#react-navigation/stack": "5.9.0",
"expo": "~42.0.1",
"expo-splash-screen": "~0.11.2",
"expo-status-bar": "~1.0.4",
"expo-updates": "~0.8.1",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "0.63.4",
"react-native-gesture-handler": "~1.10.2",
"react-native-paper": "^4.9.2",
"react-native-reanimated": "~2.2.0",
"react-native-safe-area-context": "^3.3.2",
"react-native-screens": "~3.4.0",
"react-native-svg": "^12.1.1",
"react-native-unimodules": "0.14.10",
"react-native-vector-icons": "^8.1.0",
"react-native-web": "^0.17.5",
"react-navigation": "^4.4.4",
"react-navigation-stack": "^2.10.4",
"styled-components": "^5.3.1",
"styled-system": "^5.1.5"
},
"devDependencies": {
"#babel/core": "^7.9.0"
},
"private": true
}
I've already tried to update metro.config.js :
const { getDefaultConfig } = require('expo/metro-config');
module.exports = {
resolver: {
/* resolver options */
sourceExts: ['jsx', 'js', 'ts', 'tsx'],
},
maxWorkers: 2,
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
}),
},
};
module.exports = getDefaultConfig(__dirname);
Do you guys have any idea on what's wrong ?

Why do you have it like this?
"#react-navigation/core": "react-navigation/core",
"#react-navigation/native": "react-navigation/native",
They need to be correct version numbers. Follow the documentation on official website to install the packages:
https://reactnavigation.org/docs/getting-started
https://reactnavigation.org/docs/stack-navigator/
expo install react-native-screens react-native-safe-area-context react-native-gesture-handler
yarn add #react-navigation/native #react-navigation/stack
And remove "#react-navigation/core": "react-navigation/core" from your package.json.

Try this:
Install react-navigation module.
Re-build your project.
Restart the packager by stopping the current
packager and then starting the packager again with react-native
start.
Unable to resolve module 'react-navigation'

"You require appropriate loaders", Using react native and expo. App fails to compile on the web, but runs on android

I'm using react native expo. The app works fine on android, but when run on the web gets a compilation error. It was working fine in before, but I suspect this started after installing some new package.
/ReactNativeFrontend/node_modules/#codler/react-native-keyboard-aware-scroll-view/lib/KeyboardAwareHOC.js 13:12
Module parse failed: Unexpected token (13:12)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| } from 'react-native'
| import { isIphoneX } from 'react-native-iphone-x-helper'
> import type { KeyboardAwareInterface } from './KeyboardAwareInterface'
|
| const _KAM_DEFAULT_TAB_BAR_HEIGHT: number = isIphoneX() ? 83 : 49
My babel config
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
};
};
My package.json
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"#codler/native-base": "^2.14.2",
"#material-ui/core": "^4.11.0",
"#react-native-community/art": "^1.2.0",
"#react-native-community/async-storage": "^1.11.0",
"#react-native-community/datetimepicker": "^2.4.0",
"#react-native-community/masked-view": "0.1.10",
"#react-native-community/voice": "^1.1.6",
"#risingstack/react-easy-state": "^6.3.0",
"axios": "^0.19.2",
"easy-peasy": "^3.3.1",
"expo": "~38.0.8",
"expo-camera": "^8.3.1",
"expo-constants": "^9.1.1",
"expo-font": "~8.2.1",
"expo-gl": "^8.3.1",
"expo-image-picker": "^8.3.0",
"expo-permissions": "^9.0.1",
"expo-pixi": "^1.2.0",
"expo-speech": "~8.2.1",
"expo-status-bar": "^1.0.2",
"i18n-js": "^3.7.1",
"lodash.memoize": "^4.1.2",
"native-base": "^2.13.12",
"proxy": "^1.0.2",
"react": "~16.11.0",
"react-dom": "~16.11.0",
"react-instantsearch-native": "^6.7.0",
"react-native-chatbot": "0.0.1-alpha.12",
"react-native-datepicker": "^1.7.2",
"react-native-dialogflow": "^3.2.2",
"react-native-elements": "^2.0.4",
"react-native-fade-in-view": "^1.1.0",
"react-native-gesture-handler": "~1.6.0",
"react-native-gifted-chat": "^0.16.3",
"react-native-localization": "^2.1.6",
"react-native-localize": "^1.4.1",
"react-native-no-flicker-image": "^1.0.2",
"react-native-paper": "^4.0.1",
"react-native-reanimated": "~1.9.0",
"react-native-safe-area-context": "~3.0.7",
"react-native-screens": "~2.9.0",
"react-native-signature-capture": "^0.4.10",
"react-native-star-rating": "^1.1.0",
"react-native-vector-icons": "^7.0.0",
"react-native-voice": "^0.3.0",
"react-native-web": "~0.11.7",
"react-navigation": "^4.4.0",
"react-navigation-stack": "^2.8.2",
"react-navigation-tabs": "^2.9.0",
"styled-components": "^5.1.1"
},
"devDependencies": {
"#babel/core": "^7.8.6",
"#babel/preset-env": "^7.11.0",
"babel-preset-expo": "~8.1.0",
"react-native": "^0.63.2"
},
"private": true,
"rnpm": {
"assets": "./assets/fonts"
},
"proxy": "http://localhost:19002"
}
How to add appropriate loaders, or identify the package causing this issue.

I had this exact same issue, I found a solution today.
Thanks to this kind user on the expo forums.
judipuak's post
Install the react-native-keyboard-aware-scroll-view package into your node_modules with yarn on npm
Navigate to native base/dist/src/basic and open Content.js
Find var _reactNativeKeyboardAwareScrollView=require('#codler/react-native-keyboard-aware-scroll-view')
Change this to var _reactNativeKeyboardAwareScrollView=require('react-native-keyboard-aware-scroll-view') (remove the #codler)
Update:
Here's a more permanent solution
courtesy of patarapolw
I downgrade two things, and upgrade one thing, in package.json
{
"dependencies": {
"native-base": "~2.11",
"react-native-web": "~0.11"
},
"resolutions": {
"react-native-keyboard-aware-scroll-view": "^0.9.0"
},
}

This is a native-base library problem. While You are using it's some Components there might error occur. I found that this error is not occurring in 2.11 or it's less version so try to install that specific version
npm install native-base#2.11

Vue CLI - No PostCSS config found

i have a package.json as this:
{
"name": "dashboard",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"apexcharts": "^3.8.4",
"axios": "^0.19.0",
"core-js": "^2.6.5",
"lodash": "^4.17.15",
"moment": "^2.24.0",
"vue": "^2.6.10",
"vue-apexcharts": "^1.5.1",
"vue-numerals": "^3.0.5",
"vue-router": "^3.1.3",
"vue-virtual-scroll-list": "^1.4.4",
"vuetify": "2.1.13",
"vuex": "^3.1.2",
"vuex-map-fields": "^1.3.6",
"vuex-persist": "^2.2.0"
},
"devDependencies": {
"#mdi/font": "^3.8.95",
"#vue/cli-plugin-babel": "^3.9.0",
"#vue/cli-plugin-eslint": "^3.9.0",
"#vue/cli-service": "^3.9.0",
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"sass": "^1.17.4",
"sass-loader": "^7.1.0",
"typeface-roboto": "^0.0.75",
"vue-cli-plugin-vuetify": "^2.0.5",
"vue-template-compiler": "^2.6.10",
"vuetify-loader": "^1.2.2"
}
}
As I did the setup for this project via Vue cli I selected that options as Eslint, Babel and so on are incapsulated in the package.json. I put them in several files now: .eslintrc.js, babel.config.js, and postcss.config.js. Can I do this just like that - creating these files and remove the contents from the package.json?
The contents of the postcss.config.js is this:
module.exports = {
plugins: {
autoprefixer: {},
},
};
When I build this I always get this message:
Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: No PostCSS Config found in: /Users/dev/Sites/dev/src/node_modules/vuetify/src/directives/ripple
at /Users/dev/Sites/dev/src/resources/views/dashboard/node_modules/postcss-load-config/src/index.js:91:15
# /Users/dev/Sites/dev/src/node_modules/vuetify/src/directives/ripple/VRipple.sass 4:14-329 14:3-18:5 15:22-337
Before that I see this message at top:
65% building 852/919 modules 67 active /Users/dev/Sites/dev/src/resources/views/dashboard/node_modules/axios/lib/core/transformData.jsYou did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.
Does this mean that I need to use the sass-loader which is specified in the package.json in the postcss.config.js as well? I am bit puzzled, because on another project I have the same configuration and no other content in the postcss.config.js and I do not get error messages about missing plugins. Thanks!

I advise you to try launching vue ui in the console. After that in the "dependencies" category, you have to try to uninstall packages for CSS-processors and then reinstall it. Probably some of these packages are corrupted.

How To Enable Proguard with react native?

I want to reduce my APK Size
I followed these https://facebook.github.io/react-native/docs/signed-apk-android
and run ./gradlew bundleRelease instead of assembleRelease
But I Got Error
Execution failed for task ':app:transformClassesAndResourcesWithProguardForRelease'.
Job failed,
So how can I solve it, I'm Google it but the issue is still!
But without Enable Proguard it's work very well and I got (Aab & .Apk ) SO How To Solve it!
I think the issue with this file but I don't know how to configure that!
proguard-rules.pro
# If your project uses WebView with JS, uncomment the following
# and specify the fully qualified class name to the JavaScript interface
# class:
#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
# public *;
#}
Package.json
{
"name": "APP_NAME",
"version": "1.12.3",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"#react-native-community/async-storage": "^1.4.2",
"#turf/distance": "^6.0.1",
"#turf/helpers": "^6.1.4",
"#turf/invariant": "^6.1.2",
"#turf/turf": "^5.1.6",
"firebase-admin": "^8.1.0",
"firebase-functions": "^3.0.1",
"lodash": "^4.17.11",
"moment": "^2.24.0",
"react": "16.8.6",
"react-moment": "^0.9.2",
"react-native": "0.59.8",
"react-native-app-intro-slider": "^3.0.0",
"react-native-datepicker": "^1.7.2",
"react-native-fcm": "^16.2.4",
"react-native-firebase": "5.3.1",
"react-native-gesture-handler": "1.2.1",
"react-native-image-picker": "^0.28.0",
"react-native-linear-gradient": "^2.5.4",
"react-native-maps": "^0.24.2",
"react-native-stars": "^1.1.5",
"react-native-svg": "^9.3.3",
"react-native-vector-icons": "^6.4.2",
"react-navigation": "3.11.0"
},
"devDependencies": {
"#babel/parser": "^7.4.4",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "24.8.0",
"jest": "24.8.0",
"metro-react-native-babel-preset": "0.54.1",
"react-devtools": "^3.6.1",
"react-test-renderer": "16.8.6"
},
"jest": {
"preset": "react-native"
}
}

If you want Proguard Enabled (minifyEnabled true in android/app/build.gradle) while using "react-native-firebase" package in your app, you need to update your proguard rules.
in (android/app/proguard-rules.pro)
add the following lines:
-keep class io.invertase.firebase.** { *; }
-dontwarn io.invertase.firebase.**
for more information you can check https://rnfirebase.io/docs/v5.x.x/installation/android just before Step 4.
If it doesn't work out, you must go to documentations of the other packages you use and lookup for additional preferences must be done in order to make their settings compatible with Proguard enabled.

You seem to not be depending on "#angular/core". This is an error. Angular project

So I am trying the run the environment scripts and APIs for the development side of the website my team is building and every time I run ng build for each environment API this error pops up:
Example of the error that is being produced
now here is my pack.json file:
{
"name": "clark-gateway",
"version": "1.0.0-beta.4.0",
"description": "",
"main": "app.js",
"scripts": {
"start": "npm run gulp-tsc",
"build": "node_modules/.bin/gulp tsc",
"gulp-tsc": "node_modules/.bin/gulp start",
"lint": "node_modules/.bin/tslint --project ./src/**",
"pack": "npm run build && cp ./package.json ./dist && cd ./dist && zip -r ../dist.zip ./* & cd ..",
"zip": "cp ./package.json ./dist && cd ./dist && zip -r ../dist.zip ./* & cd ..",
"deploy": "eb deploy CLARK-Gateway-Production --label CLARK-Gateway-v$(node -p \"require('./package.json').version\")",
"document": "node_modules/.bin/typedoc --out ./docs/ ./src/"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#types/express-jwt": "0.0.38",
"#types/jsonwebtoken": "^7.2.3",
"#types/raven": "^2.1.3",
"#types/request-promise": "^4.1.39",
"#types/express": "^4.0.39",
"#types/node": "^8.0.32",
"concurrently": "^3.5.0",
"gulp": "^3.9.1",
"gulp-nodemon": "^2.2.1",
"gulp-typescript": "^3.1.7",
"pre-commit": "^1.2.2",
"tslint": "^5.7.0",
"tslint-config-airbnb": "^5.3.0",
"typedoc": "^0.9.0",
"typescript": "^2.3.4"
},
"dependencies": {
"#cyber4all/clark-entity": "^2.1.0-beta.0.4",
"#cyber4all/clark-taxonomy": "^2.0.0",
"#types/socket.io": "^1.4.33",
"aws-sdk": "^2.147.0",
"body-parser": "^1.17.1",
"cookie-parser": "^1.4.3",
"cors": "^2.8.4",
"dotenv": "^4.0.0",
"express": "^4.15.2",
"express-http-proxy": "^1.1.0",
"express-jwt": "^5.3.0",
"helmet": "^3.6.1",
"jsonwebtoken": "^7.4.1",
"morgan": "^1.9.0",
"multer": "^1.3.0",
"ngx-cookie": "^2.0.1",
"raven": "^2.3.0",
"request": "^2.85.0",
"serverless-http": "^1.5.3",
"socket.io": "^2.1.0"
},
"pre-commit": [
"lint"
],
"prettier": {
"singleQuote": true,
"trailingComma": "all"
}
}
Things that I have tried:
- I have deleted the node modules folder numerous times (3 times to be exact)
- npm installed 3 times also deleted the pack-lock.json file
- Also I did the recommended commands and it gave me more errors such as
PS C:\Clark-Development\CLARK-Environment-master\cart-service> ng
build
Local workspace file ('angular.json') could not be found.
Error: Local workspace file ('angular.json') could not be found.
at WorkspaceLoader._getProjectWorkspaceFilePath (C:\Clark-Development\CLARK-Environment-master\cart-service\node_modules\#angular\cli\models\workspace-loader.js:37:19)
at WorkspaceLoader.loadWorkspace (C:\Clark-Development\CLARK-Environment-master\cart-service\node_modules\#angular\cli\models\workspace-loader.js:24:21)
at BuildCommand._loadWorkspaceAndArchitect (C:\Clark-Development\CLARK-Environment-master\cart-service\node_modules\#angular\cli\models\architect-command.js:180:32)
at BuildCommand. (C:\Clark-Development\CLARK-Environment-master\cart-service\node_modules\#angular\cli\models\architect-command.js:47:25)
at Generator.next ()
at C:\Clark-Development\CLARK-Environment-master\cart-service\node_modules\#angular\cli\models\architect-command.js:7:71
at new Promise ()
at __awaiter (C:\Clark-Development\CLARK-Environment-master\cart-service\node_modules\#angular\cli\models\architect-command.js:3:12)
at BuildCommand.initialize (C:\Clark-Development\CLARK-Environment-master\cart-service\node_modules\#angular\cli\models\architect-command.js:46:16)
at Object. (C:\Clark-Development\CLARK-Environment-master\cart-service\node_modules\#angular\cli\models\command-runner.js:87:23)
This error occurs after I execute the command npm install --save-dev #angular/core#latest

So it turns out I was running the wrong commands, which explains why its saying it needs angular-cli to use the command I was using. I used npm start which worked flawlessly