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

GoceBogdanovski · 2021-12-28T08:09:18Z

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

The text was updated successfully, but these errors were encountered:

google-oss-bot · 2021-12-28T08:09:22Z

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

limes · 2021-12-30T10:25:18Z

@GoceBogdanovski See: angular/universal#2475

GoceBogdanovski · 2021-12-30T11:34:57Z

@limes thanks mate!

miguelsmuller · 2022-01-13T14:02:44Z

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 · 2022-01-26T08:58:10Z

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 · 2022-02-02T02:52:37Z

@ALL do you have any news other than downgrading?

GoceBogdanovski · 2022-02-02T21:39:28Z

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

it is stupid but it works :)

samizarraa · 2022-02-10T12:08:27Z

Is there any update for this issue?

jmarlow4 · 2022-03-01T08:29:23Z

Is there any update for this issue?

angular/universal#2475 (comment)

jamesdaniels · 2022-03-01T20:11:18Z

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

ohabash · 2022-03-15T22:27:07Z

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

ohabash · 2022-03-18T15:10:02Z

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

jamesdaniels mentioned this issue Mar 1, 2022

IDBIndex is not defined runtime exception in Node.js when importing ESM firebase/firebase-js-sdk#6042

Closed

jamesdaniels pinned this issue Mar 1, 2022

jamesdaniels closed this as completed Mar 1, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

GoceBogdanovski commented Dec 28, 2021

google-oss-bot commented Dec 28, 2021

limes commented Dec 30, 2021

GoceBogdanovski commented Dec 30, 2021

miguelsmuller commented Jan 13, 2022

Santoshah commented Jan 26, 2022 •

edited

miguelsmuller commented Feb 2, 2022

GoceBogdanovski commented Feb 2, 2022 •

edited

samizarraa commented Feb 10, 2022

jmarlow4 commented Mar 1, 2022

jamesdaniels commented Mar 1, 2022

ohabash commented Mar 15, 2022

ohabash commented Mar 18, 2022

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

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

Comments

GoceBogdanovski commented Dec 28, 2021

google-oss-bot commented Dec 28, 2021

limes commented Dec 30, 2021

GoceBogdanovski commented Dec 30, 2021

miguelsmuller commented Jan 13, 2022

Santoshah commented Jan 26, 2022 • edited

miguelsmuller commented Feb 2, 2022

GoceBogdanovski commented Feb 2, 2022 • edited

samizarraa commented Feb 10, 2022

jmarlow4 commented Mar 1, 2022

jamesdaniels commented Mar 1, 2022

ohabash commented Mar 15, 2022

ohabash commented Mar 18, 2022

Santoshah commented Jan 26, 2022 •

edited

GoceBogdanovski commented Feb 2, 2022 •

edited