next.js - NextJS-未定义窗口

Question

我正在尝试将Typewriter Effect导入到NextJS项目中，但是每当执行此操作时，我都会收到此错误消息，内容如下:

ReferenceError: window is not defined

从我所读的内容中，将显示错误，因为它正在尝试在服务器端而不是客户端上加载库。

因此，当我只是简单地尝试像这样导入它时:
import Typewriter from 'typewriter-effect'
错误会立即显示。

人们建议我尝试这样的事情:

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

但是，它也不是这样。我收到一条读取以下内容的错误:

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

我已经在很多地方搜索了可能解决该问题的方法，但是我的尝试一直没有成功。

Answer 1

您需要做的是dynamic import with No SSR

试试这个:

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;