importing types from @storybook/react breaks emotion css prop types

[dominictwlee]

Describe the bug
For some odd reason, whenever types are imported from @storybook/react/types-6-0 or @storybook/react, the type definition for the css prop used in emotion will break and throw a Typescript error.

To Reproduce
Steps to reproduce the behavior:

In the provided sandbox repo:

1. Go to src/stories/Button.stories.tsx
   2.Uncomment import from @storybook/react
2. Open Button.tsx
3. The following error will show up

Type '({ size }: any) => SerializedStyles' is not assignable to type 'Interpolation'.
Type '({ size }: any) => SerializedStyles' is not assignable to type 'ObjectInterpolation'.
Index signature is missing in type '({ size }: any) => SerializedStyles'. TS2322

5. Comment out the import from @storybook/react
6. The errors disappear.

Expected behavior
the css prop should be able to take an array of functions that return SerializedStyles, without getting any Typescript error.

Screenshots
If applicable, add screenshots to help explain your problem.

Code snippets
Reproduce Repo

System
Environment Info:
System:
OS: Linux 5.8 Pop!_OS 20.10
CPU: (4) x64 Intel(R) Core(TM) i5-4590 CPU @ 3.30GHz
Binaries:
Node: 14.15.0 - ~/.nvm/versions/node/v14.15.0/bin/node
Yarn: 1.22.5 - /usr/bin/yarn
npm: 6.14.8 - ~/.nvm/versions/node/v14.15.0/bin/npm
Browsers:
Chrome: 87.0.4280.66
Firefox: 84.0
npmPackages:
@storybook/addon-actions: ^6.1.11 => 6.1.11
@storybook/addon-essentials: ^6.1.11 => 6.1.11
@storybook/addon-links: ^6.1.11 => 6.1.11
@storybook/node-logger: ^6.1.11 => 6.1.11
@storybook/preset-create-react-app: ^3.1.5 => 3.1.5
@storybook/react: ^6.1.11 => 6.1.11

[disintegrator]

If your project depends on emotion 11 AND storybook, you'll likely encounter a type conflict. This happens because the typescript compiler will, at a certain point, while compiling/type-checking your files, load @emotion/core as a transitive dependency via @storybook/theming, @storybook/addon-knobs, etc... (see yarn why @emotion/core). Now, @emotion/core declares a global type declaration for the css prop (see here). This declaration is incompatible when it encounters the css props in your codebase that rely on emotion 11's definition of that same prop. To overcome this conflict in the css prop type declaration you can create a stub module in your codebase called emotion-core-stub.ts:

// emotion-core-stub.ts
export {}

and in tsconfig.json

{
  "compilerOptions": {
    // ... all your existing compiler options here ...

    "paths": {
      "@emotion/core": ["./emotion-core-stub.ts"]
    }
  }
}

This will prevent the conflict introduced by having emotion 10 and 11 in your project's dependency tree.

[dominictwlee]

Thanks for the tip @disintegrator!

[praneetrohida]

@disintegrator unfortunately this workaround doesn't work in CRA, since it doesn't allow overriding paths in tsconfig

[jackokerman]

@disintegrator's stub breaks the docs plugin. I had to disable the docs plugin entirely by adding this to my .storybook/main.js file:

// .storybook/main.js

module.exports = {
  addons: [{
    name: '@storybook/addon-essentials',
    options: {
      docs: false,
    }
  }]
};

[AndreSilva1993]

If your project depends on emotion 11 AND storybook, you'll likely encounter a type conflict. This happens because the typescript compiler will, at a certain point, while compiling/type-checking your files, load @emotion/core as a transitive dependency via @storybook/theming, @storybook/addon-knobs, etc... (see yarn why @emotion/core). Now, @emotion/core declares a global type declaration for the css prop (see here). This declaration is incompatible when it encounters the css props in your codebase that rely on emotion 11's definition of that same prop. To overcome this conflict in the css prop type declaration you can create a stub module in your codebase called emotion-core-stub.ts:

// emotion-core-stub.ts
export {}

and in tsconfig.json

{
  "compilerOptions": {
    // ... all your existing compiler options here ...

    "paths": {
      "@emotion/core": ["./emotion-core-stub.ts"]
    }
  }
}

This will prevent the conflict introduced by having emotion 10 and 11 in your project's dependency tree.

If your project depends on emotion 11 AND storybook, you'll likely encounter a type conflict. This happens because the typescript compiler will, at a certain point, while compiling/type-checking your files, load @emotion/core as a transitive dependency via @storybook/theming, @storybook/addon-knobs, etc... (see yarn why @emotion/core). Now, @emotion/core declares a global type declaration for the css prop (see here). This declaration is incompatible when it encounters the css props in your codebase that rely on emotion 11's definition of that same prop. To overcome this conflict in the css prop type declaration you can create a stub module in your codebase called emotion-core-stub.ts:

// emotion-core-stub.ts
export {}

and in tsconfig.json

{
  "compilerOptions": {
    // ... all your existing compiler options here ...

    "paths": {
      "@emotion/core": ["./emotion-core-stub.ts"]
    }
  }
}

This will prevent the conflict introduced by having emotion 10 and 11 in your project's dependency tree.

Which TypeScript version are you using? Just tried your solution as I'm having exactly the same issue as you and I always get a TS error when type-checking the css prop.

