Ionic 2 : Firebase Cloud Messaging and Google services errors - firebase

I have tried searching at a ton of places to get FCM working. I am using Google Authentication API and have just installed FCM to use Push Notifications. I would like to use both of them. When i do build I get these errors.
* What went wrong:
A problem occurred evaluating root project 'android'.
Failed to apply plugin [class 'com.google.gms.googleservices.GoogleServicesPlugin']
BUILD FAILED
Total time: 3.002 secs
> For input string: "+"
This is my project.properties file
target=android-25
android.library.reference.1=CordovaLib
cordova.system.library.1=com.facebook.android:facebook-android-sdk:4.+
cordova.system.library.2=com.google.android.gms:play-services-auth:+
cordova.system.library.3=com.google.android.gms:play-services-identity:+
cordova.system.library.4=com.android.support:support-v13:25.1.0
cordova.system.library.5=me.leolin:ShortcutBadger:1.1.17#aar
cordova.system.library.6=com.google.firebase:firebase-messaging:11.0.1
cordova.gradle.include.1=phonegap-plugin-push/starter-push.gradle
Couple of things I tried after reading lot of posts:
1. I removed and added android platform then did the build.
2. I tried changing the versions of below libraries to numerous values, but it does not help.
cordova.system.library.2=com.google.android.gms:play-services-auth:+
cordova.system.library.3=com.google.android.gms:play-services-identity:+
If try changing the version from + to 3.0.0 or 9.8.0 or any version I get this error for firebase
* What went wrong:
A problem occurred configuring root project 'android'.
> Could not resolve all dependencies for configuration ':_debugApkCopy'.
> Could not find com.google.firebase:firebase-messaging:11.0.1.
Required by:
project :
Note: Changing the same inside the build.gradle file dosen't help as it gets overridden when we do a build.
this is my package.json.
{
"name": "test",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve",
"start": "node ./bin/www"
},
"dependencies": {
"#angular/common": "4.1.2",
"#angular/compiler": "4.1.2",
"#angular/compiler-cli": "4.1.2",
"#angular/core": "4.1.2",
"#angular/forms": "4.1.2",
"#angular/http": "4.1.2",
"#angular/platform-browser": "4.1.2",
"#angular/platform-browser-dynamic": "4.1.2",
"#ionic-native/core": "3.10.2",
"#ionic-native/facebook": "^3.10.2",
"#ionic-native/google-plus": "^3.12.1",
"#ionic-native/native-storage": "^3.10.3",
"#ionic-native/splash-screen": "3.10.2",
"#ionic-native/status-bar": "3.10.2",
"#ionic/storage": "2.0.1",
"body-parser": "^1.17.2",
"cordova-android": "^6.2.3",
"cordova-plugin-console": "^1.0.5",
"cordova-plugin-device": "^1.1.4",
"cordova-plugin-facebook4": "^1.9.0",
"cordova-plugin-googleplus": "^5.1.1",
"cordova-plugin-nativestorage": "^2.2.2",
"cordova-plugin-splashscreen": "^4.0.3",
"cordova-plugin-statusbar": "^2.2.2",
"cordova-plugin-whitelist": "^1.3.1",
"express": "^4.15.3",
"ionic-angular": "3.3.0",
"ionic-native": "^2.5.1",
"ionic-plugin-keyboard": "^2.2.1",
"ionicons": "3.0.0",
"mongoose": "^4.11.4",
"morgan": "^1.8.2",
"phonegap-plugin-push": "^2.0.0",
"rxjs": "5.1.1",
"serve-favicon": "^2.4.3",
"socket.io": "^2.0.3",
"socket.io-client": "^2.0.3",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.11"
},
"devDependencies": {
"#ionic/app-scripts": "1.3.7",
"#ionic/cli-plugin-cordova": "1.6.2",
"#ionic/cli-plugin-ionic-angular": "1.4.1",
"ionic": "3.7.0",
"typescript": "2.3.3"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-console": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-whitelist": {},
"ionic-plugin-keyboard": {},
"cordova-plugin-facebook4": {
"APP_ID": "xxxxxxx2",
"APP_NAME": "test"
},
"cordova-plugin-googleplus": {
"REVERSED_CLIENT_ID": "4xxxxxxxx6-7dsgct91usuntkmomme1n8rq5i7oipq8.apps.googleusercontent.com"
},
"phonegap-plugin-push": {
"SENDER_ID": "81xxxxx8690"
}
},
"platforms": [
"android"
]
},
"main": "index.js",
"keywords": [
"server"
],
"license": "ISC"
}
Can some one please help me out, suggest a better approach to implement Push notification. Thanks in advance!

