Angular SSR - proxyRequestMethods(Index, '_index', IDBIndex, [ ^ ReferenceError: IDBIndex is not defined

[GoceBogdanovski]

Hello.
I just found out that upgrading firebase package from 9.4.0 to 9.6.1 on my Angular 13.1.1 SSR project caused a issue with starting the app under IIS node instance.
The error is this: proxyRequestMethods(Index, '_index', IDBIndex, [ ^ ReferenceError: IDBIndex is not defined

This packages are all good. To replicate the bug, just update the version of the firebase package to 9.6.1 and try to run the script dev:ssr
I have tried with @angular/fire but the result was same.

"scripts": {
"ng": "ng",
"start": "ng serve -o",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test",
"dev:ssr": "ng run your-proj-name:serve-ssr",
"serve:ssr": "node dist/your-proj-name/server/main.js",
"build:ssr": "ng build --configuration production && ng run your-proj-name:server:production",
"prerender": "ng run your-proj-name:prerender"
},
"dependencies": {
"@angular/animations": "^13.1.1",
"@angular/common": "^13.1.1",
"@angular/compiler": "^13.1.1",
"@angular/core": "^13.1.1",
"@angular/forms": "^13.1.1",
"@angular/google-maps": "^13.1.1",
"@angular/platform-browser": "^13.1.1",
"@angular/platform-browser-dynamic": "^13.1.1",
"@angular/platform-server": "^13.1.1",
"@angular/router": "^13.1.1",
"@nguniversal/common": "^13.0.1",
"@nguniversal/express-engine": "^13.0.1",
"@ngx-pwa/local-storage": "^13.0.2",
"@types/mixpanel-browser": "^2.35.8",
"express": "^4.17.1",
"firebase": "9.4.0",
"flatpickr": "^4.6.9",
"mixpanel-browser": "^2.42.0",
"ngx-seo": "^5.3.0",
"rxjs": "^7.4.0",
"tslib": "^2.3.1",
"zone.js": "^0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "^13.1.2",
"@angular/cli": "^13.1.2",
"@angular/compiler-cli": "^13.1.1",
"@nguniversal/builders": "^13.0.1",
"@types/express": "^4.17.13",
"@types/google.maps": "^3.47.1",
"@types/jasmine": "^3.10.2",
"@types/node": "^16.11.12",
"jasmine-core": "^3.9.0",
"jasmine-spec-reporter": "^7.0.0",
"karma": "^6.3.9",
"karma-chrome-launcher": "^3.1.0",
"karma-coverage": "^2.1.0",
"karma-jasmine": "^4.0.1",
"karma-jasmine-html-reporter": "^1.7.0",
"typescript": "^4.4.4"
}

[google-oss-bot]

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

[limes]

@GoceBogdanovski See: angular/universal#2475

[GoceBogdanovski]

@limes thanks mate!

[miguelsmuller]

did you solve this problem friend @GoceBogdanovski ?

I'm following the issu 2475 and there they said it was here on angular/universal

I opened issu 3113 here in angular/universal and still no response

[Santoshah]

I am facing same issue

ReferenceError: IDBIndex is not defined

after I upgrade the Angular version from 12.0.1 to 13.1.3.

Before this I was facing issue with node-fetch (ReferenceError: fetch is not defined )
After upgrading to node-fetch version from 2.6.1 to 3.2.0. and install its below dependencies I manage to fixed fetch not defined. but again....

data-uri-to-buffer
fetch-blob
formdata-polyfill

Now I am getting IDBIndex issue.

my package.json

{

  "dependencies": {
    "@angular-material-components/datetime-picker": "6.0.3",
    "@angular/animations": "^13.1.3",
    "@angular/cdk": "^13.1.3",
    "@angular/common": "13.1.3",
    "@angular/compiler": "13.1.3",
    "@angular/core": "13.1.3",
    "@angular/fire": "^6.1.4",
    "@angular/forms": "13.1.3",
    "@angular/material": "13.1.3",
    "@angular/material-moment-adapter": "13.1.3",
    "@angular/platform-browser": "13.1.3",
    "@angular/platform-browser-dynamic": "13.1.3",
    "@angular/platform-server": "13.1.3",
    "@angular/router": "13.1.3",
    "@filestack/angular": "^1.3.0",
    "@fortawesome/fontawesome-free": "^5.15.4",
    "@fullcalendar/angular": "4.4.5-beta",
    "@fullcalendar/core": "4.4.2",
    "@fullcalendar/daygrid": "4.4.2",
    "@fullcalendar/interaction": "4.4.2",
    "@fullcalendar/list": "4.4.2",
    "@fullcalendar/moment": "4.4.2",
    "@fullcalendar/rrule": "4.4.2",
    "@fullcalendar/timegrid": "4.4.2",
    "@nguniversal/express-engine": "^12.0.0",
    "@types/jspdf": "^1.3.3",
    "@types/stripe": "^7.13.25",
    "animate.css": "^4.1.1",
    "aos": "^2.3.4",
    "apexcharts": "^3.26.1",
    "bootstrap": "^5.1.3",
    "crypto-js": "4.0.0",
    "data-uri-to-buffer": "^4.0.0",
    "domino": "^2.1.6",
    "express": "^4.15.2",
    "fetch-blob": "^3.1.4",
    "filestack-js": "^3.23.1",
    "firebase": "^8.10.0",
    "formdata-polyfill": "^4.0.10",
    "highlight.js": "10.7.2",
    "jquery": "^3.6.0",
    "jspdf": "^2.3.1",
    "lodash-es": "4.17.21",
    "moment": "^2.29.1",
    "ng-apexcharts": "^1.5.9",
    "ng-starrating": "^1.0.20",
    "ng-stripe-checkout": "^1.0.4",
    "ng-wistia-components": "0.0.2",
    "ngx-device-detector": "^2.0.8",
    "ngx-infinite-scroll": "^10.0.1",
    "ngx-mat-select-search": "^3.2.0",
    "ngx-moment": "^5.0.0",
    "ngx-quill": "^13.3.1",
    "node-fetch": "^3.2.0",
    "perfect-scrollbar": "1.5.0",
    "quill": "1.3.7",
    "rrule": "2.6.8",
    "rxjs": "7.5.2",
    "stripe": "^8.116.0",
    "stripe-angular": "^1.2.1",
    "tslib": "2.2.0",
    "yum": "^0.1.1",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "13.1.4",
    "@angular/cli": "13.1.4",
    "@angular/compiler-cli": "13.1.3",
    "@angular/language-service": "13.1.3",
    "@nguniversal/builders": "^12.0.0",
    "@ngx-builders/analyze": "^2.3.0",
    "@types/crypto-js": "4.0.1",
    "@types/express": "^4.17.0",
    "@types/highlight.js": "9.12.4",
    "@types/jasmine": "3.6.10",
    "@types/jasminewd2": "2.0.8",
    "@types/lodash-es": "4.17.4",
    "@types/node": "15.0.1",
    "bufferutil": "^4.0.3",
    "codelyzer": "6.0.2",
    "jasmine-core": "3.7.1",
    "jasmine-spec-reporter": "7.0.0",
    "karma": "6.3.2",
    "karma-chrome-launcher": "3.1.0",
    "karma-coverage-istanbul-reporter": "3.0.3",
    "karma-jasmine": "4.0.1",
    "karma-jasmine-html-reporter": "1.5.4",
    "ngx-owl-carousel-o": "^6.0.0",
    "protractor": "7.0.0",
    "tailwindcss": "2.1.2",
    "ts-node": "9.1.1",
    "tslint": "6.1.2",
    "typescript": "^4.5.5",
    "utf-8-validate": "^5.0.5",
    "ws": "^8.2.2",
    "xhr2": "^0.2.1"
  }
}

[miguelsmuller]

@ALL do you have any news other than downgrading?

[GoceBogdanovski]

Well @miguelsmuller i just found solution but it is completely manual.
I have added a while loop to check whether the browser is present like this in the app.component.ts

while (!this.isBrowser) {
      if (this.document?.defaultView) {
        this.isBrowser = true;
        // set some public isBrowser = new BehaviorSubject<boolean>(false); value to true to inform all listeners
      }
   }

At the listeners side:

firebaseService: any;

this.isBrowser.subscribe({
next:(isBrowser)=>{
 import("../LOCATION OF THE SERVICE/firebase.service").then(result => {
          this.firebaseService = result;
          this.firebaseService.initFireBase();
        });
}
});

and in firebase.service.ts i have this:

declare const firebase: any;

let analytics: any;
let firebaseAuth: any;

export const initFireBase = () => {
  if (!firebase.apps.length) {
    firebase.initializeApp({
      apiKey: "----------------",
      authDomain: "------------",
      projectId: "--------",
      storageBucket: "------",
      messagingSenderId: "----------",
      appId: "--------",
      measurementId: "--------"
    });
    startFirebaseApps();
  }
  else {
    startFirebaseApps();
  }
}

export const startFirebaseApps = () => {
  firebaseAuth = firebase.auth();
  analytics = firebase.analytics();
  analytics.setAnalyticsCollectionEnabled(true);
}

and these scripts in the head of the index.html

<script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script> <script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-auth.js"></script> <script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-analytics.js"></script>

it is stupid but it works :)

[samizarraa]

Is there any update for this issue?

[jmarlow4]

Is there any update for this issue?

angular/universal#2475 (comment)

[jamesdaniels]

Closing since we should redirect to the JS SDK issue linked above, pinning.

[ohabash]

I still cant find a solution. Did i over look it?

[ohabash]

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",