Next13: ReferenceError: Cannot access 'g' before initialization during build

[manojdm]

I'm trying to run next build and I'm getting stuck at errors. Errors are mostly with build server files.

Ex error message -
Error occurred prerendering page "/member/files". Read more: https://nextjs.org/docs/messages/prerender-error ReferenceError: Cannot access 'g' before initialization at Object.ZP (/Users/manojdm/Desktop/fileloom/frontend/.next/server/chunks/112.js:1:3635) at 9663 (/Users/manojdm/Desktop/fileloom/frontend/.next/server/chunks/112.js:1:5595) at t (/Users/manojdm/Desktop/fileloom/frontend/.next/server/webpack-runtime.js:1:128) at 1955 (/Users/manojdm/Desktop/fileloom/frontend/.next/server/chunks/112.js:1:673) at t (/Users/manojdm/Desktop/fileloom/frontend/.next/server/webpack-runtime.js:1:128) at 2618 (/Users/manojdm/Desktop/fileloom/frontend/.next/server/chunks/112.js:1:3663) at t (/Users/manojdm/Desktop/fileloom/frontend/.next/server/webpack-runtime.js:1:128) at 4409 (/Users/manojdm/Desktop/fileloom/frontend/.next/server/app/member/files/page.js:1:2971) at t (/Users/manojdm/Desktop/fileloom/frontend/.next/server/webpack-runtime.js:1:128) at O (/Users/manojdm/Desktop/fileloom/frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:1:185865)

Ex code -

"use client";

import React, { useEffect } from "react";
import { IoIosStats } from "react-icons/io";
import { BiSolidHide } from "react-icons/bi";
import { FaCopy } from "react-icons/fa6";
import styles from "@/styles/design-system/tables.module.css";
import { useDispatch, useSelector } from "@/store/hooks";
import { deleteFile, fetchFiles } from "@/store/slices/files/fileSlice";
import { RootState } from "@/store/store";

const Page = () => {
    const dispatch = useDispatch();

    useEffect(() => {
        dispatch(fetchFiles());
    });

    const { isLoading, success, files } = useSelector(
        (state: RootState) => state.files
    );

    if (isLoading) {
        return "Loading....";
    } else if (!success) {
        return "Something went wrong, please try again later.";
    }

    const convertDate = (date: string) => {
        const options: Intl.DateTimeFormatOptions = {
            year: "numeric",
            month: "long",
            day: "numeric",
            hour: "2-digit",
            minute: "2-digit",
        };

        const formattedDate = new Date(date).toLocaleString("en-US", options);
        return formattedDate.split("at");
    };

    const handleHideFile = (id: string) => {
        dispatch(deleteFile(id));
    };

    return (
        <>
            <div className={styles.tableContainer}>
                <div className={styles.tableTitle}>Manage Files</div>
                <table>
                    <thead>
                        <tr>
                            <th>Id</th>
                            <th>Name</th>
                            <th>Size</th>
                            <th>URL Slug</th>
                            <th>Uploaded Date</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {files.map((file: any) => (
                            <tr key={file.alias}>
                                <td>{file?.linkId}</td>
                                <td>{file?.completeKey.split("/")[1]}</td>
                                <td>{(file?.fileSize / 1000).toFixed(2)}Mb</td>
                                <td>{file.alias}</td>
                                <td>
                                    {convertDate(file?.createdAt)[0]}
                                    <br /> {convertDate(file?.createdAt)[1]}
                                </td>
                                <td className={styles.actionItems}>
                                    <div
                                        onClick={() =>
                                            navigator.clipboard.writeText(
                                                `${window.location.host}/${file.alias}`
                                            )
                                        }
                                        className={styles.actionItem}
                                    >
                                        <FaCopy />
                                    </div>
                                    <div className={styles.actionItem}>
                                        <IoIosStats />
                                    </div>
                                    <div
                                        onClick={() => handleHideFile(file?.completeKey)}
                                        className={styles.actionItem}
                                    >
                                        <BiSolidHide />
                                    </div>
                                </td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>
        </>
    );
};

export default Page;

I'm trying to run next build and I'm getting stuck at errors. Errors are mostly releated server files. I was trying to host this on vercel and was getting blocked with errors out during build. "next start" is working fine though and it's as expected.

[Fredrickinyang]

Were you able to resolve this?
and what was your solution

[rahulsharmaah]

did you got any solution for this??

[mmarifat]

Facing the same

[rahulsharmaah]

what is the solution for this

[mmarifat]

Hey,
My solution was to wrap Link and Image component from next and pass href and src conditionally by checking their existence, remotePattern match