window is not defined

[Luktm]

Window is not defined every time I was trying npm install reactjs modules

window is not defined after install react-chat-widget or any others reactjs modules

Error of Window is not defined when import react modules

when i import the module as picture below:

1. import module
   

2. use module into render function
   

3. next.config.js with zeit/next-css npm package
   

4. package.json
   

Step to get error

Steps to produce the error after install react modules:

1. Open cmd as administration
2. run "yarn run dev"
3. localhost:3000 started
4. open chrome browser, refresh
5. Unhandled Rejection (ReferenceError): window is not defined

Expected behavior

I expect react-chat-widget it can do like this as picture below after installed module:

Screenshots of Error shows in browser after run it

System information

• OS: Windows
• chrome
• Version of Next.js: [e.g. 7.0.2]

[timneutkens]

Sounds like you'll want to use the ssr: false option for next/dynamic: https://github.com/zeit/next.js#3-with-no-ssr

It basically comes down to window not being available in a Node.js environment, so the code itself has to be required only on the client side, which is what ssr: false handles.

[seymoe]

hi, i have this problem and i use ssr: false, solved successful. But another problem is the Component i import have a static method, I cannot call that method, so how to deal with this, thanks!!

[BranceLee]

I meet the same problem and I have solved it.

I use the HOC to wrap a img tag, because I need use the lazysizes to render in the web client rather than the server, So I use the HOC, and Import it dynamic.

import dynamic from 'next/dynamic';

const Image=dynamic(import ('../components/Image'),{ssr:false});

[yareyaredesuyo]

The answer for using react-chat-widget in nextjs.

const Widget = dynamic(() => import("react-chat-widget").then(mod => mod.Widget), {
  ssr: false
});

[yareyaredesuyo]

And when loading function, it looks like not good way for loading (because it maybe converted to LoadableComponent)

So Have to load like this.

if (typeof window !== 'undefined') { 
  const { addResponseMessage } = require('react-chat-widget'); 
  addResponseMessage("test");
}  

Is there any good way for loading function ?

[adventurini]

Is there a workaround for using absolute positioning on a modal and a window click event to replace the onBlur method?

I would typically use the following code to register an onBlur on a component with absolute positioning.

 window.onclick = (e) => {
    emojiClick && (e.target.className === "create-post-emoji-picker" ? null : setEmojiClick(false))
  }

[qnxdev]

How to solve this with ssr: true, I mean with Server side rendering.

[mayur-keswani]

How to solve this with ssr: true, I mean with Server side rendering.
Hello, Did you solve this issue with wssr=true?