Repository navigation
ReferenceError: self is not defined #1746
Description
[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();
`
Activity
raberana commentedon May 6, 2019
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 commentedon May 6, 2019
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 commentedon May 7, 2019
@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 commentedon May 7, 2019
@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;`
raberana commentedon May 8, 2019
where can you find the prerender.ts?
I only see server.ts
Ehesp commentedon May 8, 2019
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 commentedon May 10, 2019
It is fixed by #1757
Please upgrade to 6.0.2 for the fix.
Ehesp commentedon May 15, 2019
Can confirm it works.
amit-ahire commentedon May 17, 2019
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 commentedon May 17, 2019
@raberana
I've implemented this few months ago with the help of https://github.com/angular/universal-starter