We're sorry, but the package path . cannot be found within the package's exports

No connection with Firebase due to error(s) in code.

File: firebase.js

Code:

import * as firebase from "firebase"

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

const app = !firebase.apps.length
  ? firebase.initializeApp(firebaseConfig)
  : firebase.app();

const db = app.firestore();
const auth = app.auth();
const provider = new firebase.auth.GoogleAuthProvider();

export { db, auth, provider };

Error(s):

Module not found: Package path . is not exported from package <project location>\node_modules\firebase (see exports field in <project location>\node_modules\firebase\package.json)
Did you mean './firebase'?
Requests that should resolve in the current directory need to start with './'.
Requests that start with a name are treated as module requests and resolve within module directories (node_modules).
If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.
> 1 | import * as firebase from "firebase";
  2 |
  3 | const firebaseConfig = {
  4 |   apiKey: "***",

Import trace for requested module:
./pages\_app.js

https://nextjs.org/docs/messages/module-not-found

File: ./pages_app.js

import "../styles/globals.css";
import { useAuthState } from "react-firebase-hooks/auth";
import { auth, db } from "../firebase";
import Login from "./login";

function MyApp({ Component, pageProps }) {
  const [user] = useAuthState(auth);

  if (!user) return <Login />;

  return <Component {...pageProps} />;
}

export default MyApp;

Answer №1

To update your firebase import, try using the following syntax:

import * as firebase from "firebase"

Answer №2

To fix the error message, simply swap out 'firebase' with './firebase'

Answer №3

Dealing with the same challenges, I found a solution that worked for me.

To resolve this issue, make sure to use:

import * as firebase from "firebase/app"

Instead of

import * as firebase from "firebase"
.

If you want to access all functions like GoogleAuthProvider,

Ensure you import it in the following way:

import { getAuth, GoogleAuthProvider } from "firebase/auth";

This change should help you overcome the problem you are facing.

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

Error: The function getOrders is not defined in the customerFactory

Throughout my third attempt at learning AngularJS, I've hit a roadblock. I could really use some assistance as I keep encountering the error TypeError: customerFactory.getOrders is not a function. Despite thoroughly checking for typos, I haven't ...

Differences in retrieving data from Cloud Firestore on Android versus IOS devices

I've noticed a discrepancy when executing the following code between Android and iOS: Future fetchData() async{ return await kioskCollection.document(uid).get().then((DocumentSnapshot ds) { return ds.data; }); When I log this: In Android ...

Upgrade your function to utilize Firebase V9 with Next.js framework

I recently updated my project to use version 9 of firebase, and since then, I've been encountering some code errors that I'm struggling to resolve. The previous function had the following structure, but now I need to update it to work with the n ...

Dynamically alter the class of the menu on the master page

Can anyone provide guidance on updating the CSS Class name of a menu located in the Master page from a Child Page? I aim to switch the class to "active" whenever any child form of the menu is open. Are there any C# or JavaScript solutions for this scenar ...

Struggling with displaying Vuetify list items correctly?

I am implementing vuetify to display the list items in the following structure: Interests btn1 btn2 btn3 btn4 Not Interests btn1 btn2 btn3 btn4 However, the titles "Interests" and "Not Interests" are not showing up correctly. <v-layout row wrap&g ...

Getting hands-on with Express.js and gaining a foundational understanding of Angular

Thank you for taking the time to read my inquiry. As a developer experienced in PHP, particularly with Laravel, and possessing basic knowledge of AngularJS concepts such as routing, directives, and resource, I have been utilizing Laravel on the backend an ...

What is the best way to choose the initial and final <td> that appears within a <tr>?

I am working with an html table that has the following structure: <table> <tbody> <tr> <input type="hidden" name="a" value="x"> <input type="hidden" name="b" value="y"> <td>First Ce ...

Unable to relocate the cursor to an empty paragraph tag

Wow, I can't believe how challenging this issue is. My current project involves implementing the functionality for an enter key in a content editable div. Whenever the user hits enter, I either create a new p tag and add it to the document or split t ...

Is there a way to link code and unit testing directly to npm test?

Is there a method to conduct unit testing in real-time on my server without having to create temporary files? I am looking for a way to supply both the code to be tested and the corresponding unit test to npm test. The information provided in the npm test ...

Generate a new dynamic page in ASP.NET C# eCommerce platform whenever a user posts their item

Currently, I am in the process of building a website similar to eBay where users can list their own items for sale. My main concern is ensuring that each time a user posts an item on our site, a new link or page will be automatically generated. The same go ...

What are the reasons and situations where it is beneficial to utilize the input type

Could someone provide an explanation on this subject, detailing its purpose and how it should be understood? <input type="hidden" name="msg" value="GATEFORUM|OE180187|NA|0.00|NA|NA|NA|INR|NA|R|gateforum|NA|NA|F|AMIT SINGH|9993523486|gis16|NA|NA|NA|NA ...

How can I combine a Next.js Link with MUI's Pagination component?

I am currently utilizing Next.js along with the MUI design system in my project. One of the components includes a table with multiple pages and utilizes the Pagination component from MUI to navigate through different pages within the table. Currently, I am ...

Are you experiencing issues with the cross-origin request failing in react-map-gl?

While setting up a map in react-map-gl and providing my access token, I encountered the following console error: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://events.mapbox.com/events/v2?access_token= ...

Angular Dynamic Table Column Adaptor

Recently, I came across the adpt-strap table lite and decided to experiment with it. Here is the JSfiddle link for the project I was working on: http://jsfiddle.net/cx5gm0sa/ My main goal was to dynamically hide or show a column. In my code, I added $scop ...

Transformation of CSS classes in React with Webpack

Have you ever noticed that when you inspect the Airbnb website, the classnames appear to be morphed into single alphanumeric names? What is the name of this technique and is it applied at the code level or build level? https://i.sstatic.net/qSiaj.jpg ...

Managing a variety of PHP responses using AJAX

I am currently in the process of designing PHP pages for form processing. On these pages, I aim to redirect if the result is successful or display an error message in case of any errors. The structure of the pages is as follows: $arg = $_POST["arg"]; if ( ...

What is the best method to generate a distinct identifier for individual input fields using either JavaScript or jQuery?

I have attempted to copy the table n number of times using a for loop. Unfortunately, the for loop seems to only work on the first iteration. I am aware that this is due to not having unique IDs assigned to each table. As a beginner, I am unsure how to cre ...

What is the best way to integrate TimeOut feature into an existing slider code?

I'm currently working on a simple slider with buttons that is functioning well. However, I am looking to incorporate the TimeOut() function into the existing code to enable automatic slide transitions. My attempts to achieve this using jQuery have be ...

The error message "Cannot access property 'findAll' of undefined in expressjs" is displayed

An issue has occurred with ExpressJS: TypeError - Cannot read property 'findAll' of undefined. It seems that all Sequelize functions are not working correctly. Numerous errors are popping up, such as "Cannot read property 'sequelize method& ...

Exploring the challenging surfaces of a mesh through raycasting in Three.js

I successfully built a box using three.js var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 100, window.innerWidth/window.innerHeight, 0.1, 1000 ); camera.position.set(5, 5, 10); var geo = new THREE.BoxGeometry(5,2,5); var mat = n ...