export 'firestore' (imported as 'firebase') was not found in 'firebase' after upgrading to firebase js sdk v8

Question

I have upgraded the firebase JS SDK from v7 to v8.0.0 and I am importing firebase like so.

import * as firebase from 'firebase';

Accessing any of the following causes the error below.

firebase.firestore.FieldValue.serverTimestamp()
firebase.User
firebase.auth.UserCredential

export 'firestore' (imported as 'firebase') was not found in 'firebase' Property 'firestore' does not exist on type 'typeof import("appPath/node_modules/firebase/index")'

I have found a workaround by changing firebase to firebase.default e.g.

firebase.default.firestore.FieldValue.serverTimestamp()

Is this the correct approach to resolve this?

EDIT: I am also using AngularFire in the project. I tried using:

import firebase from 'firebase/app';
import 'firebase/firestore';
export const firestore = firebase.firestore();

But this gave me the following error:

Uncaught FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).

score 30 · Answer 1 · answered Sep 03 '21 at 01:12

30

For those getting similar error on version 9 Firebase, make sure to change your path to:

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

instead of:

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

Taken from firebase doc

answered Sep 03 '21 at 01:12

Louis M.

301
3
4

It works perfectly! Thanks. Could you please tell me how you know about this change? – Sabbir Sobhani Sep 05 '21 at 14:19
@Sobhani No prob! Tbh found out recently myself when I was re-iterating one of my client projects. Noticed a v8.x.x -> v9.x.x update so checked the docs for any major changes. – Louis M. Sep 06 '21 at 19:49
worked for me thank you brother ! – faijan memon Dec 23 '21 at 20:44

score 15 · Accepted Answer · answered Jan 11 '21 at 02:40

I ran into the same problem when I updated to Angular 11. I tried the fix to install the firebase-admin library and followed the directions from this thread, but that is not supposed to run in a browser and caused some other issues, so I abandoned that.

I noticed from the release notes of AngularFire that the latest version does not support older versions of the JS SDK, which is where this function comes from, and so I deleted node_modules, the package-lock.json file, and ran npm cache clean --force and then npm install to run clean. That did nothing, but I felt accomplished.

And then I ran into this thread which explained my issue and got things to compile by changing the library from

'import * as firebase from 'firebase/app';

to

import firebase from 'firebase/app';

That removed the "cannot find firestore" error and it compiled correctly. Works with the original code:

get firebaseTimestamp() { return firebase.firestore.FieldValue.serverTimestamp(); }

Hope this helps - it was a sticky bug.

See: https://firebase.google.com/support/release-notes/js#version_800_-_october_26_2020 — Julien Bérubé, Feb 11 '21 at 03:05
in case of React, the explanation: In versions 9.0.0 and later, Firebase has introduced a new modular SDK. This new SDK provides a simpler and more intuitive API, with improved performance and better tree shaking. So, when using Firebase with React, it's recommended to use the new modular SDK `firebase/compat/app` and import the specific packages that your project needs, instead of the older namespaced SDK. — Junior Mayhé, Mar 16 '23 at 20:05

score 4 · Answer 3 · edited Mar 25 '21 at 15:31

4

Use

import firebase from "firebase/app";
import "firebase/database";

instead of

'import * as firebase from 'firebase/app';

This may help

edited Mar 25 '21 at 15:31

Dmytro Rostopira

10,588
4
64
86

answered Mar 25 '21 at 08:56

Gowthaman

59
7

score 3 · Answer 4 · answered Jul 07 '22 at 05:33

Before: version 8

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

CHANGE TO ====>

After: version 9 compact

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

Unity Fx · Answer 5 · 2022-05-15T00:41:47.377

1

Hi here the form that i use

import { AngularFireAuth } from '@angular/fire/compat/auth';

import firebase from 'firebase/compat/app';

Hope it help's !

edited May 15 '22 at 00:41

answered May 15 '22 at 00:41

Unity Fx

11
3

score 0 · Answer 6 · edited Dec 05 '21 at 20:19

0

Actually you just have to do:

import "firebase/compat/database"; // in angular-fire-database.js

import firebase from 'firebase/compat/app'; // in angular-fire.js

edited Dec 05 '21 at 20:19

Tilo

605
7
15

answered Dec 03 '21 at 22:30

Aditya Bhadoria

11
1

score 0 · Answer 7 · answered Nov 20 '22 at 16:48

0

Compiled with problems: export 'default' (imported as 'firebase') was not found in 'firebase/app'

import firebase from 'firebase/app';
import { auth } from '../misc/firebase';

According to v9 update, I've changed the import statement but the error still persists

import firebase from 'firebase/compat/app';

answered Nov 20 '22 at 16:48

Asha Saini

13
5

So, alongwith the files where you're using firebase, you've to update the new syntax in firebase.js too. I kind of missed on that, that's why the error keeps occurring. Changes made: `import firebase from 'firebase/compat/app'; import 'firebase/compat/auth'; ` – Asha Saini Nov 23 '22 at 07:40

export 'firestore' (imported as 'firebase') was not found in 'firebase' after upgrading to firebase js sdk v8

7 Answers7

Linked