"IDBIndex is not defined" after updating from 13.03 → v13.10 (pre-rendering)

[mazlano27]

Which @angular/* package(s) are the source of the bug?

Don't known / other

Is this a regression?

Yes

Description

After upgrading to angular 13.10 from 13.03, pre-rending the app fails with the "IDBIndex is not defined" error.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

IDBIndex is not defined

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 13.1.1
Node: 14.17.0
Package Manager: npm 6.14.13
OS: darwin x64

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

Package                          Version
----------------------------------------------------------
@angular-devkit/architect        0.1301.1
@angular-devkit/build-angular    13.1.1
@angular-devkit/core             13.1.1
@angular-devkit/schematics       13.1.1
@angular/cli                     13.1.1
@angular/fire                    7.2.0
@nguniversal/aspnetcore-engine   13.0.1
@nguniversal/builders            13.0.1
@nguniversal/express-engine      13.0.1
@schematics/angular              13.1.1
rxjs                             6.6.7
typescript                       4.4.4

Anything else?

Reverting back to 13.03 resolves this error.

[rnicholls]

I have been trying to find a solution for this for about 5 days now. I tried downgrading to 13.0.3 but still, get the error.

If I remove angular/fire for authentication it is resolved. Extremely frustrating.

[mazlano27]

I have been trying to find a solution for this for about 5 days now. I tried downgrading to 13.0.3 but still, get the error.

If I remove angular/fire for authentication it is resolved. Extremely frustrating.

Please check your package-lock.json if your angular version is the version you downgraded to? I sometimes find that the package.json version is different from package-lock.json version and this causes the issue.

The only solution i found was to manually uninstall all the angular packages (npm uninstall @angular/core.....) and then manually installing them again with the desired version (npm install --save @angular/core@13.0.3 ......)

[rnicholls]

@mazlano27 you just saved my life on this. You were right. lock file had 3.1. Removed and manually added back 3.0.x and now dev:ssr is working!

[comporell]

I have been trying to find a solution for this for about 5 days now. I tried downgrading to 13.0.3 but still, get the error.
If I remove angular/fire for authentication it is resolved. Extremely frustrating.

Please check your package-lock.json if your angular version is the version you downgraded to? I sometimes find that the package.json version is different from package-lock.json version and this causes the issue.

The only solution i found was to manually uninstall all the angular packages (npm uninstall @angular/core.....) and then manually installing them again with the desired version (npm install --save @angular/core@13.0.3 ......)

I've been stuck on this for days. That saved my ass. Thanks

[Burgov]

I'm running into this error too when running Universal. Any solutions?

It seems to be firebase related. See also this issue. I don't understand how upgrading from 13.0 to 13.1 is causing this tho, nor how I could apply the suggested workaround in an Angular app.

This is my diff after I ran nx migrate latest and started running into this issue: https://gist.github.com/Burgov/50682abd0f12e8c13fd51bf013616f9d

[kgajera]

I ran into this issue when upgrading from 12 to 13.1.

My project was not using a custom webpack file, but creating a webpack config file as documented (from 2018...) here solved my problem: https://github.com/angular/angularfire/blob/master/docs/universal/getting-started.md#3-add-a-webpack-config-for-the-express-server

[mazlano27]

Thank you for sharing. I tried to create the webpack config file but realised it was for SSR (and not pre-rendering). I tried it still and it does not seem to work for pre-rendering.

I tried to add the firebase packages as external dependencies in the angular.json file too - that didn't help either :/

[mazlano27]

@kgajera thank you for your insight - based on some experimentation, I managed to find the fix! :)

Solution: Create a custom webpack file which excludes firebase from the server bundle.

Steps:

1. Install @angular-builders/custom-webpack as a dev dependency
2. Create a file "custom-webpack.config.js" in the project root and add the following:

module.exports = {
     externals: [
          /^firebase/
     ]
}

3. Update angular.json to incorporate this custom webpack config into the build process

"server": {
     "builder": "@angular-builders/custom-webpack:server",
     "options": {
          "customWebpackConfig": {
               "path": "./custom-webpack.config.js",
               "replaceDuplicatePlugins": true
          },
          ...
     },
},

4. Done!

References:

1. https://alligator.io/angular/Custom-webpack-config/
2. https://github.com/angular/angularfire/blob/master/docs/universal/getting-started.md#3-add-a-webpack-config-for-the-express-server
3. WebpackError: ReferenceError: IDBIndex is not defined while building with Gatsby.JS (ver #2.15.21) firebase/firebase-js-sdk#2222 (comment)

[Burgov]

Why is this suddenly necessary? Everything works fine with NG 13.0. I don't really like having to add a custom webpack config

[CaerusKaru]

This sounds like something very much not an issue with Angular Universal. Can anyone point to something specific in Universal that shows the problem? If it's just a problem with Angular Fire, solved using the workaround they published, then we can either close this, or repurpose this to add docs for how to handle this edge case in the README.

[mazlano27]

This sounds like something very much not an issue with Angular Universal. Can anyone point to something specific in Universal that shows the problem? If it's just a problem with Angular Fire, solved using the workaround they published, then we can either close this, or repurpose this to add docs for how to handle this edge case in the README.

@CaerusKaru I'm not sure where this issue arises. It started after the 13.1 update - and I'm unable to point to something specific in Universal that shows the problem. Rolling back to 13.0 resolved the issue.

I think it's useful to document (as an edge case) how we might be able to exclude certain libraries from the universal build pipeline incase these libraries cause errors in the server side node environment?

[NobodyExceptHim]

Has anyone found a solution? I'am stuck at it and I really don't want to add custom webpack config