Ich habe eine Web-App, die mit Next.JS und Firebase erstellt und auf Vercel bereitgestellt wird. Alles funktionierte einwandfrei, bis ich vor kurzem eine untere Navigationsleiste hinzugefügt habe, deren Position auf statisch, unten:0, eingestellt war.

In der unteren Navigationsleiste rendere ich ein Symbol und einen Text. Während es in localhost einwandfrei geladen wurde (mit npm run dev), wurde mir klar, dass der Inhalt der unteren Navigation im für Vercel bereitgestellten Produktions-Build nicht gerendert werden konnte. In Produktionsbuilds wird nur der untere Navigationscontainer (oder Div) gerendert. Interne Inhalte (Symbole und Text) werden nicht gerendert.

Als ich mit den Chrome DevTools überprüft habe, wurde der fehlende interne Inhalt nicht unter „Elemente“ in der bereitgestellten Version angezeigt, wohl aber unter „Elemente“ auf localhost. Ich habe auch das React Components-Plugin mit den gleichen Ergebnissen ausprobiert.

Ist das häufig? Gibt es eine Lösung?

Unten ist ein Screenshot, der das Symbol und den Text zeigt (Zeilen 37 – 40)

Unten sehen Sie ein Bild der unteren Navigationsleiste, das den internen Inhalt auf localhost zeigt

Unten sehen Sie ein Bild der unteren Navigationsleiste, ohne den internen Inhalt der für Vercel bereitgestellten Produktionsversion