Using Box from MUI cause error

[dspaethe]

After adding the component "drei" to my existing project, every occurrence of Box from Material UI (mui.com) produce this error:
Expression produces a union type that is too complex to represent. TS2590

Adding this completely redundant property to every single Box in the whole project solve it somehow:
component='div'
https://stackoverflow.com/questions/68692230
But this workaround is very ugly.

Similar issue reported here:
#704 (comment)_

[mracette]

Same thing here. This is not great for MUI users.

[gsimone]

Do you have an idea of what's causing this problem? From the stack overflow it looks like removing some random d files "solves it", but it's not clear to me why those specific files would be a problem.

I don't get why ts would fail to correctly guess the type of Box since both would be imported and not parts of global namespace overrides 🤔

@joshuaellis @CodyJasonBennett ideas?

[CodyJasonBennett]

This pretty clearly sounds like a larger issue with TypeScript although I'd be interested in potential workarounds regarding the Box component.

[mracette]

Some insight into why TS produces this error can be found here: microsoft/TypeScript#33130

[reggie3]

I've seen this issue in projects that don't use drei. I was able to solve it by specifying the component prop of MUI Box components as div like this

<Box component="div" ... \>