Built Next.js app suddenly disappears after loading for a moment, but runs fine in development environment

Question

My next.js project using typescript runs fine in the development environment, but when building npm run build the page disappears after loading. I think this has something to do with laying out the page, but I'm not sure. I got the following information in the console.

Uncaught Error: Minified React Error #418; visit https://reactjs.org/docs/error-decoder.html?invariant=418 for the full message, or at the full error and other helpful warnings used in a non-minified development environment. Uncaught Error: Minified React Error #423; visit https://reactjs.org/docs/error-decoder.html?invariant=423 for the full message, or for non-minified development the full error and other helpful warnings environment. DOMException: Execution of 'appendChild' on 'Node' failed: Only one element is allowed on the document. DOMException: 'removeChild' on 'Node' failed: 'The node to be removed is not a child of this node.'

layout.tsx

import './globals.css'
import type { Metadata } from 'next'
// import { Inter } from 'next/font/google'
import Navbar from '../components/Navbar'
import Image from 'next/image'
// const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: 'redacted',
  description: 'Personal website',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <div className="relative">
      <div className="-z-1 bg-night absolute inset-0">
        <div className="fixed w-screen h-screen pointer-events-none bg-scroll">
          <Image src="/bg-circle.png" alt={''} layout="fill" objectFit="cover" />
        </div>
      </div>
      <div className='flex justify-center'>
        <div className="fixed z-10 w-2/5">
          <Navbar />
        </div>
      </div>

      
      <div className="relative z-0">{children}</div>
    </div>
  )
}

I tried editing the {children} component but nothing seems to work.

Answer 1

Have you tried using the React.ReactNode[] type to input children?