Try to install Google Repository
Tools -> SDK Manager -> Google Repository
https://i.stack.imgur.com/qe8iu.png

Related

"Error: Hook can only be invoked from render methods." error in Next.js and Preact

I am a beginner in Next.js. In Next.js and Preact based application, after downloading "node_modules" with "npm install --legacy-peer-deps" and running the project with "npm run dev", I am getting errors that I will add below. On the Homepage, I see the text "Internal Server Error".
I tried many versions of "Node.js" with "nvm" as a solution. When I worked on LTS and latest version the project never worked. When I run it on 16.x.x and below, the project works but errors occur.
I couldn't find the cause and solution for this. I hope someone knows the solution.
Errors:
Error: Hook can only be invoked from render methods.
at Object.n.options.__h (C:\Users\muham\OneDrive\Masaüstü\WESTEROPS\neom-hotel-nextjs\node_modules\preact\debug\dist\debug.js:1:6026)
at l (C:\Users\muham\OneDrive\Masaüstü\WESTEROPS\neom-hotel-nextjs\node_modules\preact\hooks\dist\hooks.js:1:175)
at Object.m (C:\Users\muham\OneDrive\Masaüstü\WESTEROPS\neom-hotel-nextjs\node_modules\preact\hooks\dist\hooks.js:1:335)
at ReactDevOverlay (C:\Users\muham\OneDrive\Masaüstü\WESTEROPS\neom-hotel-nextjs\node_modules\#next\react-dev-overlay\lib\internal\ReactDevOverlay.js:87:27)
at ReactDevOverlay (C:\Users\muham\OneDrive\Masaüstü\WESTEROPS\neom-hotel-nextjs\node_modules\next\dist\server\dev\next-dev-server.js:71:12) at renderWithHooks (C:\Users\muham\OneDrive\Masaüstü\WESTEROPS\neom-hotel-nextjs\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:5662:16)
at renderIndeterminateComponent (C:\Users\muham\OneDrive\Masaüstü\WESTEROPS\neom-hotel-nextjs\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:5735:15)
at renderElement (C:\Users\muham\OneDrive\Masaüstü\WESTEROPS\neom-hotel-nextjs\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:5950:7)
at renderNodeDestructiveImpl (C:\Users\muham\OneDrive\Masaüstü\WESTEROPS\neom-hotel-nextjs\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6108:11)
at renderNodeDestructive (C:\Users\muham\OneDrive\Masaüstü\WESTEROPS\neom-hotel-nextjs\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6080:14)
TypeError: Cannot read property 'context' of undefined
at Object.exports.useContext (C:\Users\muham\OneDrive\Masaüstü\WESTEROPS\neom-hotel-nextjs\node_modules\preact\hooks\dist\hooks.js:1:2697)
at useRouter (C:\Users\muham\OneDrive\Masaüstü\WESTEROPS\neom-hotel-nextjs\node_modules\next\dist\client\router.js:123:27)
at MyApp (C:\Users\muham\OneDrive\Masaüstü\WESTEROPS\neom-hotel-nextjs\.next\server\pages\_app.js:91:72)
at renderWithHooks (C:\Users\muham\OneDrive\Masaüstü\WESTEROPS\neom-hotel-nextjs\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:5662:16)
at renderIndeterminateComponent (C:\Users\muham\OneDrive\Masaüstü\WESTEROPS\neom-hotel-nextjs\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:5735:15)
at renderElement (C:\Users\muham\OneDrive\Masaüstü\WESTEROPS\neom-hotel-nextjs\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:5950:7)
at renderNodeDestructiveImpl (C:\Users\muham\OneDrive\Masaüstü\WESTEROPS\neom-hotel-nextjs\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6108:11)
at renderNodeDestructive (C:\Users\muham\OneDrive\Masaüstü\WESTEROPS\neom-hotel-nextjs\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6080:14)
at renderIndeterminateComponent (C:\Users\muham\OneDrive\Masaüstü\WESTEROPS\neom-hotel-nextjs\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:5789:7)
at renderElement (C:\Users\muham\OneDrive\Masaüstü\WESTEROPS\neom-hotel-nextjs\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:5950:7)
package.json
{
"name": "neom-hotel-nextjs",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"export": "next build && next export",
"export-s3": "next build && next export '/*'",
"deploy": "next build && next export && firebase deploy",
"openid": "next build && next export && firebase hosting:channel:deploy openid",
"image": "next build && next export && firebase hosting:channel:deploy image",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"#fontsource/outfit": "^4.5.8",
"#steveeeie/react-page-transition": "^1.3.0",
"cupertino-pane": "^1.3.0",
"framer-motion": "^6.4.2",
"framework7-react": "^6.3.17",
"framework7": "^6.3.17",
"framework7-icons": "^4.0.2",
"imagemin-gifsicle": "^7.0.0",
"imagemin-mozjpeg": "^9.0.0",
"imagemin-optipng": "^8.0.0",
"mapbox-gl": "^2.9.1",
"next": "^11.1.4",
"next-compose-plugins": "^2.2.1",
"next-optimized-images": "^2.6.2",
"next-plugin-preact": "^3.0.7",
"preact": "^10.8.2",
"preact-render-to-string": "^5.2.0",
"react": "npm:#preact/compat",
"react-bottom-sheet": "^1.1.1",
"react-dom": "npm:#preact/compat",
"react-modal-sheet": "^1.5.2",
"react-scroll-hooks": "^0.1.1",
"react-ssr-prepass": "npm:preact-ssr-prepass",
"react-transition-group": "^4.4.2",
"responsive-loader": "^3.0.4",
"sharp": "latest",
"styled-components": "^5.3.5",
"url-loader": "^4.1.1",
"webp-loader": "^0.6.0"
},
"devDependencies": {
"#zeit/next-css": "^1.0.1",
"eslint": "8.18.0",
"eslint-config-next": "12.2.0",
"next-purgecss": "^4.0.0"
}
}
package-lock.json
{
"name": "neom-hotel-nextjs",
"version": "0.1.0",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "neom-hotel-nextjs",
"version": "0.1.0",
"dependencies": {
"#fontsource/outfit": "^4.5.8",
"#steveeeie/react-page-transition": "^1.3.0",
"cupertino-pane": "^1.3.0",
"framer-motion": "^6.4.2",
"framework7": "^6.3.17",
"framework7-icons": "^4.0.2",
"framework7-react": "^6.3.17",
"imagemin-gifsicle": "^7.0.0",
"imagemin-mozjpeg": "^9.0.0",
"imagemin-optipng": "^8.0.0",
"mapbox-gl": "^2.9.1",
"next": "^11.1.4",
"next-compose-plugins": "^2.2.1",
"next-optimized-images": "^2.6.2",
"next-plugin-preact": "^3.0.7",
"preact": "^10.8.2",
"preact-render-to-string": "^5.2.0",
"react": "npm:#preact/compat",
"react-bottom-sheet": "^1.1.1",
"react-dom": "npm:#preact/compat",
"react-modal-sheet": "^1.5.2",
"react-scroll-hooks": "^0.1.1",
"react-ssr-prepass": "npm:preact-ssr-prepass",
"react-transition-group": "^4.4.2",
"responsive-loader": "^3.0.4",
"sharp": "latest",
"styled-components": "^5.3.5",
"url-loader": "^4.1.1",
"webp-loader": "^0.6.0"
},
"devDependencies": {
"#zeit/next-css": "^1.0.1",
"eslint": "8.18.0",
"eslint-config-next": "12.2.0",
"next-purgecss": "^4.0.0"
}
},

Hiding locales using next-i18next

Environment
I am making a website with some administration/hidden for regular user functionality. The application has internationalization. Main stack:
Next
next-i18next
NX
Packages
{
"name": "client",
"version": "1.0.0",
"license": "MIT",
"scripts": {
"serve": "nx serve",
"serve:prod": "nx serve --prod",
"build": "nx build",
"test": "nx test",
"eslint": "eslint --cache",
"prettier": "prettier --check --cache",
"lint": "nx lint",
"format": "nx format:check",
"e2e": "nx e2e",
"affected:e2e": "nx affected --target=e2e",
"affected:lint": "nx affected --target=lint",
"affected:format": "nx affected --target=format",
"affected:test": "nx affected --target=test",
"storybook": "nx storybook",
"storybook:build": "nx build-storybook",
"deploy": "vercel",
"deploy:prod": "vercel --prod",
"prepare": "husky install"
},
"private": true,
"dependencies": {
"#emotion/react": "^11.9.3",
"#emotion/styled": "^11.9.3",
"#fontsource/roboto": "^4.5.7",
"#mui/base": "^5.0.0-alpha.91",
"#mui/icons-material": "^5.8.4",
"#mui/material": "^5.9.2",
"#reduxjs/toolkit": "^1.8.3",
"axios": "^0.27.2",
"formik": "^2.2.9",
"next": "^12.2.3",
"next-i18next": "^11.0.0",
"next-redux-wrapper": "^7.0.5",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-redux": "^8.0.2",
"vercel": "^27.1.3",
"yup": "^0.32.11"
},
"devDependencies": {
"#babel/core": "7.12.13",
"#babel/preset-typescript": "7.12.13",
"#commitlint/cli": "^17.0.3",
"#commitlint/config-conventional": "^17.0.3",
"#next/bundle-analyzer": "^12.2.3",
"#nrwl/cli": "14.4.2",
"#nrwl/cypress": "14.5.1",
"#nrwl/eslint-plugin-nx": "14.4.3",
"#nrwl/express": "^14.4.3",
"#nrwl/jest": "14.5.1",
"#nrwl/linter": "14.4.2",
"#nrwl/next": "14.4.0",
"#nrwl/node": "14.4.0",
"#nrwl/react": "14.4.2",
"#nrwl/storybook": "14.4.2",
"#nrwl/web": "14.4.3",
"#nrwl/workspace": "14.4.2",
"#storybook/addon-essentials": "~6.5.9",
"#storybook/builder-webpack5": "~6.5.9",
"#storybook/core-server": "~6.5.9",
"#storybook/manager-webpack5": "~6.5.9",
"#storybook/react": "~6.5.9",
"#svgr/webpack": "^5.4.0",
"#testing-library/cypress": "^8.0.3",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "13.3.0",
"#types/express": "4.17.13",
"#types/jest": "27.4.1",
"#types/node": "18.0.4",
"#types/react": "18.0.15",
"#types/react-dom": "18.0.5",
"#typescript-eslint/eslint-plugin": "^5.30.3",
"#typescript-eslint/parser": "^5.30.3",
"babel-jest": "27.5.1",
"babel-loader": "8.1.0",
"core-js": "^3.6.5",
"cypress": "^10.3.0",
"cypress-real-events": "^1.7.1",
"cypress-web-vitals": "^2.0.0",
"eslint": "8.2.0",
"eslint-config-airbnb": "19.0.4",
"eslint-config-airbnb-typescript": "^17.0.0",
"eslint-config-next": "12.1.6",
"eslint-config-prettier": "8.1.0",
"eslint-plugin-cypress": "^2.10.3",
"eslint-plugin-import": "2.25.3",
"eslint-plugin-jsx-a11y": "6.5.1",
"eslint-plugin-react": "7.30.1",
"eslint-plugin-react-hooks": "4.6.0",
"husky": "^8.0.1",
"jest": "27.5.1",
"lint-staged": "^13.0.3",
"nx": "14.5.1",
"prettier": "^2.7.1",
"react-test-renderer": "18.2.0",
"regenerator-runtime": "0.13.7",
"ts-jest": "27.1.4",
"ts-node": "~10.8.0",
"tslib": "^2.3.0",
"typescript": "~4.7.2",
"url-loader": "^3.0.0"
}
}
Problem
The problem is that raw locales in the .json format are accessible by GET requests. For example, I can visit http://localhost/locales/en/common.json and get:
{
"email": {
"length": {
"short": "Email is too short",
"long": "Email is too long"
},
"format": "Email format is wrong",
"required": "Email is required"
},
"password": {
"length": {
"short": "Password is too short",
"long": "Password is too long"
},
"format": "Password format is wrong",
"required": "Password is required"
}
}
The locales are not placed in the public directory during development and next-i18next is configured for another locales path by its next-i18next.config.js.
I18n config
const path = require('path');
module.exports = {
debug: process.env.NODE_ENV === 'development',
i18n: {
locales: ['en', 'uk'],
defaultLocale: 'en',
},
localePath: path.resolve('./apps/client/locales'),
};
Question
I think that users can guess these paths and get some sensitive information. Are there any ways to make them accessible only for Next, but not for the public? Maybe I should change my way of localization at all, shouldn't I?
next-translate looks like the library with different internationalization logic, which resolved my problem.

