Error: Unable to initialize TypeError: The function (0 , firebase_compat_firestore__WEBPACK_IMPORTED_MODULE_1__.getFirestore) cannot be found

While trying to initialize Firebase in my next.js project, I encountered the following error: 

TypeError: (0 , firebase_compat_firestore__WEBPACK_IMPORTED_MODULE_1__.getFirestore) is not a function

Here is the code snippet I used. Despite my expectations of successful initialization, I kept receiving errors pointing towards getFirestore(App) or initializeApp(clientCredentials) as the root cause.

import { initializeApp } from "firebase/compat/app";
import "firebase/compat/firestore";
import "firebase/compat/auth";
import { getFirestore } from "firebase/compat/firestore";

const clientCredentials = {
    apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
    authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
    projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
    storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
    measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
};

const app = initializeApp(firebaseConfig);   

export const DB = getFirestore(App)
javascriptfirebasegoogle-cloud-firestorenext.js

Answer №1

When starting a new project, it is recommended to utilize Firebase Modular SDK. However, in this case, the compact library is being used. To Initialize Cloud Firestore with Modular SDK, and similar steps should be followed for other Firebase services such as Authentication. The process can be carried out as shown below:

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
    apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
    authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
    projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
    storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
    measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);   

export const DB = getFirestore(app);
export const auth = getAuth(app);

Ensure that you have the most recent versions of the Firebase packages installed. You can update them by executing the following command:

npm install firebase@latest

Reference : Initialize Cloud Firestore

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

How to Handle a TypeError When Deleting a File Using GridFS with Mongoose and Node.js

In the process of developing an application that facilitates uploading and downloading music files, I have encountered a specific issue. While I am able to successfully upload files and send them to clients, I am facing challenges when attempting to delete ...

javascriptnode.jsmongodbmongoose

How can we combine refs in React to work together?

Let's consider this scenario: I need a user to pass a ref to a component, but I also have to access that same ref internally. import React, { useRef, forwardRef } from 'react'; import useId from 'hooks/useId'; interface Props ext ...

javascriptreactjs

Can a jQuery object be generated from any random HTML string? For example, is it possible to create a new link variable like this: var $newlink = $('<a>new link</a>')?

I'm looking to create an object without it being attached to the dom. By passing a HTML string, I want to insert the element into the dom and still have a reference to it. ...

javascriptjquery

Using Laravel to retrieve the selected value of a dynamically generated radio button through a for loop in jQuery

In my view, there is a form with dynamically populated radio buttons sourced from the database. The code snippet for this functionality is as follows: <div class="row"> @foreach($status as $s) <div class="col-md-6"> <label class ...

javascriptjqueryajaxlaravel-5

Having trouble with installing Recharts through npm

When I try to install recharts using npm, I encounter the following error message in my console: npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! ...

javascriptnode.jsreactjsnpmrecharts

Tips and tricks for manipulating base64 images in Node.js

I have a unique challenge - I want to manipulate a base64 picture by adding just one extra pixel. My goal is to send a base64 image string (e.g. data:image/png;base64,iVBORw0KG...) from my express server. Let's say the image is 100x100px and I need to ...

javascriptnode.jsbase64

Are you sure all of your statements have been successful? This is the problem

Implement a selection sort algorithm that swaps values at a given position with the minimum value index. Use the swap and indexOfMinimum functions provided below. Despite following the logic, there seems to be an issue preventing the code from successful ...

javascriptarraysalgorithmselection-sort

strange occurrences in localToWorld transformation

Hello there! Currently, I'm working on a project where I'm generating a TextMesh using font geometry and placing it within an empty pivot object. My goal is to obtain the world coordinates of each vertex in the TextMesh so that I can manipulate ...

javascriptthree.js

Easily remove data using jQuery

$("#results").after(data) In my code snippet above, I am using jQuery to add some database results after a DIV element with the ID "results" whenever a button is clicked. The issue I am facing is that each time the button is clicked, new results are added ...

javascriptjqueryhtmlajax

"Unraveling the depths of a multidimensional array in JavaScript: a comprehensive guide

Seeking assistance from this wonderfully helpful community :) It seems like I might be declaring and creating my arrays incorrectly, as I am trying to add content to an array of arrays but unable to retrieve anything from it. Here's the code snippet ...

javascriptjqueryarraysmultidimensional-array

Identify distinct prefixes and eliminate them from an array of strings

If you have an array of strings in Javascript, is there a way to identify the common prefix among all the strings and then remove that prefix from each string? For instance: ["05098701", "05012302", "0545621", "0509301"] The common prefix in this case w ...

javascriptarrays

What is the optimal arrangement for constructors or classes in JavaScript code?

Constructors, being objects that are stored as copies, appear to behave similarly to variables in terms of their placement within the code. Unlike functions, constructors cannot be placed "anywhere" and must instead be positioned above the area where they ...

javascriptsortingvariablesconstructorprototype

How should the folder structure be set up for dynamic nested routes in Next.js?

I've been reviewing the documentation for Next.js and believe I grasp the concept of dynamic routing using [slug].js, but I am facing difficulty understanding nested dynamic routes in terms of folder organization. If I intend to develop an applicatio ...

javascriptdirectorynext.js

Dealing with Large JSON Strings in ASP.NET MVC Views

Large JSON Objects (approximately 1.5 MB) are received in Controller C1. They are then converted to strings and stored in a hidden label in View V1. The JSON data in V1 is utilized by parsing it in JavaScript J1. An occurrence of Out of Memory Excepti ...

javascriptc#asp.netasp.net-mvcjson

Troubining AJAX for Generating a New Template: Addressing Missing Template Error

I have been working on integrating AJAX into my to-do application, but I keep encountering a missing template error (Missing template items/create, application/create with {:locale=>[:en], :formats=>[:html], :variants=>[], :handlers=>[:erb, :bu ...

javascriptruby-on-railsajax

Issue with ngFor displaying only the second item in the array

There are supposed to be two editable input fields for each section, with corresponding data. However, only the second JSON from the sample is being displayed in both sections. The JSON in the TypeScript file appears as follows: this.sample = [ { "se ...

javascripthtmlangulartypescriptangular8

show fixed div when in view

After seeking inspiration from this specific thread on SO, I still need some help. The challenge I'm facing involves displaying a sticky footer within a parent div that is positioned halfway down the page. I've tried multiple tutorials, but none ...

javascripthtmljquerycss

Formulate a Generic Type using an Enum

I'm currently working on a project that involves creating a generic Type using enums. Enum export enum OverviewSections { ALL = 'all', SCORE = 'score_breakdown', PERFORMANCE = 'performance_over_time', ENGAGEMENT ...

javascripttypescripttypescript-typingstypescript-generics

Using an AJAX post request to retrieve the HTML content

I'm grappling with an AJAX function and a processor.php script. Here's the code snippet: $.ajax({ url: "processor.php", type:"POST", data: { 'id' : "itemid, 'itemname' : itemname, 'itemdesc' : itemdesc" ...

javascriptjqueryajax

Guide to Retrieving 'req' in JavaScript within Node.js / Express Framework

I have a loaded page named tournament/:key, where a Tournament object is passed. The Jade template accesses variables from the Tournament using syntax like #{tournamentData.name} to display the data on the page. The list of matches is stored as an array wi ...

javascriptnode.jsexpress