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

Question

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.

Answer 1

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

Answer 2

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.

Answer 3

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

Answer 4

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