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

[akshaybabloo]

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

[Soolan]

@akshaybabloo
I'm experiencing the same issue after upgrade:

    "@angular/core": "~10.2.1",
    "@angular/fire": "^6.0.4",
    "firebase": "^8.0.0",
    "firebaseui": "^4.7.1",
    // other packages

I left firebaseui there to point out that I was using it as a simple and quick way for authentication. What a mistake!
Turned out it has issues and not mature enough to be used in production.

So if by any chance you are using that, or any 3rd party package that relies on firebase or angular/fire, (i.e. firestore dependencies) temporarily disable them and see if that resolves the issue.

It doesn't fix the problem but for me it helped me to narrow down the issue. Hope it shed some light on the issue.

Technical debt of any sort (official firebaseui included) is bad.

[akshaybabloo]

@Soolan This is what I have

 "dependencies": {
    "@angular/animations": "~10.2.1",
    "@angular/cdk": "^10.2.6",
    "@angular/common": "~10.2.1",
    "@angular/compiler": "~10.2.1",
    "@angular/core": "~10.2.1",
    "@angular/fire": "^6.0.3",
    "@angular/forms": "~10.2.1",
    "@angular/material": "^10.2.6",
    "@angular/platform-browser": "~10.2.1",
    "@angular/platform-browser-dynamic": "~10.2.1",
    "@angular/router": "~10.2.1",
    "@types/file-saver": "^2.0.1",
    "@types/papaparse": "^5.2.4",
    "bootstrap": "^4.5.3",
    "file-saver": "^2.0.2",
    "firebase": "^7.24.0",
    "highcharts": "^8.2.2",
    "highcharts-angular": "^2.8.2",
    "moment": "^2.29.1",
    "ngx-order-pipe": "^2.1.1",
    "papaparse": "^5.3.0",
    "rxjs": "~6.6.3",
    "tslib": "^2.0.3",
    "uppy": "^1.22.0",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/architect": ">= 0.900 < 0.1100",
    "@angular-devkit/build-angular": "~0.1002.0",
    "@angular/cli": "~10.2.0",
    "@angular/compiler-cli": "~10.2.1",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^14.14.6",
    "codelyzer": "^6.0.1",
    "firebase-tools": "^8.14.1",
    "fuzzy": "^0.1.3",
    "inquirer": "^7.3.3",
    "inquirer-autocomplete-prompt": "^1.3.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~6.0.0",
    "karma": "~5.2.3",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.1",
    "karma-jasmine-html-reporter": "^1.5.0",
    "open": "^7.3.0",
    "protractor": "~7.0.0",
    "ts-node": "~9.0.0",
    "tslint": "~6.1.3",
    "typescript": "~4.0.5"
  }

I am not too sure if anything here is depending on angular fire... I guess

[Soolan]

I see...

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

  "compilerOptions": {
    //....
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  },

[Soolan]

also worth checking...

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

anywhere in your components, services, ...?

[Soolan]

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.

[akshaybabloo]

@Soolan OK, I will give this a try. How come it broke now?

[jamesdaniels]

Ah, sorry, we changed over the imports of Firebase JS SDK to work with v8 and cursory tests showed compatibility w/v7; which allowed us to add compatibility without bumping a major version... I'm guessing this isn't going so smoothly in some environments. I'll give it some more testing.

In the meantime upgrading to Firebase v8 should work. You may have to change your imports but in general v8, which exports ES Modules in the way Angular prefers, works way way way better with Angular 9+

[fisherj19]

Yeah, no. This doesn't work at all with Firebase v8. Sticking to @angular/fire 6.0.3 and firebase 7.24.0 until things can compile again. Angular CLI can't build any of it with the new combo.

[akshaybabloo]

I do have imports like this

import {firestore} from 'firebase/app';

[akshaybabloo]

Yeah, no. This doesn't work at all with Firebase v8. Sticking to @angular/fire 6.0.3 and firebase 7.24.0 until things can compile again. Angular CLI can't build any of it with the new combo.

Yeah me too. But firebase 8 is compatible with v6.0.3

[jamesdaniels]

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

[akshaybabloo]

OK, I will try that. I think there are a few breaking changes, maybe bumping it to a major release? 🤔

[jamesdaniels]

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 😛

[mono-sudo]

Just interested if anyone found some way of getting around the issue?
I'm experiencing the same problem :(