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

52 views Asked by At

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.

0

There are 0 answers