webpack build causes errors with server-side rendering

[williaster]

When we use this library in a server-side rendering environment, we get the error ReferenceError: window is not defined

if you look at the source, it looks like the error is at line 1:456 which maps to where window is referenced in this formatted version.

This means window is referenced on module import, so even if we wait to render the component until it is mounted (i.e., in the browser) we get this error from module import alone. We have a work around to lazy load the module when a parent component is mounted, but it's a lot of setup just to work.

This SO question suggests that it may be your webpack output configuration.

[acj97]

After spending some times for this problem, i found this solution
https://stackoverflow.com/questions/68596778/next-js-window-is-not-defined

you just need to use dynamic on the import

import dynamic from 'next/dynamic';
const CytoscapeComponent = dynamic(() => (import('react-cytoscapejs')), { ssr: false });

[TuanManhCao]

Good stuff @acj97 , I solve this problem in the same way.

However got another one, when I tried to use CytoScape with Layout extension. For example when I use it with cola layout I cannot register the layout before rendering CytoScapeComponent, I think it's the problem with how Dynamic Component is being loaded.

Have you come across the same thing?