Error: Module not found - The package path "." is not exported from the specified package. As a result, Firebase will not update in your Next.js

Question

Error: Module not found - The package path "." is not exported from the specified package. As a result, Firebase will not update in your Next.js

I have been developing a Next.js application that retrieves data from a Firebase collection. During the process of connecting to the Firebase database, I have come across the following error:

Failed to compile. Module not found

This error seems to be originating from the config.js file containing Firebase credentials located at: root > src > firebase > config.js

Upon running npm firebase -v, it shows the installed version as 8.19.2 However, the package.json indicates that it should be ^9.8.0 I have attempted to update Firebase but encountered issues with the update.

The structure of the config file is as follows:

import firebase from 'firebase'; 
import { initializeApp } from 'firebase-admin';
import { getFirestore } from 'firebase/firestore';

const firebaseConfig = {
    apiKey: "xxxx",
    authDomain: "xxxx",
    projectId: "xxxx",
    storageBucket: "xxxx",
    messagingSenderId: "xxxx",
    appId: "xxxx",
    measurementId: "xxxx"
  };

  const app = initializeApp(firebaseConfig);
  const db = getFirestore(app);

  export default db;

And this is how the package.json file looks like:

{
  "name": "with-redux-toolkit",
  "version": "1.0.0",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    ...
  },
  "license": "MIT",
  "devDependencies": {
    ...
  }
}

If anyone has any insights or solutions regarding this issue, I would greatly appreciate your help.

Thank you in advance.

javascript firebase npm next.js

Answer 1

Answer №1

Utilize

"firebase": "^9.8.0"

in your project. Consider following the instructions from the official Firebase 9 docs or refer to the documentation on npm regarding firebase 9:

Official Firebase 9 Documentation:

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

// Make sure to replace this with your app's Firebase project configuration
const firebaseConfig = {
  // ...
};

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


// Initialize Firebase Authentication and obtain a reference to the service
const auth = getAuth(app);

Npm Secondary Reference:

import { initializeApp } from 'firebase/app';
import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';
// Utilize this pattern for importing other Firebase services
// import { } from 'firebase/<service>';

// Replace the below with your app's Firebase project configuration
const firebaseConfig = {
  //...
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

Your config.js should resemble:

import { initializeApp } from "firebase/app";
import { getFirestore } from 'firebase/firestore/lite';

const firebaseConfig = {
    apiKey: "xxxx",
    authDomain: "xxxx",
    projectId: "xxxx",
    storageBucket: "xxxx",
    messagingSenderId: "xxxx",
    appId: "xxxx",
    measurementId: "xxxx"
  };


const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);

export default db;

This command :

npm firebase -v

Returns the current npm version :-P

To accurately check the firebase version on Your system, make sure to globally install it! reference : https://firebase.google.com/docs/cli#install-cli-mac-linux

Once installed, you can verify the version using the command:

firebase --version

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

Answer 2

Utilize

"firebase": "^9.8.0"

in your project. Consider following the instructions from the official Firebase 9 docs or refer to the documentation on npm regarding firebase 9:

Official Firebase 9 Documentation:

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

// Make sure to replace this with your app's Firebase project configuration
const firebaseConfig = {
  // ...
};

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


// Initialize Firebase Authentication and obtain a reference to the service
const auth = getAuth(app);

Npm Secondary Reference:

import { initializeApp } from 'firebase/app';
import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';
// Utilize this pattern for importing other Firebase services
// import { } from 'firebase/<service>';

// Replace the below with your app's Firebase project configuration
const firebaseConfig = {
  //...
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

Your config.js should resemble:

import { initializeApp } from "firebase/app";
import { getFirestore } from 'firebase/firestore/lite';

const firebaseConfig = {
    apiKey: "xxxx",
    authDomain: "xxxx",
    projectId: "xxxx",
    storageBucket: "xxxx",
    messagingSenderId: "xxxx",
    appId: "xxxx",
    measurementId: "xxxx"
  };


const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);

export default db;

This command :

npm firebase -v

Returns the current npm version :-P

To accurately check the firebase version on Your system, make sure to globally install it! reference : https://firebase.google.com/docs/cli#install-cli-mac-linux

Once installed, you can verify the version using the command:

firebase --version

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

Error: Module not found - The package path "." is not exported from the specified package. As a result, Firebase will not update in your Next.js

Answer №1

Similar questions

The getTotalLength() method in SVG may not provide an accurate size measurement when dealing with non-scaling-stroke. To obtain the correct scale of

Utilize Node.js and Cheerio to extract data from an HTML table

Determining the moment a user exits a page on Next JS

Unable to detect hover (etc) events after generating div elements with innerHTML method

Using AJAX to handle 404 errors in Slim PHP

Tips for managing cookies in an Angular.js project

Is there a way to make this eval() function function properly in Internet Explorer?

Proper syntax for SVG props in JSX

Discovering repeated arrays within an array

What is the best way to refresh a page after rotating the web page?

Traverse an array in JavaScript and display the elements

Is there a way to extract the content length from the raw DraftJS data?

What is the best way to toggle between a login and signup form using an anchor tag in a React application?

Show a dynamic Swiper carousel upon selecting a thumbnail in an image gallery

Listening for select elements that have remained unchanged

"Successfully implementing AJAX POST functionality, but encountering issues where callbacks are not triggering

Execute functions upon the completion of jQuery ajax requests

Warning: Unhandled promise rejection occurred while running the test

Encountering issues with styled component's flex not functioning as expected in React

The jQuery ajax function is not properly displaying or hiding the loader div