Error while serving universal app

[REQUIRED] Describe your environment

  • Operating System version:Windows 10
  • Firebase SDK version: 6.0.2

[REQUIRED] Describe the problem

I followed this tutorial for creating server side rendered app. There were other errors as well before I stumbled upon this error but they already had solutions. This error occurs when I try to serve the app using npm run serve:ssr.

The error I get is:

proxyRequestMethods(Index, '_index', IDBIndex, [
                                     ^

ReferenceError: IDBIndex is not defined
    at Module.<anonymous> (C:\Users\eg\dist\server.js:343794:38)
    at __webpack_require__ (C:\Users\eg\dist\server.js:30:30)
    at Module.<anonymous> (C:\Users\eg\dist\server.js:342436:61)
    at __webpack_require__ (C:\Users\eg\dist\server.js:30:30)
    at Module.<anonymous> (C:\Users\eg\dist\server.js:341227:81)
    at __webpack_require__ (C:\Users\eg\dist\server.js:30:30)
    at Module.<anonymous> (C:\Users\eg\dist\server.js:332069:79)
    at __webpack_require__ (C:\Users\eg\dist\server.js:30:30)
    at Object.firebase (C:\Users\eg\dist\server.js:189647:18)
    at __webpack_require__ (C:\Users\eg\dist\server.js:137349:30)

Before this I was receiving an error window is not defined so I added the below code in server.ts as mentioned in one of other issues in @angular/universal package, this comment

const domino = require('domino');
const fs = require('fs');
const path = require('path');
const template = fs.readFileSync(path.join(__dirname, '.', 'dist', 'index.html')).toString();
const win = domino.createWindow(template);
global['window'] = win;
global['document'] = win.document;

When I build ssr app using npm run build:ssr, I receive warnings shown below

WARNING in ./node_modules/@angular/fire/firestore/firestore.js 23:21-32
"export 'SDK_VERSION' was not found in 'firebase/app'
 @ ./node_modules/@angular/fire/firestore/public_api.js
 @ ./node_modules/@angular/fire/firestore/index.js
 @ ./dist/server/main.js
 @ ./server.ts

WARNING in ./node_modules/@angular/fire/firestore/firestore.js 24:21-32
"export 'SDK_VERSION' was not found in 'firebase/app'
 @ ./node_modules/@angular/fire/firestore/public_api.js
 @ ./node_modules/@angular/fire/firestore/index.js
 @ ./dist/server/main.js
 @ ./server.ts

Also when I serve(d) app using npm run serve:ssr while I receive these warnings when I used firebase@5.x.x I received error reference: self is not defined after updating to firebase@6.0.2 I receive error

var major = parseInt(firebase_app__WEBPACK_IMPORTED_MODULE_6__["SDK_VERSION"].split('.')[0]);
TypeError: Cannot read property 'split' of undefined
    at Module.<anonymous> (C:\Users\eg\dist\server.js:279474:79)
    at __webpack_require__ (C:\Users\eg\dist\server.js:30:30)
    at Module.<anonymous> (C:\Users\eg\dist\server.js:279385:68)
    at __webpack_require__ (C:\Users\eg\dist\server.js:30:30)
    at Module.<anonymous> (C:\Users\eg\dist\server.js:279341:69)
    at __webpack_require__ (C:\Users\eg\dist\server.js:30:30)
    at Object.@angular/fire/firestore (C:\Users\eg\dist\server.js:189255:18)
    at __webpack_require__ (C:\Users\eg\dist\server.js:137353:30)
    at Object../src/app/services/global-manager.service.ts (C:\Users\eg\dist\server.js:186535:19)
    at __webpack_require__ (C:\Users\eg\dist\server.js:137353:30)

I remove these warnings and errors by updating webpack.server.config.js by adding lines below

  const regex = /firebase\/(app|firestore)/;
module.exports={
externals: [/node_modules/, function(context, request, callback) {

    // exclude firebase products from being bundled, so they will be loaded using require() at runtime.
    if(regex.test(request)) {
      return callback(null, 'commonjs ' + request);
    }
    callback();
  }],
...
}

I also found out this stackoverflow question related to this error but I don’t use performance module so solution is not applicable to me.

Steps to reproduce:

  1. Follow the fireship tutorial to use server side rendering
  2. If errors occurs like shown above, use the respective solution until you stumble upon IDBIndex error

How can I solve this IDBIndex error ? Please help

2 thoughts on “Error while serving universal app

  1. @hsubox76 Thanks a lot. I had understood the problem but didn’t got the solution which @Feiyang1 provided. Now I understood the solution also.
    Thanks for all the options.

    For my test repo, option1 works very well.

    However I had used option3 in my project with change in regex to accommodate all the cases:

    const regex = /firebase(\/([\w\d]+))*/;