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?

score 0 · Answer 1 · answered Jul 09 '22 at 12:03

0

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

answered Jul 09 '22 at 12:03

grenzbotin

2,489
1
12
14

`mixitup` library is not a React component. Dynamically importing this way with `next/dynamic` won't work. – juliomalves Jul 10 '22 at 16:33
Well, it is not necessary to have it as a react component. See the integration of the pure mixitup npm package in a shortly created react app here: https://codesandbox.io/s/wonderful-browser-lil5bj?file=/src/App.js – grenzbotin Jul 10 '22 at 19:07
I know, but that wasn't my point. `next/dynamic` can only be used with React components, which `mixitup` is not. – juliomalves Jul 10 '22 at 20:42
1

Thanks, didn't think about it enough. You are right. – grenzbotin Jul 11 '22 at 18:46
@grenzbotin I used your code but it tells me mixitup is not a function – jumpo marketing Jul 16 '22 at 15:32

Window is not defined while using mixitup in Nextjs

1 Answers1