CODEWITHSUNDEEP
angulartypescriptfirebaseangularfire
MadMac
MadMac

Reputation: 4851

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

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).

Upvotes: 15

Views: 37399

Answers (9)

Shah Fahad
Shah Fahad

Reputation: 207

Incase of React. For Firebase JS SDK v7.20.0 and later.

Suppose, You want to upload media files such as images.

Follow these Steps:

  1. Create a directory in src/firebase/firebaseConfig.js
/** src/firebase/firebaseConfig.js */

// FIREBASE: SDK

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
// Add Your own Firebase Creditentials
const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
  measurementId: "",
};

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

// Export
export { firebaseapp };
  1. In your Upload Script Add this
/** imageUpload.js */
// Export the firebase from: src/firebase/firebaseConfig.js
import firebaseapp from "/firebase/firebaseConfig";
import { getStorage, ref } from "firebase/storage";

// init the firebase app
const storage = getStorage(firebaseapp);

// Get a Storage Reference and Then Upload Files: file refer to image file
const storageRef = ref(storage, `images/` + file.name);
const uploadTask = uploadBytesResumable(storageRef, file);

// Check your firebase, files will be uploaded there

Checkout official documentation: Firebase Storage Web

Upvotes: 0

Chohan
Chohan

Reputation: 1

The issue with your config.js file lies in how you are initializing the Firebase storage and Firestore instances.

In Firebase version 9 (also known as Modular SDK), the method of initializing Firebase and accessing its services has changed. You should use the modular Firebase SDK syntax instead of the namespace import approach used in Firebase version 8 and below.

Here's how you can correct your config.js file using the Firebase Modular SDK syntax:

import { initializeApp } from "firebase/app";
import { getStorage } from "firebase/storage";

Upvotes: 0

Asha Saini
Asha Saini

Reputation: 23

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

Upvotes: 0

Papy Kabukanyi
Papy Kabukanyi

Reputation: 31

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

Upvotes: 3

Slashy Fx
Slashy Fx

Reputation: 11

Hi here the form that i use

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

import firebase from 'firebase/compat/app';

Hope it help's !

Upvotes: 1

Aditya Bhadoria
Aditya Bhadoria

Reputation: 11

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

Upvotes: 0

Louis M.
Louis M.

Reputation: 331

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

Upvotes: 33

Gowthaman
Gowthaman

Reputation: 71

Use

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

instead of

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

This may help

Upvotes: 4

Kevin Dick
Kevin Dick

Reputation: 28

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.

Upvotes: 15

Related Questions