NextJS - 窗口未定义

Question

我正在尝试将Typewriter Effect导入我的 NextJS 项目，但是每当我这样做时，我都会收到以下错误消息：

参考错误：窗口未定义

从我读到的内容来看，显示错误是因为它试图在服务器端而不是客户端加载库。

所以当我只是尝试像这样导入它时：

import Typewriter from 'typewriter-effect'

错误立即显示。

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

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

然而，它也不是这样工作的。我收到一个错误，内容如下：

元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件）但得到：未定义。

我已经在很多地方搜索过这个问题的潜在解决方案，但我的尝试没有成功。

Answer 1

您需要做的是没有 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;