ビルドされた Next.js アプリはロード後に突然消えますが、開発環境では正常に動作します
P粉668113768
2023-08-15 15:51:16
<p>typescript を使用した next.js プロジェクトは開発環境では正常に動作しますが、<code>npm run build</code> をビルドすると、読み込み後にページが消えてしまいます。これはページのレイアウトに関係があると思いますが、わかりません。コンソールに以下の情報が表示されました。 </p>
<p> キャッチされないエラー: 縮小された React エラー #418; 完全なメッセージについては、https://reactjs.org/docs/error-decoder.html?invariant=418 にアクセスしてください。または、完全なエラーと、縮小されていない開発環境。
キャッチされないエラー: 縮小された React エラー #423; 完全なメッセージについては、https://reactjs.org/docs/error-decoder.html?invariant=423 にアクセスしてください。縮小されていない開発の場合は、完全なエラーとその他の役立つ警告環境をご覧ください。
DOMException: 'Node' での 'appendChild' の実行に失敗しました: ドキュメント上で許可される要素は 1 つだけです。
DOMException: 'Node' の 'removeChild' が失敗しました: '削除されるノードは、このノードの子ではありません。'</p>
<p><strong>layout.tsx</strong></p>
<pre class="brush:php;toolbar:false;">インポート './globals.css'
タイプ { メタデータ } を「次」からインポートします
// 'next/font/google' から { Inter } をインポートします
「../components/Navbar」から Navbar をインポートします
「next/image」から画像をインポート
// const inter = Inter({ subsets: ['latin'] })
const メタデータのエクスポート: メタデータ = {
タイトル: 「編集済み」、
説明: '個人ウェブサイト',
}
デフォルト関数をエクスポート RootLayout({
子供たち、
}: {
子: React.ReactNode
}) {
戻る (
<div className="相対">
<div className="-z-1 bg-night 絶対インセット-0">
<div className="固定 w-screen h-screen pointer-events-none bg-scroll">
<画像 src="/bg-circle.png" alt={''} レイアウト="fill" objectFit="cover" />
</div>
</div>
<div className='flex justify-center'>
<div className="固定 z-10 w-2/5"""
<ナビゲーションバー />
</div>
</div>
<div className="相対 z-0">{children}</div>
</div>
)
}</pre>
<p>{children} コンポーネントを編集しようとしましたが、何も機能しないようです。 </p>
React.ReactNode[]
型を使用して子の入力を試してみましたか?