WowJs React UseEffect

Question

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;

Error Below

Server Error ReferenceError: window is not defined

This error happened while generating the page. Any console logs will be displayed in the terminal window. Source wowjs/dist/wow.js (1:0) @ eval

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

Please, what am I doing wrong?

Answer 1

Based on what I am seeing in your post, the issue is with the wow.js package itself rather than in your code. The useEffect only gets executed on the client side so accessing window there is not a problem. It's the import WOW from 'wowjs/dist/wow.js'; that's the problem. I haven't looked at the source code but I'm guessing that this package mentions window at the top level of the imported file.

The solution is to use Dynamic Imports inside of your useEffect so that you are only importing the WOW package when you are in the browser on the client-side.