Tree Shaking Not Working in Production with Firebase SDK on Vercel

[GorvGoyl]

Page to Investigate

chatgptwriter.ai

Steps to Reproduce

I'm facing an issue with tree shaking in my production build. On my homepage, I avoid loading the Firebase Auth SDK to improve performance and page size, only loading it on the login and signup pages.

In development mode, this works perfectly—I can verify by searching the source code and seeing no trace of the Firebase SDK. However, once deployed to Vercel, the Firebase SDK is unexpectedly loaded on the homepage.

Here are the screenshots for reference:

• Localhost (Development Mode): No results found for 'firebase sdk': https://cln.sh/XYzRb4sf
• Vercel (Production Mode): Results found for 'firebase sdk'.: https://cln.sh/PWjpmYqj
  You can verify at https://chatgptwriter.ai
  Has anyone else experienced this issue or have any suggestions on how to resolve it?

[pawlean]

Hi @GorvGoyl!

Cool extension! 😄

Some Vercel-config suggestions:

• Verify that your Vercel project settings and environment variables are correctly set up for both development and production environments.
• Make sure your vercel.json configuration file is correctly set up and aligns with your requirements.
• Make sure your build command in Vercel matches your local production build command.
• Configure environment variables in Vercel’s dashboard to conditionally import Firebase only in development mode.
• Make sure that Vercel is not serving a cached version of your build by deploying a new version or using Vercel's cache management tools.

Keep us updated with how you get on!

[GorvGoyl]

I think it's due to prefetching routes. Prefetching gets enabled by default on prod.

https://www.builder.io/blog/prefetching-nextjs-visual-guide

[github-actions[bot]]

This discussion was automatically locked because the community moved to a new site. Please join us at vercel.community