question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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