Firebase-js-sdk: ReferenceError: self is not defined

[mazlano27]

[REQUIRED] Describe your environment

• Operating System version: Mac OS 10
• Browser version: Chrome 74
• Firebase SDK version: 5.11.0
• Firebase Product: auth, database, storage

[REQUIRED] Describe the problem

After updating to firebase 5.11.0 => I get the error:

Steps to reproduce:

Run pre-render script after updating to firebase 5.11.0
Angular 7 Project

My npm script:
"ng build --prod --stats-json && ng run myDayPwaApp:server && npm run webpack:prerender && npm run build:prerender",

"webpack:prerender": "webpack --config webpack.prerender.config.js",
"build:prerender": "node dist/myDayPwaApp/prerender.js"

and inside prerender.js =>

`// Load zone.js for the server.
import 'zone.js/dist/zone-node';
import 'reflect-metadata';

import {join, resolve} from 'path';

(global as any).WebSocket = require('ws');
(global as any).XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest;

import {enableProdMode} from '@angular/core';

// Import module map for lazy loading
import {provideModuleMap} from '@nguniversal/module-map-ngfactory-loader';
import {renderModuleFactory} from '@angular/platform-server';

import * as fs from 'fs-extra';

// Add routes manually that you need rendered
const ROUTES = [
'/',
'/auth/login',
'/auth/register',
'/auth/forgotten-password'
];

const APP_NAME = 'myDayPwaApp';

// leave this as require(), imported via webpack
const {
AppServerModuleNgFactory,
LAZY_MODULE_MAP
} = require(./dist/${APP_NAME}-server/main);

enableProdMode();

async function prerender() {
// Get the app index
const browserBuild = dist/${APP_NAME};
const index = await fs.readFile(join(browserBuild, 'index.html'), 'utf8');

// Loop over each route
for (const route of ROUTES) {
const pageDir = join(browserBuild, route);
await fs.ensureDir(pageDir);

// Render with Universal
const html = await renderModuleFactory(AppServerModuleNgFactory, {
  document: index,
  url: route,
  extraProviders: [provideModuleMap(LAZY_MODULE_MAP)]
});

await fs.writeFile(join(pageDir, 'index.html'), html);

}

await fs.copySync(resolve(dist/${APP_NAME}/index.html), dist/${APP_NAME}/404.html);

console.log('done');
process.exit();
}

prerender();
`

[raberana]

Also experiencing this issue after following the steps here https://fireship.io/lessons/angular-universal-firebase/

Before the part of adding firebase to the project, the built server.js file is working fine. However, after including firebase, the server.js file contains this line:

if (self && 'firebase' in self) {

[mazlano27]

Also experiencing this issue after following the steps here https://fireship.io/lessons/angular-universal-firebase/

Before the part of adding firebase to the project, the built server.js file is working fine. However, after including firebase, the server.js file contains this line:

if (self && 'firebase' in self) {

I managed to get it working again by adding the following code to my prerender.ts file =>

(global as any).self = {fetch: require('node-fetch')};

[amit-ahire]

Also experiencing this issue after following the steps here https://fireship.io/lessons/angular-universal-firebase/
Before the part of adding firebase to the project, the built server.js file is working fine. However, after including firebase, the server.js file contains this line:
if (self && 'firebase' in self) {

I managed to get it working again by adding the following code to my prerender.ts file =>

(global as any).self = {fetch: require('node-fetch')};

@mazlano27
I'm also facing the same issue with Angular SSR
I'm on v7.2.14 and firebase v5.11.1
Tried your solution but it is giving me the same error.
Is there any specific place in prerender.ts where I've to add that line ?

[mazlano27]

Also experiencing this issue after following the steps here https://fireship.io/lessons/angular-universal-firebase/
Before the part of adding firebase to the project, the built server.js file is working fine. However, after including firebase, the server.js file contains this line:
if (self && 'firebase' in self) {

I managed to get it working again by adding the following code to my prerender.ts file =>
(global as any).self = {fetch: require('node-fetch')};

@mazlano27
I'm also facing the same issue with Angular SSR
I'm on v7.2.14 and firebase v5.11.1
Tried your solution but it is giving me the same error.
Is there any specific place in prerender.ts where I've to add that line ?

@amit-ahire I placed it at the top of prerender.ts file as below =>

`import 'zone.js/dist/zone-node';
import 'reflect-metadata';

import {join, resolve} from 'path';

(global as any).self = {fetch: require('node-fetch')};
(global as any).WebSocket = require('ws');
(global as any).XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest;`

[tuanuvt001]

i got the same...

[raberana]

@amit-ahire I placed it at the top of prerender.ts file as below =>

`import 'zone.js/dist/zone-node';
import 'reflect-metadata';

import {join, resolve} from 'path';

(global as any).self = {fetch: require('node-fetch')};
(global as any).WebSocket = require('ws');
(global as any).XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest;`

where can you find the prerender.ts?
I only see server.ts

[Ehesp]

Using GatsbyJS, can also confirm 5.11 onwards fails with an error during build. I was unable to get it working with the above (using the pre build hooks).

5.10 works fine.

[Feiyang1]

It is fixed by https://github.com/firebase/firebase-js-sdk/pull/1757
Please upgrade to 6.0.2 for the fix.

[Ehesp]

Can confirm it works.

[amit-ahire]

After Upgrading firebase to 6.0.2
I'm getting following error

/var/www/html/project-name/dist/server.js:228744
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"])("design:paramtypes", [Object, HTMLElement]),
^
ReferenceError: HTMLElement is not defined

I faced this issue when with following version
@angular - 7.2.14
@angular/fire - 5.1.3
firebase - 6.0.2

But it works if I switched it back to older version which is
@angular - 7.2.13 (Haven't tried with 7.2.14)
@angular/fire - 5.1.2
firebase - 5.10.0

[amit-ahire]

@amit-ahire I placed it at the top of prerender.ts file as below =>
import 'zone.js/dist/zone-node'; import 'reflect-metadata'; import {join, resolve} from 'path'; (global as any).self = {fetch: require('node-fetch')}; (global as any).WebSocket = require('ws'); (global as any).XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest;

where can you find the prerender.ts?
I only see server.ts

@raberana
I've implemented this few months ago with the help of https://github.com/angular/universal-starter