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;

Answer 2

require选项应该可以工作，我认为这是默认导入的问题，

在ESM中，这是默认导入。 import Typewriter from 'typewriter-effect'

相等的“要求”是： Typewriter = require( 'typewriter-effect' ).default;

NextJS-未定义窗口

2 个答案: