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

@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/
     ]
}

1. 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
          },
          ...
     },
},

1. 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. https://github.com/firebase/firebase-js-sdk/issues/2222#issuecomment-538072948

Our team has all the latest versions of NX and NG (13.2) we were able to get rid of this problem by downgrading one package.

"@angular-devkit/build-angular": "^13.0.4",

@jmarlow4 I opened an issue on that repo, I can only say that the team has been made aware. There are plans that would address the root cause at some point, hoping we can prioritize at least a short term fix.

then @Santoshah

I believe that it may be some incompatibility between the modules and even if you have removed the firebase from the webpack it is necessary… so it is giving an error…

taking firebase completely out of the bundle I don’t think it’s the ideal solution.

must have some firebase method that angular universal, for being ssr, is not able to execute.

the ideal would be someone from the core of one of the modules to at least open our eyes to what could be.

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.

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

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

I have tried downgrading to 13.0.3 but it still throws the same error. Any solutions yet?

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 …)

@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/
     ]
}

1. 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
          },
          ...
     },
},

1. 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)

Hi there, your solution fix the “IDBIndex is not defined” error, but throws the following error:

I assume this fix wont work with Angular SSR?

Thanks

EDIT: fix for my last image, dont use ANYTHING related to firebase in app.component.ts (don’t inject services that use firebase either), if you do that, the app will serve:ssr and work everything fine. I had to lazyload my modules which are using firebase, and move some logic which was firebase related to such modules. Now my app is serving in SSR mode just fine.

I hope in the future they fix this.

So to summarise: do @kgajera solution, and if you encounter the same problem as me, try my solution on top of that.

I’m using Angular 13.2.6