SSR - Window is not defined

See original GitHub issue

PLEASE MAKE SURE THAT:

  • you searched similar issues online (9/10 issues in this repo are solved by googling, so please…do it)
  • you provide an online demo I can see without having to replicate your environment
  • you help me by debugging your issue, and if you can’t, do go on filling out this form

I’m submitting a … (check one with “x”)

[ x] bug report => search github for a similar issue or PR before submitting
[ ] support request/question

Notice: feature requests will be ignored, submit a PR if you'd like

Current behavior

Prevents application from running because window is not defined

Expected behavior

The app would run and I would be able to use ngx-chips with out the error “Window is not defined”

Minimal reproduction of the problem with instructions (if applicable)

see: #492

This issue persists and a hack that is provided in the above is not relevant to my situation as I do not use the same repo and upon attempting to use it was faced with even more errors, unfortunately the issue was closed with no fix.

Previously I would just roll back to an older version, however that no longer seems to work due to the dependency to ng2-material-dropdown, which causes the error:

NodeInvocationException: Prerendering failed because of error: TypeError: Object(…) is not a function at eval (webpack-internal:///./node_modules/ng2-material-dropdown/ng2-material-dropdown.es5.js:458:155) at Module…/node_modules/ng2-material-dropdown/ng2-material-dropdown.es5.js (G:\05072018\aspnetcore-angular2-universal-master\ClientApp\dist\main-server.js:9274:1) at webpack_require (G:\05072018\aspnetcore-angular2-universal-master\ClientApp\dist\main-server.js:20:30) at eval (webpack-internal:///./node_modules/ngx-chips/esm5/ngx-chips.js:16:79) at Module…/node_modules/ngx-chips/esm5/ngx-chips.js (G:\05072018\aspnetcore-angular2-universal-master\ClientApp\dist\main-server.js:12214:1) at webpack_require (G:\05072018\aspnetcore-angular2-universal-master\ClientApp\dist\main-server.js:20:30) at eval (webpack-internal:///./ClientApp/app/dashboard/dashboard.module.ts:30:68) at Module…/ClientApp/app/dashboard/dashboard.module.ts (G:\05072018\aspnetcore-angular2-universal-master\ClientApp\dist\main-server.js:1125:1) at webpack_require (G:\05072018\aspnetcore-angular2-universal-master\ClientApp\dist\main-server.js:20:30) at eval (webpack-internal:///./ClientApp/app/app.module.ts:47:86) Current directory is: G:\05072018\aspnetcore-angular2-universal-master

To reproduce the error use this repo: https://github.com/MarkPieszak/aspnetcore-angular2-universal

Add ngx-chips to the app.module.ts and use in one of the components.

What do you use to build your app?. Please specify the version

“webpack”: “^4.9.1”

Angular version:

6.0.3

ngx-chips version:

1.9.2

Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

Issue Analytics

  • State:open
  • Created 5 years ago
  • Reactions:6
  • Comments:16 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
khwerhahncommented, Nov 23, 2019

Same issue here.

ReferenceError: window is not defined node_modules/ngx-chips/bundles/ngx-chips.umd.js:1497:21 node_modules/ngx-chips/bundles/ngx-chips.umd.js:2:68 /node_modules/ngx-chips/bundles/ngx-chips.umd.js:5:2

1reaction
nch3ngcommented, Sep 18, 2018

There’s workaround without involving ngx-chips code

check this out: https://github.com/angular/universal/issues/830#issuecomment-345228799

You can fix window is not defined like this: server.ts (start of file)

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;

look: https://github.com/Angular-RU/angular-universal-starter/blob/master/server.ts

Read more comments on GitHub >

github_iconTop Results From Across the Web

React JS Server side issue - window not found - Stack Overflow
BROWSER to my advantage because it will be defined as undefined if it is server side, and it will be true if the...
Read more >
Using window in React SSR: The Complete Guide
window is not defined on the server, so you can't use it during the render of a component being SSR'd. ... During a...
Read more >
window is not defined, when code render on server SSR ...
I'm using Next.js and there is no window when doing server side rendering.
Read more >
referenceerror: window is not defined, how to solve
Here's how to fix the “referenceerror: window is not defined” error that you might have in Node.js or with a tool like Next.js....
Read more >
How to solve "window is not defined" errors in React and Next.js
A different solution is to load your Scroll component using dynamic imports and the srr: false option.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found