Issues when generating NUXT build

I am building a nuxt ssr app and whenever I run build command, I get this error of css-loader related to Invalid options object.
ERROR in ./node_modules/vue2-google-maps/dist/components/streetViewPanorama.vue (./node_modules/#nuxt/webpack/node_modules/css-loader/dist/cjs.js?minimize!./node_modules/vue-loader/lib/style-compiler?{"optionsId":"0","vue":true,"scoped":false,"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./node_modules/vue2-google-maps/dist/components/streetViewPanorama.vue)
Module build failed (from ./node_modules/#nuxt/webpack/node_modules/css-loader/dist/cjs.js):
ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
- options has an unknown property 'minimize'. These properties are valid:
object { url?, import?, modules?, icss?, sourceMap?, importLoaders?, esModule? }
at validate (D:\Dev\Vuejs\Nuxt\nuxt-app\node_modules\#nuxt\webpack\node_modules\css-loader\node_modules\schema-utils\dist\validate.js:98:11)
at Object.loader (D:\Dev\Vuejs\Nuxt\nuxt-app\node_modules\#nuxt\webpack\node_modules\css-loader\dist\index.js:36:28)
# ./node_modules/vue2-google-maps/dist/components/streetViewPanorama.vue (./node_modules/vue-style-loader!./node_modules/#nuxt/webpack/node_modules/css-loader/dist/cjs.js?minimize!./node_modules/vue-loader/lib/style-compiler?{"optionsId":"0","vue":true,"scoped":false,"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./node_modules/vue2-google-maps/dist/components/streetViewPanorama.vue) 4:14-295
# ./node_modules/vue2-google-maps/dist/components/streetViewPanorama.vue
# ./node_modules/vue2-google-maps/dist/main.js
# ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./components/GoogleMap.vue
# ./components/GoogleMap.vue
# ./components/AddPost.vue
# ./components/Header.vue
# ./layouts/nossr.vue
# ./.nuxt/App.js
# ./.nuxt/index.js
# ./.nuxt/client.js
# multi ./node_modules/#nuxt/components/lib/installComponents.js ./.nuxt/client.js
I have install the css-loader as well but the issue persists. Below is my package.json
{
"name": "test",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"deploy": "push-dir --dir=dist --branch=gh-pages --cleanup",
"test": "jest"
},
"dependencies": {
"#azure/storage-blob": "12.6.0",
"#capacitor-community/http": "1.0.0",
"#capacitor/android": "2.4.6",
"#capacitor/core": "2.4.6",
"#ffmpeg-installer/ffmpeg": "1.1.0",
"#fortawesome/fontawesome-svg-core": "1.2.28",
"#fortawesome/free-brands-svg-icons": "5.13.0",
"#fortawesome/free-solid-svg-icons": "5.13.0",
"#fortawesome/vue-fontawesome": "0.1.10",
"#mathieustan/vue-datepicker": "^0.2.11",
"#nuxtjs/axios": "^5.13.6",
"#nuxtjs/dotenv": "^1.4.1",
"#nuxtjs/svg": "^0.4.0",
"#vue-stripe/vue-stripe": "4.1.1",
"axios": "^0.24.0",
"azure-storage": "^2.10.4",
"capacitor-resources": "2.0.5",
"cordova-res": "0.15.3",
"core-js": "^3.15.1",
"cors": "2.8.5",
"cropperjs": "1.5.9",
"crypto-js": "4.0.0",
"css-loader": "5.0.0",
"debounce": "1.2.0",
"fluent-ffmpeg": "2.1.2",
"jquery": "1.9.1",
"lodash": "4.17.21",
"lru-cache": "6.0.0",
"luxon": "1.25.0",
"masonry-layout": "4.2.2",
"moment": "^2.9.0",
"moment-timezone": "^0.5.33",
"number-abbreviate": "^2.0.0",
"nuxt": "^2.15.7",
"photoswipe": "^5.2.4",
"postcss": "8.1.10",
"postcss-import": "13.0.0",
"postcss-loader": "4.1.0",
"postcss-url": "10.1.1",
"push-dir": "^0.4.1",
"rxjs": "6.6.3",
"simple-vue-validator": "0.16.0",
"style-loader": "^3.3.1",
"stylus-loader": "^6.2.0",
"underscore": "^1.13.1",
"v-datatable-light": "0.8.2",
"v-lazy-image": "1.4.0",
"video-metadata-thumbnails": "1.0.22",
"vue-datatables-net": "1.4.1",
"vue-datetime": "1.0.0-beta.13",
"vue-loader": "14.2.4",
"vue-meta": "2.4.0",
"vue-quill-editor": "3.0.6",
"vue-router": "3.3.4",
"vue-rx": "6.2.0",
"vue-scroll": "^2.1.13",
"vue-select": "^3.10.3",
"vue-svg-loader": "^0.16.0",
"vue-tables-2": "^2.3.1",
"vue-the-mask": "^0.11.1",
"vue-tippy": "^4.7.2",
"vue-toast-notification": "0.4.1",
"vue2-datepicker": "3.8.2",
"vue2-google-maps": "0.10.7",
"vue2-timepicker": "^1.1.6",
"vuejs-clipper": "3.0.3",
"vuejs-datepicker": "1.6.2",
"vuetable-2": "2.0.0-beta.4",
"vuex": "3.4.0",
"vuex-persistedstate": "3.0.1",
"weekstart": "1.0.1"
},
"devDependencies": {
"#capacitor/cli": "2.4.6",
"#vue/cli-plugin-babel": "~4.4.0",
"#vue/cli-service": "~4.4.0",
"#vue/test-utils": "^1.2.1",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "10.1.0",
"babel-jest": "^27.0.5",
"eslint": "6.7.2",
"jest": "^27.0.5",
"sass": "^1.50.1",
"sass-loader": "^10.2.1",
"source-map-loader": "^3.0.0",
"vue-jest": "^3.0.4",
"vue-masonry-css": "1.0.3"
},
"main": "index.js",
"license": "MIT"
}
I have searched alot but couldn't find any solution. kindly help me out. Thanks in advance!
This question is not really solvable without having the whole context and making an in-depth analysis of all the packages one by one: upgrading the legacy ones, removing the deprecated ones and figuring out what kind of specific configuration is in place (Stylus for example).
The given reproduction kinda shows the issue, but we cannot just solve them in package.json because it may break the logic that is based on those specific versions.
Since the project is private, there is no real way to help here without having more info.

Error! You've attempted to require '#react-native-firebase/auth' version '6.2.0', however

Error! You've attempted to require #react-native-firebase/auth version '6.2.0', however, the #react-native-firebase/app module is of a different version (6.3.4).
I get this error whenever I launch the app. I've tried to reinstall all the modules, to delete and reinstall, to install all react native firebase modules to version 6.3.4, to version 6.2.0 but still nothing.
I can't use the firebase package because I've implemented firebase differently.
Do you have any idea what should I do?
Package.json:
"name": "Vanto",
"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-firebase/app": "^6.2.0",
"#react-native-firebase/auth": "^6.2.0",
"#react-native-firebase/storage": "^6.2.0",
"#types/react": "^16.9.17",
"#types/react-native": "^0.60.31",
"jetifier": "^1.6.5",
"react": "16.9.0",
"react-native": "0.61.5",
"react-native-admob": "^2.0.0-beta.6",
"react-native-appearance": "^0.3.1",
"react-native-gesture-handler": "^1.5.3",
"react-native-image-picker": "^2.3.0",
"react-native-ionicons": "^4.6.4",
"react-native-navigation-bar-color": "^1.0.0",
"react-native-reanimated": "^1.4.0",
"react-native-restart": "0.0.14",
"react-native-splash-screen": "^3.2.0",
"react-native-typescript-transformer": "^1.2.13",
"react-native-vector-icons": "^6.6.0",
"react-navigation": "^4.0.10",
"react-navigation-stack": "^1.10.3",
"react-navigation-tabs": "^2.6.2",
"styled-components": "^5.0.1",
"typescript": "^3.7.5",
"uninstall": "0.0.0"
},
"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.56.0",
"react-test-renderer": "16.9.0"
},
"jest": {
"preset": "react-native"
}
}
Fixed by cleaning node cache and yarn cache as well as reinstalling react native firebase modules all in 6.2.0

