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: https://github.com/pmndrs/drei/issues/704#issuecomment-1050199077_

[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: https://github.com/microsoft/TypeScript/issues/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 https://github.com/mui/material-ui/issues/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: https://github.com/mui/material-ui/issues/34068 https://github.com/pmndrs/react-three-fiber/discussions/1752#discussioncomment-5602430