Typescript Box conflicts with Material UI #1752
Replies: 13 comments 11 replies
-
|
We're experiencing the same issue. There's some discussion here: https://stackoverflow.com/questions/68692230/ts-expression-produces-a-union-type-that-is-too-complex-to-represent-with-materi As a temporary workaround we are using |
Beta Was this translation helpful? Give feedback.
-
|
We have the same issue also with the https://github.com/chakra-ui/chakra-ui |
Beta Was this translation helpful? Give feedback.
-
|
Then I would suspect that the |
Beta Was this translation helpful? Give feedback.
-
|
Could it be about some typings like the Box or BoxProps etc. defined in global scope rather than library scoped? |
Beta Was this translation helpful? Give feedback.
-
|
Or maybe it is not about |
Beta Was this translation helpful? Give feedback.
-
|
I think that's definitely the problem. How do we solve it? I can take a crack at a PR if I'm pointed in the right direction. |
Beta Was this translation helpful? Give feedback.
-
|
Hi, |
Beta Was this translation helpful? Give feedback.
-
|
I think I am seeing this issue as well. |
Beta Was this translation helpful? Give feedback.
-
|
I'm currently seeing this issues as well and the whole I managed to replicate the Here's what I ended up with: import { Box as MuiBox, BoxProps, Theme } from "@mui/material";
import { SystemProps } from "@mui/system";
export interface CustomBoxProps extends SystemProps<Theme> {
sx?: BoxProps["sx"];
children?: React.ReactNode;
id?: string;
}
export function Box(props: CustomBoxProps) {
return <MuiBox component="div" {...props} />;
}
export function Main(props: CustomBoxProps) {
return <MuiBox component="main" {...props} />;
}I didn't spend any real time on replicating the rest of normal HTML props like |
Beta Was this translation helpful? Give feedback.
-
|
Why was the issue converted to a discussion? It's clearly a typescript definition error within react-three-fiber (MUI and Chakra UI are both affected, but do not affect each other) which needs to be fixed. According to some internet searches it affects quite a lot of people as well (everyone who is using react-fiber with MUI or Chakra UI). The proposed workaround works, but is not suitable since it needs unnecessary rewrites in hundreds of places. |
Beta Was this translation helpful? Give feedback.
-
|
is a solution even possible? i don't know enough about MUI and TS but it seems that all we can do is declare our types, it doesn't seem like the problem is from fiber? or is it? |
Beta Was this translation helpful? Give feedback.
-
|
Hello @drcmda ! declare global {
namespace JSX {
interface IntrinsicElements extends ThreeElements {}
}
}This extension increases the allowed tags from 175 to 312 elements. When a component (like these ones from MUI, Chakra, etc.) allows developers to use any valid HTML tag from export interface OverridableComponent<M extends OverridableTypeMap> {
// If you make any changes to this interface, please make sure to update the
// `OverridableComponent` type in `mui-types/index.d.ts` as well.
// Also, there are types in Base UI that have a similar shape to this interface
// (e.g. SelectUnstyledType, OptionUnstyledType, etc.).
<C extends React.ElementType>(
props: {
/**
* The component used for the root node.
* Either a string to use a HTML element or a component.
*/
component: C;
} & OverrideProps<M, C>,
): JSX.Element | null;
(props: DefaultComponentProps<M>): JSX.Element | null;
}React.ElementType includes all IntrinsicElements. In MUIs example there, I've tried modifying our internal component library to use I don't know what the fix would be here. Is it according to best practises to extend the JSX intrinsic element list like this package is doing, should TypeScript change hos union types works (microsoft/TypeScript#53234), or should React provide a list of types for all valid HTML tags to be used in components like the ones MUI and Charka provides? |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for the very detailed explanation! I personally would be happy if React Three Fiber did not extend JSX but rather exposed a set of components that I can import and then use. I.e. instead of using All code is psudo so tweaking might be needed when we discuss the API, but if this sounds reasonable I'm happy to be included in the discussions. Note on hopes that the vscode team will solve it. My understanding is that this is inherently a difficult problem, as even 350 unions can become computationally heavy to resolve as each union might have its own set of unions, creating an exponential process to calculate the typing. In the example we see here, we got 2 highly complex packages competing for the same unions. I'm not expecting that to be an issue vscode will solve anytime soon. |
Beta Was this translation helpful? Give feedback.
-
|
The work-around with interface SomeViewComponentProps extends BoxProps { /* ... */ }
const SomeViewComponent = ({ /* ... ,*/ ...props}) => (
<Box {...props}>
{/* ... */}
</Box>
)Based on the hint in this post in combination with a hint in the above discussion, I've used patch-package to replace the cavalier global extension of declare global {
namespace JSX {
interface IntrinsicElements extends Pick<ThreeElements, 'ambientLight'/* | … */> {
}
}
}The patch looks like this and is easy to modify as needed: diff --git a/node_modules/@react-three/fiber/dist/declarations/src/three-types.d.ts b/node_modules/@react-three/fiber/dist/declarations/src/three-types.d.ts
index dadac00..31cff48 100644
--- a/node_modules/@react-three/fiber/dist/declarations/src/three-types.d.ts
+++ b/node_modules/@react-three/fiber/dist/declarations/src/three-types.d.ts
@@ -328,7 +328,7 @@ export interface ThreeElements {
}
declare global {
namespace JSX {
- interface IntrinsicElements extends ThreeElements {
+ interface IntrinsicElements extends Pick<ThreeElements, 'ambientLight'> {
}
}
}I would hope that it'd be possible to explicitly import the components instead of referencing them as natives, but AFAICS they don't actually exist. Neither have I found a way to generate them somehow. |
Beta Was this translation helpful? Give feedback.
-
|
What's the status on this issue? Edit: Are there any plans on fixing this issue? |
Beta Was this translation helpful? Give feedback.
-
|
Any progress/plans on fixing the issue? What's the priority? This is a major problem with project bases using mui or chakra. The quick fix is not a 100% solution. As if you perform unions within unions (example: mui sx prop), the issue will arise again eventually with enough sub-unions |
Beta Was this translation helpful? Give feedback.
-
|
Same issue all over our codebases. This is a massive issue for us and I am going to advise getting rid of the react-three-fiber implementation. |
Beta Was this translation helpful? Give feedback.
-
|
I'm encountering the same problem, What is the best solution please? |
Beta Was this translation helpful? Give feedback.
-
|
Also having this problem and it is shown in vs-code and browser disturbing us developing. I have a few genuine question on it.
vs code browser |
Beta Was this translation helpful? Give feedback.
-
|
Feel free to peruse the discussion above. The cause of the error is explained here, possible work-arounds are mentioned here and here. It's not an issue that could be "fixed" by the TS team AFAICS. |
Beta Was this translation helpful? Give feedback.
-
|
@hon2a Oh.. already mentioned above. |
Beta Was this translation helpful? Give feedback.
-
|
@hon2a Sorry but, is this error now being fixed by someone ? or any updates ? |
Beta Was this translation helpful? Give feedback.
-
|
Sorry, I'm not affiliated with this library in any way, I just got activity notification and responded at random. |
Beta Was this translation helpful? Give feedback.
-
|
I patched Joy's Box component, but now the Menu component is having the same problem 😭 |
Beta Was this translation helpful? Give feedback.
-
Hello,
When I install
@react-three/fiber, all my components that use@mui/material/Boxstart having the following error:Steps to reproduce:
npx create-react-app my-app --template typescriptpackage.jsonnpm installTypescript v4.4.4src. I name itThreeRenderer.tsx:App.tsxand add aBoxcomponent from@mui/material.Beta Was this translation helpful? Give feedback.
All reactions