NextJS - window is not defined

Question

I'm trying to import Typewriter Effect into my NextJS project, but whenever I do, I get this error that reads the following:

ReferenceError: window is not defined

and from what I've read, the error is displaying because it's trying to load the library on the server-side rather than the client-side.

So when I simply try to import it like this:

import Typewriter from 'typewriter-effect'

the error promptly displays.

People suggested that I try something like this:

let Typewriter
if (typeof window !== 'undefined') {
  Typewriter = require( 'typewriter-effect' )
}

however, it doesn't work like this either. I get an error that reads the following:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

I've searched a lot of places for a potential solution to this problem, but I've been unsuccessful with my attempts.

Solution

What you need to do is dynamic import with No SSR

Try this:

import React, { Component } from 'react';
import dynamic from 'next/dynamic';

const Typewriter = dynamic(
    () => import('typewriter-effect'),
    {
        ssr: false
    }
)

class Home extends Component {
    render() {
        return (
            <Typewriter
                onInit={(typewriter) => {
                    typewriter.typeString('Hello World!')
                        .callFunction(() => {
                            console.log('String typed out');
                    })
                        .pauseFor(2500)
                        .deleteAll()
                        .callFunction(() => {
                            console.log('All strings were deleted');
                    })
                        .start();
            }}
            />
        )
    }
}

export default Home;

Comments

[Kirill]

actual link for this nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr

[Karin C]

Thanks @Kirill! not sure when they changed it, but I updated the link in my response