Window is not defined while using mixitup in Nextjs

Question

I'm using mixitup plugin in my Nextjs app and as soon as i import the plugin in my index page it will return this error:

"ReferenceError: window is not defined"

Here is my code:

import mixitup from 'mixitup';

export default function Home() {
  return <div>Hi</div>;
}

How should i solve this issue?

Answer 1

You need to use next/dynamic with ssr disabled.

To dynamically load a component on the client side, you can use the ssr option to disable server-rendering. This is useful if an external dependency or component relies on browser APIs like window.

from NextJs: Dynamic Import with no SSR

import dynamic from "next/dynamic";

const mixitup = dynamic(() => import("mixitup"), {
  ssr: false,
});