Error message: 'firebase/app' does not export 'app' (imported as 'firebase') - Import attempt failed

Encountered a strange issue today. As I tried to import firebase, an error popped up:

./node_modules/firebaseui/dist/esm.js
Attempted import error: 'app' is not exported from 'firebase/app' (imported as 'firebase').

The setup of my project goes as follows: There is a parent folder containing a react client folder. Firebase was installed in the parent folder, and a firebase app was initialized in the firebaseConfig file within the parent folder, which was then imported into the react client folder.

At one point, I attempted installing firebase directly in the react client folder and importing it there. However, after installing firebase in the client folder, running "npm ls firebase" returned empty, despite firebase being present in the node modules and package.json within the client folder. This situation left me puzzled as to what might have caused this issue.

firebaseConfig.js in the parent folder

import firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/auth';

const firebaseConfig = {
    ......
};

firebase.initializeApp(firebaseConfig);

export default firebase;

Answer №1

We regret to inform you that after updating your "firebase" dependency to version 8.0.0, it appears that the "firebaseui" dependency is not yet compatible with this latest version. As a temporary solution, we recommend downgrading firebase to version 7.24.0 until firebaseui fully supports the recent changes in 8.0.0.

Answer №2

There seems to be an issue with updating, as you can adjust how you import firebase on your end but may not be able to control how it's imported in the libraries you utilize. You will need to wait for those libraries to be updated.

Prior to version 8.0.0

import * as firebase from 'firebase/app'

Starting from version 8.0.0

import firebase from 'firebase/app'

One example is FirebaseUI authentication library

Answer №3

During my use of Firebase, I was utilizing version Firebase>8.0.0
The line of code I initially used was

import * as firebase from 'firebase/app';
which is suitable for Firebase<8.0.0

For those currently using firebase>8.0.0 (as of 4th Aug 2021), please switch to using this code instead:
import firebase from 'firebase/app';

Changes may occur in future versions.
This issue is due to the incorrect line of code being used, and not a fault with the system.
Check the package.json file in your project folder.

Take a look at the package.json file here:

Verify the firebase version in the package.json file

Answer №4

After setting up firebase on my project, I noticed that the default version installed was 9.0.0. Unfortunately, this led to an error message prompting me to make a change. Upon downgrading to version 8.9.1 and importing it using the code snippet below, the issue was resolved successfully.

import firebase from 'firebase/app'

Answer №5

To start off, the first step is to identify your firebase version:

firebase --version

In case you are using version 9, make sure to update this line with the following:

import firebase from 'firebase/compat/app'

For more information, check out:

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

Expanding the size of a textarea using JavaScript

