I have a web application built using Next.JS and Firebase and deployed on Vercel. Everything was working fine until recently when I added a bottom navigation bar with its position set to static, bottom:0.

In the bottom navigation bar, I'm rendering an icon and a text. While it loaded fine in localhost (using npm run dev), I realized that the content of the bottom navigation would not render in the production build deployed to Vercel. Only the bottom navigation container (or div) is rendered in production builds. Internal content (icons and text) will not be rendered.

When I checked using Chrome DevTools, the missing internal content did not show up under Elements in the deployed version, but it did show up under Elements on localhost. I also tried the React Components plugin with the same results.

Is this common? Is there a way to solve?

Below is a screenshot showing the icon and text (lines 37 - 40)

Below is an image of the bottom navigation bar showing the internal content on localhost

Below is an image of the bottom navigation bar, Not shown Internal content deployed to production version of Vercel