Adding react-select to repository with theme-ui and Next.js results in broken styles for production website.

Are you reporting a bug or runtime error?

Bug - as in title. While in development mode on localhost this issue is not visible at all.

Reproduction and investigation

Repo to reproduce: https://github.com/pacxiu/react-select-bug

For reproducing issue locally (running production build) run yarn build && yarn start

Production deployment on vercel - https://react-select-bug.vercel.app/ (You could see that on initial load for couple msec website is looking correctly, after that body element is loosing it styles eg: background and font-size)

I think it could be somehow related to the fact that both react-select and theme-ui are using emotion-css underhood? However I’m not sure at all how it is caused.

Expected

Production build shouldn’t have broken CSS styles and match what we could see locally.

Screens:

Production build:

Local environment

@edit Another hint that I’ve fround - production seems okayish with 3.2.0 version of react-select.

[pacxiu]

@ebonow yeah, that was it, thanks for guiding!

[mattvb91]

@ebonow I appreciate the response. I have spent the last 2 hours putting a minimum reproduction example together and everything was working fine in that along with all client loading pages.

Turns out that as soon as I added a component from this lib @react-google-maps/api then the css started breaking again for react-select on client loaded pages… Turns out this comment: https://github.com/JustFly1984/react-google-maps-api/issues/1361#issuecomment-762813572 is what helped me fix it.

Im assuming something in that library hooks into an event listener and then blocks the css from loading.

I apologise for assuming its this lib that is causing the issues but i was absolutely out of my depth with this issue (and i still am) as i dont know enough of the react depths to understand how another component can cause this.