Unfortunately, FCM v9 does not support Service Messaging at this time

https://i.sstatic.net/lUi9a.png

I encountered an error when trying to save the firebase.js config file while attempting to use Firebase Cloud Messaging in Firebase V9.

Here is my firebase.js config:

import { initializeApp, getApps, getApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getStorage } from "firebase/storage";
import { getMessaging } from "firebase/messaging";

const firebaseConfig = {
  apiKey: process.env.FIREBASE_API_KEY,
  authDomain: process.env.FIREBASE_AUTHDOMAIN,
  projectId: process.env.FIREBASE_PROJECTID,
  storageBucket: process.env.FIREBASE_STORAGEBUCKET,
  messagingSenderId: process.env.FIREBASE_MESSAGINGSENDERID,
  appId: process.env.FIREBASE_APPID,
};

const app = !getApps().length ? initializeApp(firebaseConfig) : getApp();
const db = getFirestore();
const storage = getStorage();
const messaging = getMessaging(app); // encountering an error on this line

export { app, db, storage, messaging };

Answer №1

I encountered a similar issue, which was actually caused by the use of firebase v9 in Nextjs.

The workaround involves reverting back to firebase version v8.

It's important to note that there are differences in syntax between firebase v8 and v9.

If you want to switch to, say v8.10, you'll first have to remove your current firebase version:

npm uninstall firebase

and then install firebase v8.10:

npm i <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e88689938582829385a0d8ced1d0ced0">[email protected]</a>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am confused as to why I am encountering an issue with req.file being "undefined" when attempting to upload a file using multer

Trying to implement a feature where users can upload files using a form, but encountering issues with multer in the controller file. When using upload.single('foobar'), the image is returning as "undefined", causing errors in the application. Spe ...

What is the best way to retrieve JSON data using JavaScript within a loop?

I'm struggling to retrieve data from a JSON object. Here's the JSON structure I'm working with: var data = [ {"mes":{ "January":{ "Inversion":"1000","Fans":"1020"} ...

Obtain the file path relative to the project directory from a Typescript module that has been compiled to JavaScript

My directory structure is as follows: - project |- build |- src |- index.ts |- file.txt The typescript code is compiled to the build directory and executed from there. I am seeking a dependable method to access file.txt from the compiled module without ...

Is there any update to expressValidator in Node.js?

In this particular nodejs file, the code is designed to receive and validate email names and other information before storing them in a database. Normally, we would use app.use(expressValidator()) for validation, but in this case, the definition has been a ...

Tips for displaying indentations on Tube Geometry using THREE.js

Currently, I have a project where I am tasked with displaying dents on a pipeline in a 3D format. To create the pipeline, I utilized THREE.js's tube geometry which is illustrated below: <!DOCTYPE html> <html lang="en"> <head> ...

I'm curious, are there any html rendering engines that can display text-based content using curl-php?

When utilizing PHP cURL to interact with webpages, I often find myself needing to use regular expressions if the page contains AJAX and JavaScript elements. Does anyone have any recommendations for rendering HTML pages and extracting the text-based render ...

Persistent Login with Firebase Auth in Cordova/Ionic

The problem is related to an app created using Ionic/Cordova/Firebase technology stack. Users of the app on Android and IOS devices are experiencing random local storage wipes, resulting in the need for them to log in again. The authentication process is ...

The Quirks of jQuery's .load() Method

On my website, I am incorporating a basic jQuery script to load content from one part of a webpage into the 'display container' on the same page. The content being loaded consists of multiple divs enclosed within an outer <div> that is hid ...

The functionality of res.render() in express.js appears to be malfunctioning

I have a web application with Facebook login functionality. When the Facebook login button on my page is clicked, the following code snippet is triggered: FB.api( '/me', 'GET', {"fields":"id,name,birthday,gender"}, ...

How can I retrieve the value of a radio button using jQuery

My goal is to retrieve the selected/checked radio button value using the .get function. I believe my code is correct, but the sequence seems to be off. $.get('burgerorder_check.php', function(data) { inputVal = $('input[type ...

javascript Initiate JSON parsing with preset value

In order to parse JSON into a JavaScript object with data, I am providing a simple example below: var IsTrue = true; var Number = 9; var Object = { a : 1}; var Array = [10,6]; var jStr = '{"ask" : IsTrue, "value" : Number, "obj" : Object, "arr" : Ar ...

How to extract an array of objects stored in localStorage using AngularJS

I am a beginner in Ionic and AngularJS and I am facing an issue with storing an array of objects to local storage. While the code works perfectly fine when storing just one object, it fails to retrieve data when attempting to store and access data from an ...

What is preventing jQuery from converting this HTML string into a jQuery object?

I am struggling with converting a template string into a jQuery object in order to parse it and populate the data. $(function(){ var template = '<h3>Details</h3>' + '<ul>' + '<li>Submitted: <sp ...

What is the best way to incorporate a subcategory within a string and separate them by commas using Vue.js?

Is it possible to post subcategories in the following format now? Here is the current result: subcategory[] : Healthcare subcategory[] : education However, I would like to have them as a string separated by commas. This is my HTML code: <div id="sub ...

Using AJAX to save data while dealing with duplicated forms

Project Details: In the midst of developing an asp.NET web application, I am faced with a challenge. The user interface (UI) I have created allows users to generate multiple instances of an object by inputting data into forms. Consequently, numerous ident ...

Having difficulties with incrementally rotating a CSS cube to every direction

Can anyone help me with rotating a cube one side at a time using CSS? I can make the cube rotate to the top / bottom and each side correctly, but when I try to rotate to the top or bottom first and then to a side, the cube spins without rotating left or ri ...

extract data from text using regular expressions to retrieve two values

Can someone assist with creating a regex expression to parse this string in JavaScript: $D('make').onChange('s',123456789,'a',10) I am trying to extract the values 123456789 and a from this string. Any help would be appreci ...

Images on web pages are automatically resized to fit into a smaller preview window

Currently, I am facing an issue with the display of images in my grid windows on my website . The images are appearing as partial representations instead of rescaled versions where the whole picture is resized to fit the grid window. I have attempted mod ...

Transform audio file into a base64 encoding

I am currently developing a Phonegap application for a friend that will allow users to record audio on their phone, save it to the browser's local storage, and then upload it at a later time. As far as I know, local storage does not support storing b ...

Run the function solely once the asynchronous function has been executed

I need function F1() to wait for function F2() to fully execute and receive the response from a REST call in order to set some data. Here is the code I attempted to use: this.F1().subscribe(result => { this.F2(result); }) F1() { retur ...