The error: “export ‘default’ (imported as ‘firebase’) was not found in ‘firebase/app’” is a common error that can show up in many ways. In this blog, we will go through some of the ways you can fix this issue. Read on.

Why does this problem happen?

Many users using Firebase Web SDK version 8 are struggling with this problem. The cause is from the old version and have not updated yet.  In this case, v9 compatibility is the most updated version for the Firebase Web SDK and old version dose not works if you use that. When utilizing firebase in your vue app, you may face the following issue:

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

How To Solve The Error: “export ‘default’ (imported as ‘firebase’) was not found in ‘firebase/app’”?

To solve the “export ‘default’ (imported as ‘firebase’) was not found in ‘firebase/app’” error, simply upgrade imports to v9 compatibility, according to Firebase docs. Modify your import statements to utilize the “compat” version of each import to keep the code working after upgrading your dependence from v8 to v9 beta. 

Our Approach: Change to version 9

Simply upgrade imports to v9 compatibility, according to Firebase docs. Modify your import statements to utilize the “compat” version of each import to keep the code working after upgrading your dependence from v8 to v9 beta. The following is an example.

Before: Version 8

import firebase from 'firebase/app';

import 'firebase/auth';

import 'firebase/firestore';

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

Conclusion

We hope you enjoyed our article about the error. With this knowledge, we know that you can fix your error: “export ‘default’ (imported as ‘firebase’) was not found in ‘firebase/app’” quickly by following these steps! If you still have any other questions about fixing this syntax error, please leave a comment below. Thank you for reading!