ModalOverlayProps typescript error
See original GitHub issue🐛 Bug report
ModalOverlayProps
interface throws an error with Typescript 4.1.3
TS2320: Interface 'ModalOverlayProps' cannot simultaneously extend types 'Pick<HTMLMotionProps<"div">, "slot" | "style" | "title" | "animate" | "children" | "inherit" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | ... 286 more ... | "onViewportBoxUpdate">' and 'Pick<ChakraProps, "p" | "filter" | "color" | "css" | "m" | "margin" | "mt" | "marginBlockStart" | "marginTop" | "mr" | "marginInlineEnd" | "marginEnd" | "me" | "marginRight" | ... 306 more ... | "sx">'.
Named property 'css' of types 'Pick<HTMLMotionProps<"div">, "slot" | "style" | "title" | "animate" | "children" | "inherit" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | ... 286 more ... | "onViewportBoxUpdate">' and 'Pick<ChakraProps, "p" | "filter" | "color" | "css" | "m" | "margin" | "mt" | "marginBlockStart" | "marginTop" | "mr" | "marginInlineEnd" | "marginEnd" | "me" | "marginRight" | ... 306 more ... | "sx">' are not identical.
🧭 Possible Solution
Adding css
in the Omit arguments solves the issue for me, but I’m not sure if it’s the appropriate way to solve this problem or if it has unintended side-effects.
export interface ModalOverlayProps extends Omit<HTMLMotionProps<"div">, "color" | "css">, Omit<ChakraProps, "transition"> {
children?: React.ReactNode;
}
🌍 System information
Software | Version(s) |
---|---|
Chakra UI | 1.1.1 |
Typescript | 4.1.3 |
Issue Analytics
- State:
- Created 3 years ago
- Reactions:8
- Comments:15 (3 by maintainers)
Top Results From Across the Web
Semantic-ui-react modal not working, typescript errors
I get a Typescript error for Modal: Left side of comma operator is unused and has no side effects.ts. What is wrong with...
Read more >TypeScript error while bulding project - Forge Custom UI and ...
Hi there, when i try run forge tunnel or try to deploy my project I am getting error: Error: TypeScript errors in the...
Read more >react-frontend-lib - npm
TypeScript icon, indicating that this package has built-in type declarations ... Error /* Placeholder error props */ /> <Input.
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
This is not resolved for the latest of
@chakra-ui/modal@1.9.2
andframer-motion@4.1.17
, but you only see it if you have"skipLibCheck": false
in your tsconfig. I have temporarily skipped that check, but that’s not a good long-term fix. As noted above, just adding| "css"
to the omit list resolves the error, but I’d want a maintainer to make sure that is the correct way to solve this (as opposed to changing the other source of CSS to be compatible instead).Note: the specific error has changed from the OP:
Oh, it’s not possible to provide a CodeSandbox because latest
typescript
version a CSB can use in the workspace is4.1.2
🙃