JavaScript: function adjustRows() { var value = document.getElementById("test1").value.length; if (value <= 18) { value.rows = 1; } else if (value > 18 && value < 36) { value.rows = 2; } else if (value > 36 && v ...

The setState function in ReactJS seems to be failing to properly update the fields

I am having trouble resetting the value of my input type to empty after storing data from a controlled form element. The first method below is not working for me, even though I'm using setState to clear the input fields. Can someone help me understand ...

AngularJS: incorporating various functionalities within a single controller

I have a basic AngularJS controller that I am working on, and I would like it to include two separate functions: var app = angular.module('searchApp', []); app.controller('searchCtrl', function($scope, $http, $log) { //Function 1 ...

Require npm to fetch files from a secure registry

Within my nodejs project, I found myself in a situation where I needed to alter 4 of the node modules and then upload them to our company's private registry. This way, when the project is built, it will fetch the modified versions from our private reg ...

The resolveMX function in Google Cloud Functions is encountering issues when trying to process a list of domains

Here is the task at hand. I have a large list of domains, over 100,000 in total, and I need to iterate through them using a foreach loop to resolve MX records for each domain. Once resolved, I then save the MX records into another database. Below is the c ...

Explore various locations and conceal different divs by clicking

Can someone help me figure out how to hide the placeholders when the focus changes in a form? Here is the code snippet that illustrates my problem. Your assistance is greatly appreciated, João var inputs = Array.prototype.slice.call(document.querySele ...

Unable to decipher the mysterious map of nothingness

I am currently working on a GET method in Node.js. My goal is to fetch data using the GET request and then use the MAP function to gather all the names into an array. However, I encountered the following error: /root/server.js:21 ...

Looking for assistance with implementing the Vue CDN script in a Laravel Blade template

Hey everyone, currently I am working on a project called Register Page. My goal is to incorporate Vue cdn and Vue Consoles within the blade template. I have implemented a show/hide option without any console errors appearing. However, when I click on the ...

What is the best way to create an index for a user-provided value in a textbox

Looking for guidance on how to set an index to user-provided values in a textbox, append them to a table in a new row, and display that index in the first column of every row. I am unfamiliar with this type of functionality. $(document).ready(function() ...

Attempting to transition to react 18 leads to complications with package dependencies

I have just created a new project with create-react-app and my package.json file looks like this: { "name": "web", "version": "0.1.0", "private": true, "dependencies": { "@emotion/react": "^11.10.0", "@emotion/styled": "^11.10.0", "@fon ...

The revalidation feature in Next.js' getStaticProps function does not seem to be

https://i.stack.imgur.com/vnNMQ.png I have a question regarding my use of the getStaticProps function in index.js. I am trying to ensure that my API call runs every 60 seconds when a user visits my page, but I am experiencing issues with revalidate not wo ...

What is the best way to integrate properties subsets into your classes?

In my code, I am working with 3 classes ... class1 { constructor(a, b, c) { this.a = a; this.b = b; this.c = c; this.toClass2 = function() { // TODO: return this as an instance of class2; // the conversion would remove the un ...

Managing additional components in request JSON when communicating with DialogFlow, previously known as Api.ai

My current challenge involves enhancing the information sent in a JSON request from my application to DialogFlow. While I am familiar with triggering events to send data calling an intent through the method described in Sending Parameters in a Query Reques ...

Is there a way to retrieve the client's IP address from the server side within a Next.js application?

How can I determine the user's time zone and location in order to generate a server-side page tailored to their specific location and time zone? I am struggling to retrieve the user's IP address from the request or the localhost IP address (127.0 ...

If the condition is met with the presence of X in the string, execute one action; otherwise, proceed with

Currently, my code successfully grabs the results: module.exports = async function grabResult(page) { const message = await page.$eval( 'div > div:nth-child(2)', (el) => el.innerText ); const username = await page.$eval( ...

Geoserver does not have the 'Access-Control-Allow-Origin' header

map.on('singleclick', function (evt) { document.getElementById('info').innerHTML = "Looks like you need to redo this :) !!!"; var view = map.getView(); var viewResolution = view.getResolution(); var source = hcm.getSource(); var url = s ...

The d3 drag functionality is only active when the axis ticks are selected

Currently, I am developing a unique package that combines Angular and D3 (v3) and my main focus is on integrating D3's dragging feature into the package. Although I am very close to achieving success, there is a minor bug that I need to address. When ...

Tips for structuring commands in Discord.js

I'm in the process of restructuring my bot's commands. I currently have a folder called commands with all my commands inside, but I want to make it more organized by categorizing them into moderators, fun, and global like this: commands > mo ...

Experiencing occasional "Cannot GET /" error when using node.js on Bluemix

My Bluemix services are giving me trouble. I keep encountering the error "Cannot GET /pathname" on my node.js express services. Strangely, this issue only occurs about one-third of the time. There is no logging or error messages in the application when thi ...

Swapping values in JSON by comparing specific keys: A guide

I have JSON data that contains a key called reportData with an array of values: {"reportData":[ ["1185","R","4t","G","06","L","GT","04309","2546","2015","CF FE","01H1","20","23840","FF20"], ["1186","R","5t","R","01","L","TP","00110","1854","2016" ...