🫢 Damn~~❗️ ReferenceError: window is not defined?

Damn❗️Damn❗️Damn❗️Damn❗️Damn❗️

ReferenceError: window is not defined?

在用 next 开发时是否经常遇到 XXX is not defined !!

🙋‍♀️🌰:在使用ahooks时,依赖windowdocumentnode不支持的对象 那么恭喜你,你应该会看到如下报错

解决方案

jsx 复制代码
'use client'
import { useEffect } from 'react';  
const Page = () => {  
    useEffect(() => {  
        console.log(window.location.origin);  
    }, []);  

    return (  
        <div>  
            <h1>Index Page</h1>  
        </div>  
    );  
}; 
export default Page;

建议封装成hooks

jsx 复制代码
'use client';
import { useRef, useEffect } from 'react';

const useWindow = () => {
    const windowRef = useRef(null);
    useEffect(() => {
        windowRef.current = window;
        // documentRef.current = window.document;
    }, []);
    return windowRef;
};

export default useWindow;

使用

jsx 复制代码
'use client';
import React from 'react';
import { useScroll } from 'ahooks';
import { useDocument } from '@/hooks';

const ScrollTop = () => {
    const document = useDocument();
    const scroll = useScroll(document);
    return (
        ...
        )
    );
};

export default ScrollTop;

扩展

最近在掘金看见了一个下雪特效,我想这tM不拿到我的网站来试试水!

github-snow-fall 科学

演示网站-snow-fall 科学

我看了源码是使用webComponent实现的 so easy!!

PS:想要学习webComponent可以查看源码对照学习

我直接一手import,反手给我一个报错!!

Damn❗️❗️❗️

报错如下

csharp 复制代码
HTMLElement is not defined

部分源码如下:

折腾了一段时间也没搜索到教程

最后解决办法如下:有更好的办法可以在评论区留言

js 复制代码
import dynamic from 'next/dynamic';
dynamic(import('@zachleat/snow-fall'), {
    ssr: false
});
const Snow = () => {
    return (
        <snow-fall></snow-fall>
    );
};

结语

next项目虽然有时在dev环境可以跑通,但build时出现了上述问题是不能编译通过的!!

头图片是蛇皮饼小干

相关推荐
小墨宝19 分钟前
js 生成pdf 并上传文件
前端·javascript·pdf
HED34 分钟前
用扣子快速手撸人生中第一个AI智能应用!
前端·人工智能
DN金猿38 分钟前
使用npm install或cnpm install报错解决
前端·npm·node.js
丘山子39 分钟前
一些鲜为人知的 IP 地址怪异写法
前端·后端·tcp/ip
志存高远661 小时前
Kotlin 的 suspend 关键字
前端
www_pp_1 小时前
# 构建词汇表:自然语言处理中的关键步骤
前端·javascript·自然语言处理·easyui
天天扭码2 小时前
总所周知,JavaScript中有很多函数定义方式,如何“因地制宜”?(ˉ﹃ˉ)
前端·javascript·面试
一个专注写代码的程序媛2 小时前
为什么vue的key值,不用index?
前端·javascript·vue.js
장숙혜2 小时前
ElementUi的Dropdown下拉菜单的详细介绍及使用
前端·javascript·vue.js
火柴盒zhang2 小时前
websheet之 编辑器
开发语言·前端·javascript·编辑器·spreadsheet·websheet