Angular Universal with Angular Fire is breaking - IDBIndex is not defined

[miguelsmuller]

I have a project i am trying to implement ssr with universal angular. but I'm not getting it.
I thought it was a problem in my code until I started a project from scratch to test and found something was wrong.

**ReferenceError: IDBIndex is not defined**

I commented on this open issue in the angular universal repository

Version info

Angular CLI: 13.1.2
Node: 16.13.1
Package Manager: npm 8.1.2
OS: linux x64

Angular: 13.1.1
... animations, cdk, common, compiler, compiler-cli, core, forms
... material, platform-browser, platform-browser-dynamic
... platform-server, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1301.2
@angular-devkit/build-angular   13.1.2
@angular-devkit/core            13.1.2
@angular-devkit/schematics      13.1.2
@angular/cli                    13.1.2
@angular/fire                   7.2.0
@nguniversal/builders           13.0.1
@nguniversal/express-engine     13.0.1
@schematics/angular             13.1.2
rxjs                            7.4.0
typescript                      4.5.4

How to reproduce these conditions

I created this empty project to simulate the problem and show that it's not an error in the code I made.
https://github.com/miguelsmuller/teste-project

I just followed the following steps:

• ng new teste-project
• ng add @angular/material
• ng add @ngrx/store
• ng add @ngrx/effects
• ng add @nguniversal/express-engine
• ng add @angular/fire

each command above is a commit from that test project

the last command (ng add @angular/fire) returned as shown in the image below. The informed parameters are also shown in the image.

and finally the error that is displayed when I run the command npm run build:ssr && npm run serve:ssr - image below in the right column. You can also see in this image on the left that when I run npm run start as csr no error is displayed.

Debug output

ReferenceError: IDBIndex is not defined
    at /home/migue/FromLinux/projects/teste-project/dist/teste-project/server/main.js:1:4322339
    at /home/migue/FromLinux/projects/teste-project/dist/teste-project/server/main.js:1:4644564
    at Object.<anonymous> (/home/migue/FromLinux/projects/teste-project/dist/teste-project/server/main.js:1:4644796)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at node:internal/main/run_main_module:17:47

Expected behavior

I believe the expected is node running the app listening on port 4000

Actual behavior

The compilation process is going on but probably with some error because the npm run build:ssr is finished but the npm run serve:ssr is not terminated, it just displays the entire contents of the bundle on the console and then the ReferenceError: IDBIndex is not defined error appears

[google-oss-bot]

This issue does not seem to follow the issue template. Make sure you provide all the required information.

[rossanmol]

Downgrading (from 17/16) to Node ^14 helped me.

[miguelsmuller]

Hey @rossanmol....
Everything's fine with you?

I've tried with the node versions below (10, 12, 14, 16 and 17). All gave the same error with the exception of nde in v10 because the cli command is not compatible.

With node-v10
rm -rf package-lock.json node_modules -> OK
npm install -> OK
npm run build:ssr ->  FAILED

The Angular CLI requires a minimum Node.js version of either v12.20, v14.15, or v16.10.

With node-v12
rm -rf package-lock.json node_modules -> OK
npm install -> OK
npm run build:ssr -> OK 
npm run serve:ssr -> 

ERRO: ReferenceError: IDBIndex is not defined

With node-v14
rm -rf package-lock.json node_modules -> OK 
npm install -> OK
npm run build:ssr -> OK
npm run serve:ssr -> FAILED

ERRO: ReferenceError: IDBIndex is not defined

With node-v16
rm -rf package-lock.json node_modules -> OK
npm install -> OK 
npm run build:ssr -> OK 
npm run serve:ssr -> FAILED

ERRO: ReferenceError: IDBIndex is not defined

With node-v17
rm -rf package-lock.json node_modules -> OK
npm install -> OK
npm run build:ssr -> OK
npm run serve:ssr -> FAILED

ERRO: ReferenceError: IDBIndex is not defined

[samizarraa]

Same error

proxyRequestMethods(Index, '_index', IDBIndex, [
ReferenceError: IDBIndex is not defined

Angular SSR 13

[Santoshah]

I am getting same issue after I upgrade to 12.0.1 to 13.1.3

[Santoshah]

I think this is right platform to post instead of angular universal.

I am getting Error: No template for dependency: PureExpressionDependency errors after following custom webpack configuration.

I believe this is due to excluding of fire base from webpack. But again installing firebase and excluding it during bundle generation don't make sense either. Do we have other solutions?

Detail can be found here

[miguelsmuller]

@ALL do you have any news other than downgrading?

[fediatayen]

@ALL any solutions yet ?

[VictorienTardif]

Only working workaround for now: angular/universal#2475 (comment)

[onclave]

Any update on this? Seems like this issue has been lurking around for a long time now.

[jamesdaniels]

We've been looking into this, it's not a problem with AngularFire though; it seems to be a problem with a dependency of Firebase JS SDK, idb, now that Angular Universal is targeting modules in Node.js.

[jamesdaniels]

@miguelsmuller please keep it respectful, we have a lot of other duties and are doing our best to stay on top of stuff but sometimes things like this slip through. This library is at the intersection of many of dependencies & any violation of semver can put us in a painful spot.

[onclave]

@jamesdaniels can you point out where exactly to look into so that I can start debugging and try to figure out where the issue lies? I have no experience with firebase in general hence getting a grasp on this is a bit overwhelming. I have been looking into how to setup firebase with angular hoping that the angularfire library follows something similar, but if you at least point to the right direction, I hope I can be of some help too!

[jamesdaniels]

@onclave I'd just lag behind Angular a little bit if I were you until all this settles down. It's likely that you'll run into similar problems in libraries beyond Firebase. In the prior state of affairs you could count on Node only loading the CJS, naively that's how package authors differentiated Node from browser bundles—now that the Universal builds go for ESM (I think this was introduced in Angular 13.1?) it can lead to surprises.

Ultimately the root cause is that the version of idb that Firebase uses is old, it doesn't have export fields in it's package.json; we can't upgrade as they dropped IE support and while we aren't going out of our way to support IE, dropping it entirely isn't planned until (at least) the next major. The only good fix I can think of is getting rid of Firebase JS SDK's use of the idb library, but that will touch a number of firebase libraries, and who's to say that's the only change required.

[jamesdaniels]

The custom webpack solution here angular/universal#2475 (comment) is also a reasonable solution for the time being.

[Santoshah]

If this is a problem occuring due to removal of IE then can we add reuqest for ie support in Angular 13.1 + ? Maybe we add in .browserlist or update package.json do you think it will fix that issue..

updating package.json like this. (not experimented)

"browserslist": [
    "IE11",
    ....
  ],

[miguelsmuller]

@jamesdaniels I apologize for the previous comment. I didn't mean to be rude.
thank you for commenting on the issue

[jamesdaniels]

@Santoshah no, that's just the root cause for why Firebase JS SDK can't upgrade it's idb dependency ATM... assuming a newer version even fixes this.

[jamesdaniels]

Filed as an issue over there, I'm going to close this issue but pin it; we can of course continue to discuss.

[miguelsmuller]

@jamesdaniels
what's up man. everything's fine with you?

firebase-js-sdk has been updated from 9.6.6 -> 9.6.9 and according to your issue the solution is already live.

is there anything i can do to help solve what we have here in angularfire right now.

If you need anything, I'm at your disposal.