NextJS - 未定义窗口

Question

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

ReferenceError: 未定义窗口

根据我的阅读，显示错误是因为它试图在服务器端而不是客户端加载库。

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

import Typewriter from 'typewriter-effect'

错误立即显示。

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

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

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

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

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

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;