As I embark on building my web application using next.js, I begin by importing firebase from the "firebase" package. Unfortunately, a particular error unexpectedly surfaces in the terminal

I am currently developing a next.js web application and I have decided to utilize firebase for both database management and authentication. However, when attempting to import firebase in a specific file, I encountered the following error:

Error - ./firebase.js:1:0
Module not found: Package path . is not exported from package /home/naveen/New Folder/whatsapp-2/node_modules/firebase (see exports field in /home/naveen/New Folder/whatsapp-2/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 firebase from "firebase";
  2 | 
  3 | const firebaseConfig = {
  4 |   apiKey: "AIzaSyAS5PuV434Qb5IqgMHnte1UKha-31PjB-Y",

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

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

Below is the content of my firebase.js file:

import firebase from "firebase";

const firebaseConfig = {
  apiKey: "AIzaSyAS5PuV434Qb5IqgMHnte1UKha-31PjB-Y",
  authDomain: "whatsapp-2-b5a79.firebaseapp.com",
  projectId: "whatsapp-2-b5a79",
  storageBucket: "whatsapp-2-b5a79.appspot.com",
  messagingSenderId: "960710517268",
  appId: "1:960710517268:web:42e2b65fd273553966fd01",
};

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 };

Moreover, this here is the snapshot of my package.json file:

{
  "name": "whatsapp-2",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@material-ui/core": "^4.12.3",
    "@material-ui/icons": "^4.11.2",
    "email-validator": "^2.0.4",
    "firebase": "^9.0.0",
    "next": "11.1.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-firebase-hooks": "^3.0.4",
    "styled-components": "^5.3.1"
  },
  "devDependencies": {
    "eslint": "7.32.0",
    "eslint-config-next": "11.1.0"
  }
}

Lastly, presented below is the exports field information from package.json within node_modules.firebase :

{  "exports": {
    "./analytics": {
      "node": {
        "require": "./analytics/dist/index.cjs.js",
        "import": "./analytics/dist/index.mjs"
      },
      "default": "./analytics/dist/index.esm.js"
    },
    "./app": {
     ...
    }
    ...(more entries)...
    
  },
}

In addition to installing firebase using yarn by running the command 'yarn add firebase', what steps might I be missing or doing incorrectly?

javascriptfirebasenext.jsyarnpkg

Answer №1

Reminder: The default export from the firebase SDK comes from firebase/app, not just firebase

Also, if you are working with the new firebase SDK V9 that was recently released, there are a few things to address:

  • The 'react-firebase-hooks' package you are using does not yet support firebase V9. The PR is still open on their GitHub page here
  • With this updated SDK version, there are some changes to keep in mind. Check out this helpful guide for more information
  • If you prefer to stick with the V8 syntax, you can continue using it by adding 'compat' inside all your imports like this:
import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import "firebase/compat/firestore";
import "firebase/compat/storage";

Feel free to reach out if you need further assistance ;)

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

Tips for populating a Flat List with nested JSON data in React-Native

As a beginner in React-Native and Javascript, I'm trying to figure out how to retrieve data for my FlatList. The JSON format I receive is structured like this: [ { "18": { "sellingUnitName": "unité(s)", "qualifier": "GOOD", " ...

javascriptjsonreact-native

Find all elements with the same class and identify the first element among them using jQuery

In my dynamic data structure, I need to filter out all elements with the class name "My_data" and select the first one. In the code below, I am looking to retrieve the first element with the class "My_data". <div class="all_data"> <div class="lis ...

javascriptjqueryhtmljquery-selectorsjquery-filter

Parent menu fails to trigger the opening of child menu upon clicking

I'm struggling to modify a Wordpress theme to enable the child menus to expand when clicking on the parent menus. Is there a way to edit this code to make that functionality work? // Implement expandable menus var expand_link = $('<a class="m ...

javascriptcsswordpress

Error in AWS Cloud Development Kit: Cannot access properties of undefined while trying to read 'Parameters'

I am currently utilizing aws cdk 2.132.1 to implement a basic Lambda application. Within my project, there is one stack named AllStack.ts which acts as the parent stack for all other stacks (DynamoDB, SNS, SQS, StepFunction, etc.), here is an overview: im ...

javascripttypescriptamazon-web-servicesaws-cloudformationaws-cdk

Is there a way to assess Python code within a document's context using JavaScript in JupyterLab?

When using Jupyter Notebooks, I can create a cell with the following JavaScript code: %%javascript IPython.notebook.kernel.execute('x = 42') After executing this code, in another cell containing Python code, the variable x will be bound to 42 a ...

javascriptpythontypescriptjupyter-lab

Retrieve the nth element from an array using a function that requires 2 arguments

During my coding journey, I encountered a challenge that has proven to be quite tricky. The task in question goes as follows: Create a function that accepts an array (a) and a value (n) as parameters Identify and store every nth element from the array in ...

javascriptarraysfunctionfilter

Utilize Google's Places Direction API Autocomplete feature to pre-select the starting location

I am currently utilizing draggable markers along with 2 autocompletes to assist with obtaining directions. You can find more information about this setup here: https://developers.google.com/maps/documentation/javascript/examples/directions-draggable. With ...

javascriptgoogle-mapsautocomplete

Making a column in a Vue data grid return as a clickable button

My goal is to utilize vue.js grid to display multiple columns with calculated text values, along with a clickable column at the end that triggers a dynamic action based on a parameter (such as calling an API in Laravel). However, when I include the last c ...

javascriptwebvue.js

Is it possible to reach the maximum write capacity per second per database if I create a document using Promise.all in this manner?

I'm currently in the process of developing an app and I need to send a message to all my users' inboxes. The code I'm using in my cloud functions looks like this: const query = db.collection(`users`) .where("las ...

node.jsfirebasegoogle-cloud-firestoregoogle-cloud-functions

Is it possible to dynamically override inline styles?

My HTML code is as follows: <div title="remove css"style="position:relative;">Remove my style</div> After the page loads, I need to completely remove the position style attribute. Due to limitations, I cannot override the CSS. Is there a way ...

javascriptjquerycssangularjs

Display a hyperlink in an iframe on the main page from a different domain using JavaScript

I'm currently using Angular with Wirecard as my payment provider. When I need to add a payment, I open an iframe that directs the user to the Wirecard site to accept the payment. Once the user clicks accept, I provide a link back to my site from Wirec ...

javascriptangularjsiframe

Unusual $http Angular.js POST inquiry

Hey there, I'm facing a peculiar issue in my web development project. I have a table that acts as an input field where users can enter data and then send it back to the Spring Rest API. The data is received as a String and then parsed using the Gson l ...

javascriptangularjsajaxspringrest

Unable to make changes while state transition is in progress

I want to update the state value based on the result of a promise method. To have optimistic updates, I set the state value before an asynchronous operation. If the operation fails, the state is reset. componentWillMount(){ this.setState({notify: this ...

javascriptreactjsreact-native

Tips for Utilizing jQuery each Loop

I am attempting to create a foreach loop that will iterate through hidden values on the page, compare them with an external API using Ajax, and display the API results in a < ul > for example. Sample model ITEM1 metavalue (which needs to be che ...

javascriptphpjqueryforeach

``Error: GraphQL server unable to initiate due to a failure in the module.exports

While learning GraphQL, I encountered an error when attempting to start a server. const graphql = require('graphql'); const _ = require('lodash'); const { GraphQLObjectType, GraphQLString, GraphQLInt, GraphQLSchema } ...

javascriptnode.jsexpressgraphql

Child component not displaying React props (although I can identify them in debug mode)

Currently, I am working on a React project that does not involve Redux. However, I am encountering some difficulties in passing the state from the parent component to the child component. Despite watching numerous tutorials and extensively using the Chrome ...

javascriptreactjsjsxreact-props

Implementing Case-Insensitive Routes with NextJS Redirects

I'm currently revamping an entire website that previously supported case-insensitive routes. This means that someone could enter: or and both URLs would lead to the same page. In my implementation using NextJS 11, I have a file in the pages director ...

reactjsnext.jsvercel

Customizing error styles in a table using Jquery validation

My form is using JQuery .validation(). Here is the structure of my form: <form....> <table cellspacing="0" cellpadding="0"> <tr> <td>Name: </td> <td><input type='text' name='Name'/></td> ...

javascriptjqueryhtmlcss

What is preventing me from displaying an AJAX JSON value on my website?

Below is the code snippet: <ul> <li v-for="value in RandomTopic" :key="value.id">{{ value.title }}</li> </ul> export default { data() { return { RandomTopic: null } }, mounted() { ///so ...

javascriptvue.jsvuejs3

Live calculation feature for dropdown menus

I have a form where I need to calculate the total result after submission. The package and event ID should be added together, and the guest field should always be calculated (guest value * 5). The final result should be displayed in <div id="result"> ...

javascriptphpajaxcalculator