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

头图片是蛇皮饼小干

相关推荐
LucianaiB5 分钟前
拿到Offer,租房怎么办?看我用高德MCP+腾讯云MCP,帮你分分钟搞定!
前端·后端·cursor
用户175923421502811 分钟前
D3.js - 基本用法
前端·d3.js
Mr.Liu628 分钟前
小程序30-wxml语法-声明和绑定数据
前端·微信小程序·小程序
76756047928 分钟前
useDateFormat源码解析
前端·源码
Mintopia28 分钟前
Three.js粒子系统开发实战:从基础到性能优化
前端·javascript·three.js
Promise52029 分钟前
大屏"跑马灯" 长列表性能优化
前端·javascript
子玖29 分钟前
初始化项目前的准备
前端·javascript·vue.js
Mintopia30 分钟前
Three.js进阶实战:打造动态光影交互场景 ——结合环境光、聚光灯与相机控制的沉浸式体验
前端·javascript·three.js
贵州数擎科技有限公司30 分钟前
Threejs绘制小兩伞快拿去送给你的女神
前端
Carlos_sam32 分钟前
OpenLayers:封装Overlay的方法
前端·javascript