WowJs React UseEffect

问题描述

import { useEffect } from 'react';
import WOW from 'wowjs/dist/wow.js';
import React from 'react';
import '@/assets/styles/scss/main.scss';

function MyApp({ Component,pageProps }) {
    useEffect(() => {
        const wow = () => {
            new WOW.WOW({
                BoxClass: 'wow',// default
                animateClass: 'animated',// default
                offset: 0,// default
                mobile: true,// default
                live: true,// default
            });
        };
        // if (typeof window !== 'undefined') {
        //     return;
        // }
        wow.init();
        wow.call(window);
    },[]);
    return <Component {...pageProps} />;
}

export default MyApp;

以下错误

服务器错误 参考错误：窗口未定义

生成页面时发生此错误。任何控制台日志都将显示在终端窗口中。 来源 wowjs/dist/wow.js (1:0) @ eval

1 | module.exports = require("wowjs/dist/wow.js"); 块引用

请问，我做错了什么？

解决方法

根据我在您的帖子中看到的内容，问题出在 wow.js 包本身而不是您的代码中。 useEffect 仅在客户端执行，因此访问 window 没有问题。问题在于 import WOW from 'wowjs/dist/wow.js';。我没有看过源代码，但我猜这个包在导入文件的顶层提到了 window。

解决方案是在您的 useEffect 中使用 Dynamic Imports，以便您仅在客户端浏览器中导入 WOW 包。