Die erstellte Next.js-App verschwindet plötzlich nach dem Laden für einen Moment, läuft aber in der Entwicklungsumgebung einwandfrei

Question

Mein next.js-Projekt mit Typescript läuft in der Entwicklungsumgebung einwandfrei, aber beim Erstellen von npm run build verschwindet die Seite nach dem Laden. Ich denke, das hat etwas mit dem Layout der Seite zu tun, bin mir aber nicht sicher. Ich habe die folgenden Informationen in der Konsole erhalten.

Nicht erfasster Fehler: Minified React Error #418; besuchen Sie https://reactjs.org/docs/error-decoder.html?invariant=418 für die vollständige Fehlermeldung und andere hilfreiche Warnungen, die in a verwendet werden nicht-minimierte Entwicklungsumgebung. Nicht erfasster Fehler: Minified React Error #423; besuchen Sie https://reactjs.org/docs/error-decoder.html?invariant=423 für die vollständige Meldung oder für die nicht minimierte Entwicklung die vollständige Fehler- und andere hilfreiche Warnumgebung. DOMException: Ausführung von „appendChild“ auf „Node“ fehlgeschlagen: Im Dokument ist nur ein Element zulässig. DOMException: „removeChild“ auf „Node“ fehlgeschlagen: „Der zu entfernende Knoten ist kein untergeordnetes Element dieses Knotens.“

layout.tsx

import './globals.css'
Importtyp {Metadaten} von „nächster“
// { Inter } aus 'next/font/google' importieren
Navbar aus „../components/Navbar“ importieren
Bild aus „next/image“ importieren
// const inter = Inter({ subsets: ['latin'] })

Konstante Metadaten exportieren: Metadata = {
  Titel: 'geschwärzt',
  Beschreibung: 'Persönliche Website',
}

Exportieren Sie die Standardfunktion RootLayout({
  Kinder,
}: {
  Kinder: React.ReactNode
}) {
  zurückkehren (
    <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"
        </div>
      </div>
      <div className='flex justify-center'>
        <div className="fixed z-10 w-2/5">
          <Navigationsleiste />
        </div>
      </div>

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

Ich habe versucht, die Komponente {children} zu bearbeiten, aber nichts scheint zu funktionieren.

Answer 1

你尝试过使用 React.ReactNode[] 类型来输入 children 吗？