NextJS - 未定义窗口

Posted 2023-02-19

【中文标题】NextJS - 未定义窗口

【英文标题】：NextJS - window is not defined

【发布时间】：2019-10-12 16:06:33

【问题描述】：

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

ReferenceError: 未定义窗口

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

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

import Typewriter from 'typewriter-effect'

错误立即显示。

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

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

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

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

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

【参考方案1】：

你需要做的是dynamic import with No s-s-r

试试这个：

import React,  Component  from 'react';
import dynamic from 'next/dynamic';

const Typewriter = dynamic(
    () => import('typewriter-effect'),
    
        s-s-r: 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.org/docs/advanced-features/dynamic-import#with-no-s-s-r的实际链接

感谢@Kirill！不确定他们何时更改，但我更新了回复中的链接