FontAwesome Icons Missing in Production

[forest dust]

I'm using @fortawesome/free-solid-svg-icons across my app. But recently, 3 icons, of many are missing, but only on certain pages.

For example, the faClock icon shows on my landing page, but is gone on my /home page. I notice that in the network tab, these specific missing icons are coming down in network calls as empty js. While other ones that are showing do not have a corresponding network call. - I can't share screenshots 😦

Does anyone have any ideas on how I could start to debug this? The problem is I'm not sure where to start because

• It doesn't happen locally
• Other fontawesome icons are showing
• The missng icons are fine on other screens/routes
• They're imported the same way other icons are. e.g import { faClock } from '@fortawesome/free-solid-svg-icons/faClock'

Update - If I don't use the treeshakable import, it's fixed. However, I am using the treeshakable imports for icons all over the place with no problem 🤔

[forest dust]

I found an actual solution (can still tree shake) and the cause of the issue: https://github.com/vitejs/vite-plugin-react/issues/32#issuecomment-1397135250

TLDR, In production, if you import a font-awesome icon with a treeshakeable import in multiple files, it will disappear once the second import is called. -- i.e. just import/export from 1 file.