23

I'm trying to import firebase in a Vue 2 app, but I'm running into this annoying issue.

My imports look like:

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

but when I serve it, I get:

export 'default' (imported as 'firebase') was not found in 'firebase/app'

...and my views don't render or route.

My version of firebase is 9.0.0 off of npm.

Doug Stevenson
  • 297,357
  • 32
  • 422
  • 441
T. Lerner
  • 421
  • 1
  • 3
  • 7
  • 2
    Please edit the question to be clear about the version of the Firebase SDK you're using. The way it's used has changed over versions. Note that today marks the release of 9.x. – Doug Stevenson Aug 25 '21 at 20:44

5 Answers5

69

Due to release of Firebase SDK Version 9 on 25th August 2021, many users using Firebase Web SDK version 8 are struggling with the same issue.

According to the documentation, Apps currently using Firebase Web SDK version 8 or earlier should consider migrating to version 9 as follows:

Before: version 8 (Old)

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

After: version 9 compat (New)

// v9 compat packages are API compatible with v8 code
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
utkarsh404
  • 840
  • 5
  • 8
  • This was the issue for me, went from `import firebase from "firebase/app"` to adding the `compat` in the middle...yeup. not anywhere in the docs, either. thank you kind stranger! – dmanexe Jul 28 '23 at 08:28
9

Due to Doug Stevenson's suggestion to check my firebase version, I ended up checking firebase's upgrade docs and found this https://firebase.google.com/docs/web/modular-upgrade

Following the instructions there (changing the paths from firebase/x to firebase/compat/x) fixed my issue perfectly. Thank you all, and I hope any other clueless folk like myself confused by the new format can be helped by this post.

T. Lerner
  • 421
  • 1
  • 3
  • 7
5

According to firebase documents: Update imports to v9 compat. In order to keep your code functioning after updating your dependency from v8 to v9 beta, change your import statements to use the “compat” version of each import. For example:

Before: version 8

import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
import "firebase/database";
import "firebase/storage";

After: version 9 compat // v9 compat packages are API compatible with v8 code

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
import "firebase/compat/database";
import "firebase/compat/storage";
blaaool
  • 51
  • 1
  • 5
1

adding /compat for that three lines worked on my react project

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

gozdetekalmaz
  • 11
  • 1
1
// v9 compat packages are API compatible with v8 code
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
import "firebase/compat/database";
import "firebase/compat/storage";
Eric Gregory
  • 11
  • 1