How to Use a Library in Next.JS That Wants Window.Whatever

How to use a library that expects to be running in a browser, but is breaking when rendered server-side in the node.js environment, or, how to make react-chat-widget work in next.js.

This article uses the Korerorero project as an example. Korerorero is an open source implementation of an animated chatbot with voice recognition.

Here’s what happens in the example above. On line 4 a promise is created, which will resolve to the variable mod when the library is loaded. Then the fully initialized Widget is available as a property on mod.

On line 6 the call to dynamic is configured with an option that tells the framework only to invoke the import in the browser environment.

Good times at the SSR coral.

Related posts:

Before livestock is killed in certain parts of the world, they make them listen to music. Like, someone is actually employed to suit-up in a three-piece and play, for example, classical music for…

Integral Ad Science (IAS) is the global leader in digital ad verification, offering technologies that drive high-quality advertising media. IAS equips advertisers and publishers with both the insight…

I think every single self-help concept in existence makes this particular statement. All the new-age teachers and concepts say it. However — this does not make it any less true. It applies to…