React "Element type is invalid" error, but only on production, and only when I refresh

Support
1

My site ID: f38a0208-64bb-45bb-9f45-0443341054b3
My site page where the bug happened: https://tcgstats.io/ygo/match-register

I’m building an app with Remix and hosting it on netlify. Today, I encountered these errors:

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

and

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

and my app crashed.

I have no Idea why this happened because my app worked fine when I was developing on local. It only happens when I publish it to netlify.
Also, interestingly, everything works fine when I first load the page. It only happens when I reload the page, which is very unexpected behavior for me.

I know that this is an error normally caused by bad component imports, so I checked all my imports, but found nothing.

After some debugging, I found that it was related to a third-party library called [react-select].(GitHub - JedWatson/react-select: The Select Component for React.js)
(I just commented out all the instances of react-select and published it, and the error is gone.)
However, I still think this is a bug from netlify’s side because my app works fine on local, so I’m posting my question here.

I have no idea on how to solve this issue, so any help would be appreciated.

2

Update:

The error happens on the first load if you directly visit https://tcgstats.io/ygo/match-register.

The error does not happen when you go to https://tcgstats.io and then navigate to /ygo/match-register using . When you reload, you get the error.

So I guess the error is related to routing?

3

Update:

solved by changing to dynamic import with Suspense. Still don’t understand why though.