webpack build causes errors with server-side rendering about react-cytoscapejs HOT 2 OPEN

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 });

from react-cytoscapejs.

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?

from react-cytoscapejs.