Push notification is not working on Background

I'm using native firebase plugin's push notification feature.
Current behavior:
It is working fine with the foreground.But when the app is in the background and I try to tap the notification it shows undefined.Please see the video below.I have tested this on Anroid device.
Expected behavior:
When I tap the notification message it should open the app and show the message correctly.
Video
app.component.ts
constructor(public platform: Platform)
{
platform.ready().then(() => {
this.onNotificationOpen();
});
}
onNotificationOpen(): void {
if (this.platform.is('cordova')) {
this.firebase.onNotificationOpen()
.subscribe(res => {
if (res.tap) {//background mode
console.log(res.body);
this.showAlert(res.body);
} else if (!res.tap) {//foreground mode
console.log(res.body);
this.showAlert(res.body);
}
});
}
}
showAlert(message: string): void {
let alert = this.alertCtrl.create({
title: 'Push Notification',
subTitle: message,
buttons: ['OK']
});
alert.present();
}
package.json
{
"name": "ionic-hello-world",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"#angular/common": "4.1.0",
"#angular/compiler": "4.1.0",
"#angular/compiler-cli": "4.1.0",
"#angular/core": "4.1.0",
"#angular/forms": "4.1.0",
"#angular/http": "4.1.0",
"#angular/platform-browser": "4.1.0",
"#angular/platform-browser-dynamic": "4.1.0",
"#ionic-native/core": "3.6.1",
"#ionic-native/device": "3.6.1",
"#ionic-native/facebook": "^3.10.0",
"#ionic-native/firebase": "^3.10.3",
"#ionic-native/keyboard": "^3.10.3",
"#ionic-native/splash-screen": "3.6.1",
"#ionic-native/status-bar": "3.6.1",
"#ionic/cli-plugin-cordova": "^1.2.0",
"#ionic/cli-plugin-ionic-angular": "^1.2.0",
"#ionic/storage": "2.0.1",
"#ngrx/core": "^1.2.0",
"#ngrx/store": "^2.2.1",
"d3": "^4.7.4",
"firebase": "^3.7.5",
"ionic-angular": "3.2.1",
"ionicons": "3.0.0",
"moment": "^2.18.1",
"pouchdb": "^6.1.2",
"pouchdb-adapter-cordova-sqlite": "^2.0.2",
"rxjs": "5.1.1",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.10"
},
"devDependencies": {
"#ionic/app-scripts": "1.3.7",
"#ionic/cli-plugin-cordova": "1.2.1",
"#ionic/cli-plugin-ionic-angular": "1.2.0",
"typescript": "~2.2.1"
},
"cordovaPlugins": [
"cordova-plugin-whitelist",
"cordova-plugin-console",
"cordova-plugin-statusbar",
"cordova-plugin-device",
"cordova-plugin-splashscreen",
"ionic-plugin-keyboard"
],
"cordovaPlatforms": [
"ios",
{
"platform": "ios",
"version": "",
"locator": "ios"
}
],
"description": "helloWorld: An Ionic project"
}
I'd recommend using the cordova-plugin-firebase instead. You can take a look at this repo to see how to use that plugin.
Please notice that the content of the notification sent will not be the same if the app is running in the foreground or if the app is closed when the notification arrives. In order to handle that, when sending a notification, add the title and the body in the Advanced options section:

Resources