Module has no exported member error after upgrading to v7.0.0

[byrondover]

Quick report for visibility.

Error: node_modules/@firebase/app-compat/dist/src/firebaseApp.d.ts:19:10 - error TS2305: Module '"@firebase/app"' has no exported member '_FirebaseAppInternal'.

19 import { _FirebaseAppInternal as _FirebaseAppExp } from '@firebase/app';
            ~~~~~~~~~~~~~~~~~~~~

Easy enough to work around, maybe it's an issue with my setup? I'm currently working on a big client project due today, but should have time to circle back and take a closer look this evening.

Grats on the release! 🍻

---

Version info

Angular: 12.2.2

Firebase: 9.0.0

AngularFire: 7.0.0

Browser: Chrome v92.0.4515.159

Operating System: macOS Big Sur v11.5.2

Other (e.g. Ionic/Cordova, Node):

% ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 12.2.2
Node: 14.17.5
Package Manager: yarn 1.22.11
OS: darwin x64

Angular: 12.2.2
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, language-service, material, platform-browser
... platform-browser-dynamic, router, service-worker

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1200.0
@angular-devkit/build-angular   12.2.2
@angular-devkit/core            12.2.2
@angular-devkit/schematics      12.2.2
@angular/fire                   7.0.0
@angular/flex-layout            12.0.0-beta.34
@schematics/angular             12.2.2
rxjs                            7.3.0
typescript                      4.3.5

How to reproduce these conditions

Upgrade to AngularFire 7.0.0 via the upgrade guide.

% ng update @angular/fire

Using package manager: 'yarn'
Collecting installed dependencies...
Found 106 dependencies.
Fetching dependency metadata from registry...
                  Package "@angular/fire" has a missing peer dependency of "rxfire" @ "^6.0.0".
                  Package "@angular/fire" has an incompatible peer dependency to "rxjs" (requires "~6.6.0", would install "7.3.0")
    Updating package.json with dependency @angular/fire @ "7.0.0" (was "6.1.5")...
    Updating package.json with dependency firebase @ "9.0.0" (was "8.10.0")...
  UPDATE package.json (5268 bytes)
✔ Packages successfully installed.
** Executing migrations of package '@angular/fire' **

❯ Update @angular/fire to v7.
  UPDATE package.json (5487 bytes)
  UPDATE ...
✔ Packages installed successfully.
  Migration completed.

Debug output

% ng build

✔ Browser application bundle generation complete.
✔ Copying assets complete.
✔ Index html generation complete.
✔ Service worker generation complete.

Initial Chunk Files               | Names         |      Size
main.e84d4050ebce641e8f9b.js      | main          |   1.92 MB
styles.97e4ac2dc310fe425054.css   | styles        | 126.09 kB
polyfills.eeef44d0b0eab34bf13e.js | polyfills     |  36.20 kB
runtime.f5c183439fdc389bc43f.js   | runtime       |   3.62 kB
scripts.4394202c99afd1576cde.js   | scripts       |   3.32 kB

                                  | Initial Total |   2.09 MB

Build at: 2021-08-25T19:43:21.039Z - Hash: 49f14a2de5f6d1680dbf - Time: 47708ms

Error: node_modules/@firebase/app-compat/dist/src/firebaseApp.d.ts:19:10 - error TS2305: Module '"@firebase/app"' has no exported member '_FirebaseAppInternal'.

19 import { _FirebaseAppInternal as _FirebaseAppExp } from '@firebase/app';
            ~~~~~~~~~~~~~~~~~~~~

Expected behavior

Consistently clean builds after upgrading to AngularFire v7.0.0. 👌

Actual behavior

Error: node_modules/@firebase/app-compat/dist/src/firebaseApp.d.ts:19:10 - error TS2305: Module '"@firebase/app"' has no exported member '_FirebaseAppInternal'.

19 import { _FirebaseAppInternal as _FirebaseAppExp } from '@firebase/app';
            ~~~~~~~~~~~~~~~~~~~~

Workaround

I was able to quickly get around this issue by substituting the missing import for one I found in an adjacent types library:

node_modules/@firebase/app-compat/dist/src/firebaseApp.d.ts

Remove:

import { _FirebaseAppInternal as _FirebaseAppExp } from '@firebase/app-compat';

Add:

import { _FirebaseApp as _FirebaseAppExp } from './types';

Diff:

--- node_modules/@firebase/app-compat/dist/src/firebaseApp.d.preserve.ts	2021-08-25 12:51:56.000000000 -0700
+++ node_modules/@firebase/app-compat/dist/src/firebaseApp.d.ts	2021-08-25 12:52:01.000000000 -0700
@@ -16,8 +16,7 @@
  */
 import { FirebaseOptions } from './public-types';
 import { Component } from '@firebase/component';
-import { _FirebaseAppInternal as _FirebaseAppExp } from '@firebase/app-compat';
-import { _FirebaseService, _FirebaseNamespace } from './types';
+import { _FirebaseApp as _FirebaseAppExp, _FirebaseService, _FirebaseNamespace } from './types';
 import { Compat } from '@firebase/util';
 export interface _FirebaseApp {
     /**

I'd be surprised if this is an ideal solution, but it got me back up and running for now. I should have time to revisit this again later this evening / tomorrow. 🙃

[jamesdaniels]

Good catch, I'd recommend using skipLibCheck: true in your tsconfig.json for now. I should really remove that when I'm smoke testing the JS SDK.

[Feiyang1]

@jamesdaniels Does angularFire reference @firebase/app-compat directly? firebase/compat/app doesn't use types exported from @firebase/app-compat, or does ts checks its types even if they are not used?

[jamesdaniels]

@Feiyang1 no direct use, I think Angular's typescript configuration chases the dependencies by default.

[CoooWeee]

same as #2853

[byrondover]

Please feel free to close this issue a duplicate, at your discretion. 🙂

Thanks for filing an issue over here firebase/firebase-js-sdk#5382, @CoooWeee! 🙇

[jamesdaniels]

Ty

[edocbuhtig]

@jamesdaniels Solution I created a video and GitHub Repo with the fix I live for now, appreciate your teams hard work on the major release. Great show many, optimisations + features, i'm lovin it!