ERROR in node_modules after updating the npm?

Question

This is the errors I got after updating npm, due to getting error of [WDS] Disconnected! error in Mozilla Firefox console. It is the error for the experienced developers to solve.

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 - error TS1259: Module '"D:/apps/angularfs3/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 '"D:/apps/angularfs3/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/auth/auth.d.ts:4:8 - error TS1259: Module '"D:/apps/angularfs3/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)'.

Answer 1

You need to add "allowSyntheticDefaultImports": true in your tsconfig.json (compilerOptions section).

• https://www.typescriptlang.org/docs/handbook/compiler-options.html