AFAIK Storybook has defined global type definitions for Emotion’s css prop which clash with Stitches’ css prop. A work around is to point the Emotion package at an empty types definition file. Here is a gist someone made of this: https://gist.github.com/sseagull/e2e7fe58f7f236897d342e776bb549a2

Perhaps this gist need to be referenced in an FAQ section of some sort as a lot of people encounter this.

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:

• we could delete the typing file as mentioned by @iambrennanwalsh

// .yarnclean
@storybook/theming/dist/ts3.9/_modules/@emotion-core-types-index.d.ts

• we could override the typing definition with an empty types definition file as mentioned by @hwhmeikle

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@storybook/theming": ["./types.d.ts"]
    }
  }
}

Thanks! Here’s what worked:

1. Create a .d.ts file in the root of your project, or wherever convienant. I used types.d.ts.

2. Add the following to your tsconfig.json.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@emotion/core": ["./types.d.ts"]
    }
  }
}

1. Restart your IDE.

For more detailed instructions, check out the gist hwhmeikle provided above.

Folks,

I updated my project to version 6.5.0-alpha.59 of the storybook and this problem was fixed

Can you see details here https://github.com/storybookjs/storybook/pull/17640

Thanks @ndelangen

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.

If you use yarn, an even easier way to fix this would be adding a .yarnclean in the root of your repo with just the line @emotion/core/types.

Closing since this issue is not originating from stitches

Confirming this mix of solutions from @drianoaz and @iambrennanwalsh solved the issue for me:

    "paths": {
      "@emotion/core": [
        "./types/index.d.ts"
      ],
      "@storybook/theming": [
        "./types/index.d.ts"
      ]
    }

I needed to ensure my file was existing and properly managed by my build config

@drianoaz - I haven’t use this in a while, but you’d need to use https://www.npmjs.com/package/patch-package I believe