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

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

ReferenceError: window is not defined?

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

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

解决方案

'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

'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;

使用

'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❗️❗️❗️

报错如下

HTMLElement is not defined

部分源码如下：

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

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

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

结语

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

头图片是蛇皮饼小干