NextJS - window 未定义

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;

NextJS - window 未定义

NextJS - window is not defined

next.js