uncaughtException: RangeError: Array buffer allocation failed Next.js

I got an error:

RangeError: Array buffer allocation failed
    at new ArrayBuffer (<anonymous>)
    at new Uint8Array (<anonymous>)
 ⨯ uncaughtException: RangeError: Array buffer allocation failed
    at new ArrayBuffer (<anonymous>)
    at new Uint8Array (<anonymous>)
 ⨯ uncaughtException:  RangeError: Array buffer allocation failed
    at new ArrayBuffer (<anonymous>)
    at new Uint8Array (<anonymous>)

It's in a new next.js project i only coded the component Navbar, I already tried to make another nextjs application and update to the latest version. But that couldn't fix my problem The code is below:

'use client';
import { useEffect } from 'react';
import Link from 'next/link';
import Image from 'next/image';
export default function Navbar() {
useEffect(() => {
const menuButton = document.querySelector('[aria-controls="mobile-menu"]');
const mobileMenu = document.getElementById('mobile-menu');
console.log('Menu button and mobile menu elements:', menuButton, mobileMenu);
const toggleMenu = () => {
console.log('Menu button clicked');
mobileMenu.classList.toggle('hidden');
};
if (menuButton && mobileMenu) {
menuButton.addEventListener('click', toggleMenu);
}
return () => {
if (menuButton && mobileMenu) {
menuButton.removeEventListener('click', toggleMenu);
}
};
}, []);
return (
<div>
<nav className="bg-primary-50">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between h-16">
<div className="flex items-center">
<Link className="text-xl font-semibold" href="/">
TimovC
</Link>
</div>
<div className="hidden md:block">
<div className="ml-10 flex items-baseline space-x-4">
<Link href="/portfolio">Portfolio</Link>
<Link href="/contact">Contact</Link>
<Link href="/klanten">Voor klanten</Link>
</div>
</div>
<div className="-mr-2 flex md:hidden">
<button
type="button"
className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white"
aria-controls="mobile-menu"
aria-expanded="false"
>
<span className="sr-only">Open menu</span>
<Image src="/mobileMenu.svg" alt="mobile menu" width={24} height={24} />
</button>
</div>
</div>
</div>
<div className="md:hidden hidden" id="mobile-menu">
<div className="px-2 pt-2 pb-3 space-y-1 space-x-4 sm:px-3">
<Link href="/portfolio">Portfolio</Link>
<Link href="/contact">Contact</Link>
<Link href="/klanten">Voor klanten</Link>
</div>
</div>
</nav>
</div>
);
};

I asked chatgtp for a solution but he said it has something to do with the memory but how could it, my friend is not having the problem.

I'm working on a laptop with the following specs:

• Ram 16gb
• CPU Ryzen 5 4000 series
• 512 gb storage

I got the latest node installed.

It seems that the error appears when i get an error in my jsx i commented out my navbar so that isnt the main problem here i think

I'm out of solutions thats why this is my last resort.