[disintegrator]

Hey @AndreSilva1993, I'm on TypeScript 4.1.3.

[danguilherme]

Hi @disintegrator, I am having a very similar issue as the OP, but in our case we don't use Emotion 11.

yarn why @emotion/core

=> Found "@emotion/[email protected]"
info Reasons this module exists
   - "@storybook#theming" depends on it
   - Hoisted from "@storybook#theming#@emotion#core"
   - Hoisted from "@storybook#addon-viewport#@storybook#theming#@emotion#core"
   - Hoisted from "@storybook#addons#@storybook#theming#@emotion#core"
   - Hoisted from "@storybook#addon-backgrounds#@storybook#theming#@emotion#core"
   - Hoisted from "@storybook#react#@storybook#core#@storybook#theming#@emotion#core"
   - Hoisted from "@storybook#addon-docs#@storybook#core#@storybook#ui#@emotion#core"
   - Hoisted from "@storybook#react#@storybook#core#@storybook#ui#@emotion#core"
info Disk size without dependencies: "1.24MB"
info Disk size with unique dependencies: "2.4MB"
info Disk size with transitive dependencies: "22.84MB"
info Number of shared dependencies: 38

yarn why @emotion/react (Emotion 11)

error We couldn't find a match!

JSX.IntrinsicAttributes.css error

No overload matches this call.
  Overload 1 of 2, '(props: Omit<Omit<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<...>> & ... 18 more ... & BorderCollapseProps, never> & Partial<...>, "theme"> & { ...; } & { ...; }): ReactElement<...>', gave the following error.
    Type 'FlattenSimpleInterpolation' is not assignable to type 'InterpolationWithTheme<any>'.
      Type 'readonly SimpleInterpolation[]' is not assignable to type 'ObjectInterpolation<undefined>'.
        Types of property 'filter' are incompatible.
          Type '{ <S extends SimpleInterpolation>(predicate: (value: SimpleInterpolation, index: number, array: readonly SimpleInterpolation[]) => value is S, thisArg?: any): S[]; (predicate: (value: SimpleInterpolation, index: number, array: readonly SimpleInterpolation[]) => unknown, thisArg?: any): SimpleInterpolation[]; }' is not assignable to type 'string | string[] | undefined'.
            Type '{ <S extends SimpleInterpolation>(predicate: (value: SimpleInterpolation, index: number, array: readonly SimpleInterpolation[]) => value is S, thisArg?: any): S[]; (predicate: (value: SimpleInterpolation, index: number, array: readonly SimpleInterpolation[]) => unknown, thisArg?: any): SimpleInterpolation[]; }' is missing the following properties from type 'string[]': pop, push, concat, join, and 27 more.
  Overload 2 of 2, '(props: StyledComponentPropsWithAs<"div", DefaultTheme, LayoutProps & BackgroundProps<TLengthStyledSystem> & CursorProps & ... 14 more ... & BorderCollapseProps, never>): ReactElement<...>', gave the following error.
    Type 'FlattenSimpleInterpolation' is not assignable to type 'InterpolationWithTheme<any>'.

Your solution does fix the issue, but I believe there should be a better way to handle this.
Is there something else to take into account?

System

Environment Info:

  System:
    OS: macOS 11.3.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 12.14.1 - ~/.nvm/versions/node/v12.14.1/bin/node
    Yarn: 1.21.1 - /usr/local/bin/yarn
    npm: 6.13.4 - ~/.nvm/versions/node/v12.14.1/bin/npm
  Browsers:
    Chrome: 90.0.4430.212
    Safari: 14.1
  npmPackages:
    @storybook/addon-actions: ^6.1.1 => 6.1.11 
    @storybook/addon-backgrounds: ^6.1.21 => 6.1.21 
    @storybook/addon-docs: ^6.1.1 => 6.1.11 
    @storybook/addon-storysource: ^6.1.1 => 6.1.11 
    @storybook/addon-viewport: 6.1.1 => 6.1.1 
    @storybook/addons: ^6.1.15 => 6.1.15 
    @storybook/preset-typescript: ^3.0.0 => 3.0.0 
    @storybook/react: ^6.1.15 => 6.1.15 
    @storybook/source-loader: ^6.1.1 => 6.1.11

[csantos1113]

I don't use @emotion in my codebase, but I see @emotion/core is a dependency of @storybook/ui an @storybook/theming which makes sense.
But what does not make sense is to have css prop type being added to react interface (From here: https://github.com/emotion-js/emotion/blob/v10.0.1/packages/core/types/index.d.ts#L83-L99)

This is problematic when you use a different styled-library, because you'll get a Types of property 'css' are incompatible.

Question:
How can I ignore those types from my TS project?

Thanks

[mikestecker]

I'm seeing a similar issue. In my case, all I did was try to add a new addon using import { addParameters } from '@storybook/react'; in ./storybook/preview.js and started getting errors where I have a css prop for Styled Components.

[karrui]

This is also happening on a repo with ChakraUI and Storybook. the css prop is conflicting in many components.
Tried both Storybook v6.4 and v6.5 to no avail. This issue does not happen on v6.3.12.

[ndelangen]

In storybook 7.0 beta we've bundled in emotion, and this should remove the possibility for conflicts like this to happen.

Please let us know if this issue still exists in storybook 7.0 beta, if so please re-open.