ReferenceError: window is not defined #1678
Comments
|
To use that workaround it has to appear before It may not solve your problem though as |
|
@jasonburrows your hint worked for me! Thanks! |
|
Thank you @jasonburrows, closing. |
|
Can anyone post the solution? |
|
I think I have tried all the implementations on the internet to resolve window not defined issues ssr and third party libraries in this instance keycloak-js and unfortunately nothing seems to work using of domino regardless where I place implementations before Project needs keycloak and ssr it is an omni channel solution which must implement SSO and enable SEO. Details below. environment Angular CLI: 10.0.3
Node: 12.18.2
OS: darwin x64
Angular: 10.0.4
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router
Ivy Workspace: Yes
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.1000.3
@angular-devkit/build-angular 0.1000.3
@angular-devkit/build-optimizer 0.1000.3
@angular-devkit/build-webpack 0.1000.3
@angular-devkit/core 10.0.2
@angular-devkit/schematics 10.0.3
@angular/cli 10.0.3
@ngtools/webpack 10.0.3
@nguniversal/builders 10.0.1
@nguniversal/common 10.0.1
@nguniversal/express-engine 10.0.1
@schematics/angular 10.0.3
@schematics/update 0.1000.3
rxjs 6.5.5
typescript 3.9.7
webpack 4.43.0//SSR Dom errors polyfile and work around
const domino = require('domino');
import "localstorage-polyfill";
//angular/express
import 'zone.js/dist/zone-node';
import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { join } from 'path';
import { existsSync, readFileSync } from 'fs';
const distFolder = join(process.cwd(), 'dist/browser');
const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index.html';
//SSR Dom errors polyfile and work around
const template = readFileSync(join(distFolder, indexHtml)).toString();
const window = domino.createWindow(template);
(global as any).window = window;
(global as any).document = window.document;
(global as any).Event = window.Event;
(global as any).KeyboardEvent = window.KeyboardEvent;
(global as any).MouseEvent = window.MouseEvent;
(global as any).FocusEvent = window.FocusEvent;
(global as any).PointerEvent = window.PointerEvent;
(global as any).HTMLElement = window.HTMLElement;
(global as any).HTMLElement.prototype.getBoundingClientRect = () => {
return {
left: '',
right: '',
top: '',
bottom: ''
};
};
// xmlhttprequest
// (global as any).XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest;
(global as any).navigator = window.navigator;
(global as any).localStorage = window.localStorage;
(global as any).DOMTokenList = window.DOMTokenList;
Object.defineProperty(window.document.body.style, 'transform', {
value: () => {
return {
enumerable: true,
configurable: true,
};
},
});
(global as any).CSS = null;
(global as any).Prism = null;
//SSR Dom errors polyfile and work around
import { AppServerModule } from './src/main.server';
import { APP_BASE_HREF } from '@angular/common';
import { createProxyMiddleware, Filter, Options, RequestHandler } from 'http-proxy-middleware';
// The Express app is exported so that it can be used by serverless Functions.
export function app(): express.Express {
const server = express();
// Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
server.engine('html', ngExpressEngine({
bootstrap: AppServerModule,
}));
server.set('view engine', 'html');
server.set('views', distFolder);
// Serve static files from /browser
server.get('*.*', express.static(distFolder, {
maxAge: '1y'
}));
// All regular routes use the Universal engine
server.get('*', (req, res) => {
res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
});
return server;
}
function run(): void {
const port = process.env.PORT || 4000;
// Start up the Node server
const server = app();
server.listen(port, () => {
console.log(`Node Express server listening on http://localhost:${port}`);
});
}
// Webpack will replace 'require' with '__webpack_require__'
// '__non_webpack_require__' is a proxy to Node 'require'
// The below code is to ensure that the server is run only when not requiring the bundle.
declare const __non_webpack_require__: NodeRequire;
const mainModule = __non_webpack_require__.main;
const moduleFilename = mainModule && mainModule.filename || '';
if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
run();
}
export * from './src/main.server';
error Compiled successfully. /server/main.js:129404
})(window, function (sha256_imported, base64js_imported) {
^
ReferenceError: window is not defined
at Object../node_modules/keycloak-js/dist/keycloak.js |
|
Try with keycloak-angular insted of keycloak-js npm package. It may be solve your problem. |
I am using keycloak-angular issue reported with no luck on fix, apparently some claim work arounds above work with angular 8,9 issues/263 "keycloak-angular": "^7.3.1",
"keycloak-js": "^10.0.2", |
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
🐞 Bug report
What modules are related to this issue?
Is this a regression?
No
Description
I was trying to add Angular Universal to our project but, when I use
npm run dev:ssrI get the error metioned on the title, here's the entire message:I tried adding the following code to server.ts, as suggested in another thread of this exact problem, however, this did not work:
After this, I really don't know what to do now, so I come here for help.
Since this is my first time posting here, please tell me if you need something else added.
🔬 Minimal Reproduction
Running
npm run server:ssrprompts the error.🌍 Your Environment
The text was updated successfully, but these errors were encountered: