Next.js 未定义NextJS-窗口

我正试图导入到我的NextJS项目中，但每次导入时，都会出现如下错误：

ReferenceError:未定义窗口

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

因此，当我尝试像这样导入它时：

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

从“打字机效果”导入打字机

错误立即显示出来

人们建议我试试这样的东西：

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

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

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

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

你需要做的是

试试这个：

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;

import React，{Component}来自'React'；
从“下一个/动态”导入动态；
常量打字机=动态(
（）=>import（'typewriter-effect'），
{
ssr：错误
}
)
类Home扩展组件{
render（）{
返回(
{
typewriter.typeString（'Hello World！'）
.callFunction（（）=>{
log（'String typed out'）；
})
.pauseFor（2500）
.deleteAll（）
.callFunction（（）=>{
log（“删除了所有字符串”）；
})
.start（）；
}}
/>
)
}
}
导出默认主页；

此链接的实际链接谢谢@Kirill！不确定他们什么时候更改了，但我在回复中更新了链接