window is undefined in next js when using materialize css

Question

I'm using Next.js and when I try to

import M from 'materialize-css';

I get this error:

window is undefined

bcjohn · Accepted Answer · 2020-08-07 08:48:37Z

1

You can only import the materialize-css on client side by using dynamic.

import dynamic from 'next/dynamic';
const M = dynamic(() => import('materialize-css'), {
    ssr: false,
});

answered Aug 7, 2020 at 0:49

bcjohn

2,54315 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Meir · Accepted Answer · 2020-08-07 16:25:23Z

1

I added a useEffect and added this line:

     if(typeof window !== 'undefined'){
       const M = require('materialize-css');
       ...
     }

instead of the import statement

answered Aug 6, 2020 at 21:47

Meir

6028 silver badges22 bronze badges