Search code examples
next.jssurveyjs

Imported modules without server side rendering feature

I have an issue with Next.js. When I'm trying to import a node module, the module uses the window object and Next.js is throwing an error: window is not defined.

The module is imported like this:

import * as widgets from 'survey-widgets';

widgets.autocomplete(Survey);

I guess Next.js dynamic imports will not work in my case. Is there any way of doing it?

Solution

  • For anyone looking for the solution for this, I solved it with NextJs Dynamic imports with no SSR.

    What I did instead is importing my top level component using dynamic import like this:

    const MyComponent= dynamic(
() => import('../components/hello3'),
  { ssr: false }
)

    So the hello3 component will no longer be used in server side rendering and instead it will render on client side.

    Then just use it like this:

    <MyComponent/>