How to handle error occurred during building project?

[Victor-KingStorm]

Hello, seniors.
While I was building my project, there were following errors.

✓ Collecting page data
Generating static pages (0/12) [= ]ReferenceError: HTMLElement is not defined
at 3252 (D:\Development\Depi\New folder (3)\Depin-Tomi-Client-FE.next\server\app\page.js:1:2348)
at Object.t [as require] (D:\Development\Depi\New folder (3)\Depin-Tomi-Client-FE.next\server\webpack-runtime.js:1:127)
at require (D:\Development\Depi\New folder (3)\Depin-Tomi-Client-FE\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:16:18490)
at I (D:\Development\Depi\New folder (3)\Depin-Tomi-Client-FE\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:94362)
at D:\Development\Depi\New folder (3)\Depin-Tomi-Client-FE\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:96668
at F._fromJSON (D:\Development\Depi\New folder (3)\Depin-Tomi-Client-FE\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:97106)
at JSON.parse ()
at O (D:\Development\Depi\New folder (3)\Depin-Tomi-Client-FE\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:94083)
at t (D:\Development\Depi\New folder (3)\Depin-Tomi-Client-FE\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:100582) {
digest: '1893289508'
}

Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error

ReferenceError: HTMLElement is not defined
at 3252 (D:\Development\Depi\New folder (3)\Depin-Tomi-Client-FE.next\server\app\page.js:1:2348)
at Object.t [as require] (D:\Development\Depi\New folder (3)\Depin-Tomi-Client-FE.next\server\webpack-runtime.js:1:127)
at require (D:\Development\Depi\New folder (3)\Depin-Tomi-Client-FE\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:16:18490)
at I (D:\Development\Depi\New folder (3)\Depin-Tomi-Client-FE\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:94362)
at D:\Development\Depi\New folder (3)\Depin-Tomi-Client-FE\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:96668
at F._fromJSON (D:\Development\Depi\New folder (3)\Depin-Tomi-Client-FE\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:97106)
at JSON.parse ()
at O (D:\Development\Depi\New folder (3)\Depin-Tomi-Client-FE\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:94083)
at t (D:\Development\Depi\New folder (3)\Depin-Tomi-Client-FE\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:100582)
✓ Generating static pages (12/12)

Export encountered errors on following paths:
/page: /
error Command failed with exit code 1.

I thought this is from app/page.tsx, add page.tsx.
"use client"

const BecomeProvider = () => {
   const router = useRouter();
  
   const nextPage = () => {
       router.push('/ConnectWallet')
   }
   const checkRAM = () => {
       console.log("-----> ", navigator)
   }

   useEffect(() => {
       checkRAM()
   }, [])
   return (
       <>
           <div className="flex flex-col items-center md:px-[12vw] px-[8vw] md:py-[12vh] py-[8vh] h-screen text-white" onClick={nextPage}>
               <div className="flex flex-row gap-2 items-center">
                   <div>
                       <Image src={Pic1} alt="Icon" className="md:w-16 md:h-16 w-10 h-10"></Image>
                   </div>
                   <div>
                       <p className="md:text-6xl text-4xl font-bold">Node</p>
                   </div>
               </div>
               <div className="flex flex-col absolute md:bottom-[12vh] bottom-[8vh]">
                   <div className="flex w-full justify-center">
                       <StartLogo></StartLogo>
                   </div>
                   <div className="mt-6">
                       <p className="md:text-xl text-sm">Starting up</p>
                   </div>
               </div>
           </div>
       </>
   )
}

export default BecomeProvider;

I've read some articles dealing with such error, but I can't find solutions.
Who knows it, please give me answer.

[wnqqnw19]

To fix this issues, you need to ensure that the code accessing these browser-specific objects only runs in the client-side environment.

const checkRAM = () => {
    console.log("-----> ", navigator)
 }

Hi, please let it try again with these codes instead of above codes.

const checkRAM = () => {
   if (typeof navigator !== "undefined") {
       console.log("-----> ", navigator);
   }
}

[Victor-KingStorm]

Thanks for your help.
I tried it, but doesn't work.
I've read Next.js Docs and found something about Static Exports.
So I think that when we build the projects, we should deal with Static Exports issue which convert CSR pages into SSR.
Is this right what I think? If so, please teach me how to do.

[icyJoseph]

The root issue in the logs is here:

• https://github.com/Victor-KingStorm/Electron/blob/master/src/components/ui/StartLogo.tsx

And the way to fix it, as per ldrs documentation: https://github.com/GriffinJohnston/ldrs/blob/HEAD/framework-guides.md#nextjs

I'd recommend starting with:

Another method is to use a dynamic import. For convenience you can wrap your loader in a React component that handles the import and registration.

[Victor-KingStorm]

Thanks, I fix it.👍
But I have another error with this.

uncaughtException Error: kill EPERM
at ChildProcess.kill (node:internal/child_process:512:26)
at ChildProcessWorker.forceExit (D:\Development\Depi\New folder (2)\Depin-Tomi-Client-FE\node_modules\next\dist\compiled\jest-worker\index.js:1:12879)
at Timeout._onTimeout (D:\Development\Depi\New folder (2)\Depin-Tomi-Client-FE\node_modules\next\dist\compiled\jest-worker\index.js:1:8684)
at listOnTimeout (node:internal/timers:573:17)
at process.processTimers (node:internal/timers:514:7) {
errno: -4048,
code: 'EPERM',
syscall: 'kill'
}

Did you try to build my project? If so, did you have such errors or not?
In the past, I had such errors in several times, but I have no idea what is EPERM error and how to fix it.

[icyJoseph]

I don't run other people's code.

That's a permissions error... Could be a bunch of things...

What OS do you have?

[Victor-KingStorm]

Windows 10 x64

[icyJoseph]

Ahh that could be the issue. Your npm cli doesn't have the right set of permissions.

Maybe start your Terminal as administrator? I haven't used Windows in nearly a decade, sorry I can't help much more.

I'd say, if the permission error persists, mark this discussion as resolved and open a new discussion with more details about the permission issue.

[Victor-KingStorm]

I think you are right. Thanks again.