angularfire: Build error: This module is declared with using 'export ='

After updating to v6.0.4 from v6.0.3 I am getting the following error - This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.

Setting allowSyntheticDefaultImports: true gives the following error:

ERROR in node_modules/@angular/fire/storage/observable/fromTask.d.ts:3:83 - error TS2694: Namespace 'firebase' has no exported member 'default'.

3 export declare function fromTask(task: UploadTask): Observable<import("firebase").default.storage.UploadTaskSnapshot>;
                                                                                    ~~~~~~~

Version info

Angular:

10.2.1

Firebase:

7.24.0

AngularFire:

6.0.4

How to reproduce these conditions

Steps to set up and reproduce

Update to 6.0.4

Debug output

N/A

Log stack

ERROR in node_modules/@angular/fire/firebase.app.module.d.ts:2:8 - error TS1259: Module '"/Users/akshayrajgollahalli/Documents/GitHub/lectus-ui/node_modules/firebase/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flag
    
    2 import firebase from 'firebase/app';
             ~~~~~~~~
    
      node_modules/firebase/index.d.ts:9710:1
        9710 export = firebase;
             ~~~~~~~~~~~~~~~~~~
        This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.
    node_modules/@angular/fire/auth-guard/auth-guard.d.ts:4:8 - error TS1259: Module '"/Users/akshayrajgollahalli/Documents/GitHub/lectus-ui/node_modules/firebase/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flag
    
    4 import firebase from 'firebase/app';
             ~~~~~~~~
    
      node_modules/firebase/index.d.ts:9710:1
        9710 export = firebase;
             ~~~~~~~~~~~~~~~~~~
        This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.
    node_modules/@angular/fire/auth/auth.d.ts:4:8 - error TS1259: Module '"/Users/akshayrajgollahalli/Documents/GitHub/lectus-ui/node_modules/firebase/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flag
    
    4 import firebase from 'firebase/app';
             ~~~~~~~~
    
      node_modules/firebase/index.d.ts:9710:1
        9710 export = firebase;
             ~~~~~~~~~~~~~~~~~~
        This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.
    node_modules/@angular/fire/auth/auth.d.ts:12:14 - error TS2411: Property 'authState' of type 'Observable<any>' is not assignable to string index type 'Promise<any> & ((...args: unknown[]) => Promise<any>) & ((...args: unknown[]) => any)'.
    
    12     readonly authState: Observable<firebase.User | null>;
                    ~~~~~~~~~
    node_modules/@angular/fire/auth/auth.d.ts:16:14 - error TS2411: Property 'idToken' of type 'Observable<string>' is not assignable to string index type 'Promise<any> & ((...args: unknown[]) => Promise<any>) & ((...args: unknown[]) => any)'.
    
    16     readonly idToken: Observable<string | null>;
                    ~~~~~~~
    node_modules/@angular/fire/auth/auth.d.ts:20:14 - error TS2411: Property 'user' of type 'Observable<any>' is not assignable to string index type 'Promise<any> & ((...args: unknown[]) => Promise<any>) & ((...args: unknown[]) => any)'.
    
    20     readonly user: Observable<firebase.User | null>;
                    ~~~~
    node_modules/@angular/fire/auth/auth.d.ts:26:14 - error TS2411: Property 'idTokenResult' of type 'Observable<any>' is not assignable to string index type 'Promise<any> & ((...args: unknown[]) => Promise<any>) & ((...args: unknown[]) => any)'.
    
    26     readonly idTokenResult: Observable<firebase.auth.IdTokenResult | null>;
                    ~~~~~~~~~~~~~
    node_modules/@angular/fire/firestore/interfaces.d.ts:2:8 - error TS1259: Module '"/Users/akshayrajgollahalli/Documents/GitHub/lectus-ui/node_modules/firebase/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flag
    
    2 import firebase from 'firebase/app';
             ~~~~~~~~
    
      node_modules/firebase/index.d.ts:9710:1
        9710 export = firebase;
             ~~~~~~~~~~~~~~~~~~
        This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.
    node_modules/@angular/fire/firestore/collection/collection.d.ts:2:8 - error TS1259: Module '"/Users/akshayrajgollahalli/Documents/GitHub/lectus-ui/node_modules/firebase/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flag
    
    2 import firebase from 'firebase/app';
             ~~~~~~~~
    
      node_modules/firebase/index.d.ts:9710:1
        9710 export = firebase;
             ~~~~~~~~~~~~~~~~~~
        This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.
    node_modules/@angular/fire/firestore/document/document.d.ts:5:8 - error TS1259: Module '"/Users/akshayrajgollahalli/Documents/GitHub/lectus-ui/node_modules/firebase/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flag
    
    5 import firebase from 'firebase/app';
             ~~~~~~~~
    
      node_modules/firebase/index.d.ts:9710:1
        9710 export = firebase;
             ~~~~~~~~~~~~~~~~~~
        This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.
    node_modules/@angular/fire/firestore/collection-group/collection-group.d.ts:2:8 - [39m[91merror TS1259: Module '"/Users/akshayrajgollahalli/Documents/GitHub/lectus-ui/node_modules/firebase/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flag
    
    2 import firebase from 'firebase/app';
             ~~~~~~~~
    
      node_modules/firebase/index.d.ts:9710:1
        9710 export = firebase;
             ~~~~~~~~~~~~~~~~~~
        This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.
    node_modules/@angular/fire/firestore/firestore.d.ts:9:8 - error TS1259: Module '"/Users/akshayrajgollahalli/Documents/GitHub/lectus-ui/node_modules/firebase/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flag
    
    9 import firebase from 'firebase/app';
             ~~~~~~~~
    
      node_modules/firebase/index.d.ts:9710:1
        9710 export = firebase;
             ~~~~~~~~~~~~~~~~~~
        This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.
    node_modules/@angular/fire/storage/interfaces.d.ts:1:8 - error TS1259: Module '"/Users/akshayrajgollahalli/Documents/GitHub/lectus-ui/node_modules/firebase/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flag
    
    1 import firebase from 'firebase/app';
             ~~~~~~~~
    
      node_modules/firebase/index.d.ts:9710:1
        9710 export = firebase;
             ~~~~~~~~~~~~~~~~~~
        This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.
    node_modules/@angular/fire/storage/storage.d.ts:6:8 - error TS1259: Module '"/Users/akshayrajgollahalli/Documents/GitHub/lectus-ui/node_modules/firebase/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flag
    
    6 import firebase from 'firebase/app';
             ~~~~~~~~
    
      node_modules/firebase/index.d.ts:9710:1
        9710 export = firebase;
             ~~~~~~~~~~~~~~~~~~
        This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.
    node_modules/@angular/fire/storage/observable/fromTask.d.ts:3:83 - error TS2694: Namespace 'firebase' has no exported member 'default'.
    
    3 export declare function fromTask(task: UploadTask): Observable<import("firebase").default.storage.UploadTaskSnapshot>;
                                                                                        ~~~~~~~
    node_modules/@angular/fire/analytics/analytics.d.ts:3:8 - error TS1259: Module '"/Users/akshayrajgollahalli/Documents/GitHub/lectus-ui/node_modules/firebase/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flag
    
    3 import firebase from 'firebase/app';
             ~~~~~~~~
    
      node_modules/firebase/index.d.ts:9710:1
        9710 export = firebase;
             ~~~~~~~~~~~~~~~~~~
        This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.
    node_modules/@angular/fire/analytics/analytics.d.ts:17:5 - error TS2411: Property 'updateConfig' of type '(config: Config) => Promise<void>' is not assignable to string index type 'Promise<any> & ((...args: unknown[]) => Promise<any>) & ((...args: unknown[]) => any)'.
    
    17     updateConfig(config: Config): Promise<void>;
           ~~~~~~~~~~~~

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Reactions: 11
  • Comments: 30 (5 by maintainers)

Commits related to this issue

Most upvoted comments

I see…

What happens when you add these entries to compilerOptions in tsconfig?

  "compilerOptions": {
    //....
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  },
+56
Soolan on Nov 4, 2020

Can confirm that @angular/fire 6.0.5 and firebase@8.0.1 no longer receives the error, my solution was simply npm install firebase@latest

+9
gbrits on Nov 11, 2020

Ok I did a bit of digging and it seems the problem is not the angularfire rather the firebase library itself.

if you need to import firebase anywhere into your angularfire project, the firease.[whatever] is not accessible in the new versions anymore. The path has changed but it seems guys @Google forgot to update the documentations.

Here is an example. Let’s say you have this in your imports: import * as firebase from 'firebase/app';

Now if you try to access anything inside firebase as usual it will throw the error messages you shared above. For example this: return firebase.firestore.FieldValue.serverTimestamp()

will return an error. You have to add default to the namespace - in firebase 7.x.x and 8.x.x - in order to make it work:

return firebase.default.firestore.FieldValue.serverTimestamp();

that applies everywhere you are referring to firebase in your code.

+7
Soolan on Nov 4, 2020

+1 same result as @gbrits - all good after upgrade to @angular/fire@6.0.5 and firebase@8.0.1

+6
DaveA-W on Nov 11, 2020

also worth checking…

Do you have this import command: import * as firebase from 'firebase/app'

anywhere in your components, services, …?

+6
Soolan on Nov 4, 2020

+1 confirm firebase@8.0.1 works like a charm!

+4
Soolan on Nov 12, 2020

Setting "allowSyntheticDefaultImports": true under compilerOptions in my tsconfig.json has resolved the issue for me.

My package.json included:

...
    "@angular/fire": "^6.0.4",
    "cordova-plugin-firebase-analytics": "^4.5.0",
    "firebase": "^7.24.0",
...
+3
ericgopak on Nov 9, 2020

I really dislike the proposed fix (allowSyntheticDefaultImports / esModuleInterop ), it feels like a patch. I went on a hunt and figured out a solution that works better for me and might work better for you guys. Before simply copy pasting my code, here is how I came to this fix; if you’re not interested just scroll down 👇 For those that read this, please point out any potential problems with this approach 👍

If you have a look at the firebase sdk js release notes here you will find the following breaking change

Breaking change: browser fields in package.json files now point to ESM bundles instead of CJS bundles. Users who are using ESM imports must now use the default import instead of a namespace import. Before 8.0.0

import * as firebase from 'firebase/app'

After 8.0.0

import firebase from 'firebase/app'

Code that uses require(‘firebase/app’) or require(‘firebase’) will still work, but in order to get proper typings (for code completion, for example) users should change these require calls to require(‘firebase/app’).default or require(‘firebase’).default. This is because the SDK now uses typings for the ESM bundle, and the different bundles share one typings file.

With this information, I decided to upgrade to firebase v8 (8.2.2) after my upgrade of angular/fire to 6.1.4 despite the recommendation to be on firebase v7.8 in the readme of this repository. I did this because the problem is obviously an importing problem, I decided to change my import statements to match firebase documentation recommendation. Which looks like this import firebase from 'firebase/app';

This introduced the problem of types I was using, as I was importing firestore as a type

// bad
import { firestore } from 'firebase'; // Module '"../../../../../node_modules/firebase"' has no exported member 'firestore'. Did you mean to use 'import firestore from "../../../../../node_modules/firebase"' instead?

const documentRef: firestore.DocumentReference;

The solution is quite simple in retrospect, using the new import and accessing firestore on the firebase global namespace

// good
import firebase from 'firebase/app';

const documentRef: firebase.firestore.DocumentReference;

If you’re using the firestore namespace a lot in your code, suffixing it with firebase can be annoying and can reduce readability. To mitigate this I use the following namespace aliasing trick, this will ensure your code changes only affect your import statements. See namespace aliasing in the official typescript documentation here if this syntax is unfamiliar to you

// better
import firebase from 'firebase/app';
import firestore = firebase.firestore;

const documentRef: firestore.DocumentReference;
+2
abdel-ships-it on Jan 10, 2021

EDIT: Sorry for pinging you all. It was an issue with TS not picking the new version. After I ctrl+clicked it and fell through it stopped showing the error.

ORIGINAL MESSAGE: I just tried upgrading from @angular/fire@6.0.3 and firebase@7.14.1 to latest (6.1.1 and 8.1.1) and I’m seeing this issue. "allowSyntheticDefaultImports": true helps but reading this thread I’m not sure I’m supposed to do it like that…

+2
waterplea on Nov 24, 2020

Bumping a major isn’t trivial with a library with the popularity of AngularFire, it means there’s a very large chance of leaving users behind & unsupported as I only have the resources to support the latest major (on a best-effort basis at that). With a large rewrite of the Firebase JS SDK coming & new Angular majors on the way, I’d rather leave a breaking version for that. Which is why I sometimes do back flips to support multiple Angular/Firebase majors 😛

+2
jamesdaniels on Nov 5, 2020

Firebase v8 doesn’t export a namespace anymore, you should use the default export.

import firebase from 'firebase/app'; // don't import { firestore }
firebase.firestore // instead
+2
jamesdaniels on Nov 5, 2020

Oh only import firebase from 'firebase/app' and then use firebase.firestore in your code.

+1
jamesdaniels on Nov 9, 2020
Read more comments on GitHub
← angularfire: Bug: Observable returned from AngularFireFunctions does not trigger change detection
angularfire: Calling AngularFireFunctions.httpsCallable results to error 404 because →