issue with nextjs build. ReferenceErrror: window is not defined

Question

I am trying to build my app, but I cannot figure out why this ReferenceError: window is not defined should be occurring especially since I am using 'use client'

"use client";
import React, { useEffect, useState } from "react";
import { ref, getDownloadURL } from "firebase/storage";
import { storage } from "./firebase"; // Adjust the import path as needed
import Image from "next/image";

const Hero = () => {
    const [bgImageUrl, setBgImageUrl] = useState("");

    useEffect(() => {
        const fetchImage = async () => {
            const storageRef = ref(storage, "/Hero.jpg"); // Update path accordingly
            try {
                const url = await getDownloadURL(storageRef);
                setBgImageUrl(url);
            } catch (error) {
                console.error("Error fetching image from Firebase:", error);
            }
        };

        fetchImage();
    }, []);

    return (
        <>
            {bgImageUrl && (
                <Image src={bgImageUrl} alt="Hero Image" fill={true} />
            )}
        </>
    );
};

export default Hero;

I have commented out all components until I had just one component with the issue. this component is displayed on my homepage. The image renders locally. The build fails.

ReferenceError: window is not defined at /home/cjbellmyer/code/green_country/.next/server/app/page.js:512:5749 at 4860 (/home/cjbellmyer/code/green_country/.next/server/app/page.js:512:16127) at t (/home/cjbellmyer/code/green_country/.next/server/webpack-runtime.js:1:127) at 7586 (/home/cjbellmyer/code/green_country/.next/server/app/page.js:848:47) at t (/home/cjbellmyer/code/green_country/.next/server/webpack-runtime.js:1:127) at 9165 (/home/cjbellmyer/code/green_country/.next/server/app/page.js:512:2954) at t (/home/cjbellmyer/code/green_country/.next/server/webpack-runtime.js:1:127) at F (/home/cjbellmyer/code/green_country/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:94693) at j (/home/cjbellmyer/code/green_country/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:93244) at rP (/home/cjbellmyer/code/green_country/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:33905) Generating static pages (4/4)

Export encountered errors on following paths: /page: /

I have tried setting a default path in my useState. I have tried using a regular img tag instead of Image component.

Answer 1

It should work but doesn't. Why?

First you need to understand why reference error happens.

It can happen for many different reasons but most common are when you are trying to use something before it's defined or that it doesn't exist or not available in the current scope.

Now, while 'use client' indicates that specific component be run client side, it doesn't inherently solve issues compatibility with certain client side code.

That includes browser API's like window and document.

But I'm not calling anything like that, in-fact there's not even a mention of window here. So why is it giving the reference error?

You are not using the window but firebase does. Hence, the window reference error.

You can resolve this by ensuring that code accessing firebase is only used in client context. To do this, just check if window is available.

const fetchImage = async () => {
    // Add this check
    if (typeof window !== 'undefined') {
        const storageRef = ref(storage, "/Hero.jpg"); // Update path accordingly
        try {
            const url = await getDownloadURL(storageRef);
            setBgImageUrl(url);
        } catch (error) {
            console.error("Error fetching image from Firebase:", error);
        }
    }
};