stitches component "Types of property 'css' are incompatible." error occurred when storybook is installed #897
Comments
ainize-bot
changed the title
ainize-bot
changed the title
|
I've encountered the same exact issue. Goes away when uninstalling Storybook. Here's all the relative code. import type {ElementType, ReactNode} from 'react'
import type {Css, VariantProps, ComponentProps} from '@/theme'
import type {PolymorphicPropsWithoutRef} from 'react-polymorphic-types'
import {styled} from '@/theme'
// Types
export type Props<
StitchesElement,
Element extends ElementType = 'div'
> = PolymorphicPropsWithoutRef<
{
children?: ReactNode
className?: string
css?: Css
} & VariantProps<StitchesElement> &
ComponentProps<StitchesElement>,
Element
>
export type Component<
T,
E extends ElementType = 'div',
P extends Props<T, E> = Props<T, E>
> = (props: P) => JSX.Element
export const Container = styled('div', {
margin: 'auto',
padding: '$3',
variants: {
size: {
'1': {maxWidth: '300px'},
'2': {maxWidth: '585px'},
'3': {maxWidth: '865px'}
}
}
})
export const PageContainer: Component<typeof Container> = props => {
return (
<Container as="div" size="1" {...props}>
Hello World
</Container>
)
}And here's the typescript errors im getting in VSCode. Also the following typescript error is popping up at: For your reference I will paste the contents of that file. import type * as React from 'react'
import type * as Util from './util'
export type IntrinsicElementsKeys = keyof JSX.IntrinsicElements;
/** Returns a new Styled Component. */
export interface StyledComponent<
Type = 'span',
Props = {},
Media = {},
CSS = {}
> extends React.ForwardRefExoticComponent<
Util.Assign<
Type extends IntrinsicElementsKeys | React.ComponentType<any>
? React.ComponentPropsWithRef<Type>
: never,
TransformProps<Props, Media> & { css?: CSS }
>
> {
(
props: Util.Assign<
Type extends IntrinsicElementsKeys | React.ComponentType<any>
? React.ComponentPropsWithRef<Type>
: {},
TransformProps<Props, Media> & {
as?: never,
css?: CSS
}
>
): React.ReactElement | null
<
C extends CSS,
As extends string | React.ComponentType<any> = Type extends string | React.ComponentType<any> ? Type : never
>(
props: Util.Assign<
React.ComponentPropsWithRef<As extends IntrinsicElementsKeys | React.ComponentType<any> ? As : never>,
TransformProps<Props, Media> & {
as?: As,
css?: {
[K in keyof C]: K extends keyof CSS ? CSS[K] : never
}
}
>
): React.ReactElement | null
className: string
selector: string
[$$StyledComponentType]: Type
[$$StyledComponentProps]: Props
[$$StyledComponentMedia]: Media
}
/** Returns a new CSS Component. */
export interface CssComponent<
Type = 'span',
Props = {},
Media = {},
CSS = {}
> {
(
props?:
& TransformProps<Props, Media>
& {
css?: CSS
}
& {
[name in number | string]: any
}
): string & {
className: string
selector: string
props: {}
}
className: string
selector: string
[$$StyledComponentType]: Type
[$$StyledComponentProps]: Props
[$$StyledComponentMedia]: Media
}
// ...OS: macOS |
|
AFAIK Storybook has defined global type definitions for Emotion's Perhaps this gist need to be referenced in an FAQ section of some sort as a lot of people encounter this. |
|
Thanks! Here's what worked:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@emotion/core": ["./types.d.ts"]
}
}
}
For more detailed instructions, check out the gist hwhmeikle provided above. |
|
If you use yarn, an even easier way to fix this would be adding a |
|
When adding x.d.ts in the project, do you guys get the error in the browser when doc page in storybook open? |
|
Guys, As of Storybook version 6.5.0-alpha.31, the solutions mentioned above no longer work. This is because this PR changed the way the storybook generates typing definitions and the Emotion typing is now built into the Storybook theming package.
So, there were two ways to solve the problem:
// tsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@storybook/theming": ["./types.d.ts"]
}
}
} |
|
Is there any way to make the typings compatible? |
|
@Andarist perhaps this is something you would have some advice on? |
|
@ndelangen the best fix here would be to upgrade Storybook to Emotion 11 because it no longer extends the global JSX namespace. As a workaround, I think it would be possible to copy over Emotion 10 types to Storybook and remove those global extensions. That way your If you'd like my help with any of those - you know when to find me 😉 |
|
if this is helpful for anyone, I "fixed" this by patching diff --git a/types/index.d.ts b/types/index.d.ts
index 9395e0133f283f158913080c7dace4e79444e82c..d6ae72e0c47a197cd8e50ab93dff94fc05b69b22 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -78,22 +78,3 @@ export interface ClassNamesProps<Theme> {
export function ClassNames<Theme = any>(
props: ClassNamesProps<Theme>
): ReactElement
-
-declare module 'react' {
- interface DOMAttributes<T> {
- css?: InterpolationWithTheme<any>
- }
-}
-
-declare global {
- namespace JSX {
- /**
- * Do we need to modify `LibraryManagedAttributes` too,
- * to make `className` props optional when `css` props is specified?
- */
-
- interface IntrinsicAttributes {
- css?: InterpolationWithTheme<any>
- }
- }
-}"resolutions": {
"@emotion/core@^10.1.1": "patch:@emotion/[email protected]#.yarn/patches/@emotion-core-npm-10.1.1-f084e0eeac",
} |
@csantos-nydig is there any way to use this using yarn classic? |
|
@drianoaz - I haven't use this in a while, but you'd need to use https://www.npmjs.com/package/patch-package I believe |
|
Confirming this mix of solutions from @drianoaz and @iambrennanwalsh solved the issue for me: I needed to ensure my file was existing and properly managed by my build config |
|
when: |
|
We're in the process of upgrading storybook to Emotion 11, and we have also removed the webpack alias, and removed the dependency on emotion from storybook in the storybook 6.4 alpha release. |
|
Folks, I updated my project to version Can you see details here storybookjs/storybook#17640 Thanks @ndelangen |
|
Closing since this issue is not originating from stitches |
Bug report
Describe the bug
SandBox Link
To Reproduce
I copied this Link to
src/components/Button.tsxfile.and enter
npx sb initcommand to terminal for install storybook. below packages are installed.@babel/core,@storybook/addon-actions,@storybook/addon-essentials,@storybook/addon-links,@storybook/reactthen, Button Component type error occurred.
for remove error, remove those packages from
devDependencies.Expected behavior
No Type Error.
Screenshots
System information
The text was updated successfully, but these errors were encountered: