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" ... \>

[Methuselah96]

Just for cross-referencing, I filed mui/material-ui#34068 in the MUI repo with more of an explanation of what's going on.

[zigang93]

I am using @react-three/drei, @react-three/fiber and mui packages..
It seem like each packages have their Box element.. it cause conflict on each other..

References:
mui/material-ui#34068
pmndrs/react-three-fiber#1752 (reply in thread)

[CodyJasonBennett]

This was fixed in R3F v8.17.8.

[Methuselah96]

I could be wrong, but I think this issue was slightly different, and was fixed on the MUI side by mui/material-ui#43384