🫢 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时出现了上述问题是不能编译通过的!!

头图片是蛇皮饼小干

相关推荐
excel44 分钟前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼2 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping2 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙3 小时前
[译] Composition in CSS
前端·css
白水清风3 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix4 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278004 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端4 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧4 小时前
Promise 的使用
前端·javascript
NBtab4 小时前
Vite + Vue3项目版本更新检查与页面自动刷新方案
前端