Storybook 6.1.0-rc.4 & Emotion 11.0 support

[glomotion]

Describe the bug When you upgrade emotion (@emotion/css) to version 11.0 - storybook seems to build successfully, but on every single set of stories, simply renders this error screen:

To Reproduce

1. Init a basic storybook
2. Install @emotion/css and @emotion/babel-plugin
3. setup a basic component which uses { css } from @emotion/css
4. do npm run build-storybook
5. See error:

css is not defined
ReferenceError: css is not defined
    ...

Code snippets

//./storybook/main.js
module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-knobs',
  ],
  typescript: { reactDocgen: 'react-docgen' },
};

System

$ npx sb@next info

Environment Info:

  System:
    OS: macOS 10.15.7
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 14.15.1 - ~/.nvm/versions/node/v14.15.1/bin/node
    Yarn: 1.19.0 - /usr/local/bin/yarn
    npm: 6.14.8 - ~/.nvm/versions/node/v14.15.1/bin/npm
  Browsers:
    Chrome: 86.0.4240.198
    Edge: 86.0.622.69
    Firefox: 82.0.3
    Safari: 14.0.1
  npmPackages:
    @storybook/addon-actions: ^6.1.0-rc.4 => 6.1.0-rc.4 
    @storybook/addon-essentials: ^6.1.0-rc.4 => 6.1.0-rc.4 
    @storybook/addon-knobs: ^6.1.0-rc.4 => 6.1.0-rc.4 
    @storybook/addon-links: ^6.1.0-rc.4 => 6.1.0-rc.4 
    @storybook/react: ^6.1.0-rc.4 => 6.1.0-rc.4 

[griffithstek]

Switching to @storybook/theming did the trick for me. So my preview.js looks like this:

import { ThemeProvider } from "@storybook/theming"
import theme from "../src/theme"

export const decorators = [
  (Story) => (
    <ThemeProvider theme={theme}>
      <Story />
    </ThemeProvider>
  ),
];

[shilman]

FYI we are working on a proper fix for this--not a workaround--hopefully arriving in the next few days.

[Domiii]

rocket emoji

[Grimones]

Hi guys. Not sure if this issue is related to this but at least it's about emotion and storybook. If it will make sense I'll open a new issue.

The issue is happening when you are using emition@11 alongside with storybook. When you define a theme shape in emotion.d.ts to have proper typings of theme in different places (css props, styled component, etc) when an import of storybook appears in stories file then typing breaks for css props (haven't checked that in other theme usecases).

We are using in project nx and it has some additional configuration of how files are compiled and it leads to breaking theme typing even if storybook imports appears in differrent file.

Here is a repo with reproduction You don't need to run anything just make sure that you do yarn to install deps.

In apps/test/src/app/app.tsx we expect this to be

If there is any import storybook in *.stories.* files theme typing changes to this

After fun hours of debugging I found out that issue happens because emotion@10 used in storybook/theming in file node_modules/@emotion/core/types/index.d.ts. If you comment out line 84 and 96 (css?: InterpolationWithTheme<any>) it's starts to work.

Here is also a minimal repro in codesandbox But due to limitation of configuration (not having babelrc and time to wire some create-react-app config changes) I'm using jsx pragma to enable css prop functionality and issues happens only if storybook import happens in the same file also causing issue in other files.

I'm not sure what possible solutions could be, like enforcing types from emotion 11, I'll appreciate any suggestions on how it could be hotfixed. Casting css={(theme: Theme) => ...} works in this minimal reproduction but for some reason it's not working in real codebase.

I'm feeling that issue lies in storybook land as it seems to be only one proper way is to bump emotion version in storybook packages to fix those type conflicts. Unless I'm missing something.

Update: After more digging found more related issues in emotion repo https://github.com/emotion-js/emotion/issues/1257 https://github.com/emotion-js/emotion/issues/1800

Fix is in emotion@11 but there are some suggestion on hotfixing storybook with emotion@10

[shilman]

Hurrah!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.5.0-alpha.31 containing PR #17000 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

[flo-sch]

I just tried with v6.5.0-alpha.32, using the following .storybook/main.js config:

module.exports = {
  framework: '@storybook/react',
  core: {
    builder: 'webpack5',
  },
  features: {
    emotionAlias: false,
  },
  addons: [
    // ...
  ]
};

And I can confirm that I can successfully:

• render emotion v11 components (in my case, theme-ui components)
• write a global decorator rendering a custom <ThemeProvider />

Very great improvement @shilman @ndelangen, thanks a lot guys 🙌

[Furizaa]

@storybook/theming@v6.5.0-alpha.38 still has a built in emotion@^10 dependency.

[flo-sch]

Yes, if I follow the thread, I think migrating to @emotion v11 is still a BC breaking change and cannot be achieved in Storybook v6.

That fix though should solve conflict problems between the emotion version used by Storybook and the one used by your own UI library :)

[matheusslg]

Hey guys, I was facing the same problem and I tried so many things that I didn't remember how much time I've spent to fix this, and finally, I figured out how to build Storybook + Emotion 11 properly. Before we continue, I just want to say that I'm working on a shared lib component with Emotion 11 + Storybook + JEST + Babel.

First I updated the Storybook version to the pre-release as @shilman told above:

npx sb upgrade --prerelease

Here is my package.json after the upgrade:

    "@storybook/addon-a11y": "^6.5.0-alpha.41",
    "@storybook/addon-actions": "^6.5.0-alpha.41",
    "@storybook/addon-docs": "^6.5.0-alpha.41",
    "@storybook/addon-essentials": "^6.5.0-alpha.41",
    "@storybook/addon-links": "^6.5.0-alpha.41",
    "@storybook/addon-storyshots": "^6.5.0-alpha.41",
    "@storybook/addon-storysource": "^6.5.0-alpha.41",
    "@storybook/addons": "^6.5.0-alpha.41",
    "@storybook/node-logger": "^6.5.0-alpha.41",
    "@storybook/react": "^6.5.0-alpha.41",
    "@storybook/testing-react": "^1.2.3",
    "@storybook/theming": "^6.5.0-alpha.41",

I also have these peerDependencies:

  "peerDependencies": {
    "@emotion/react": "^11.5.0",
    "@emotion/styled": "^11.3.0",
    "@types/react": "^16.8.6 || ^17.0.0",
    "react": "^17.0.0",
    "react-dom": "^17.0.0"
  },

After that, I changed my storybook config to look like this:

.storybook/main.js

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|mdx|tsx)'],
  framework: '@storybook/react',
  core: {
    builder: 'webpack4',
    channelOptions: { allowFunction: false, maxDepth: 10 }
  },
  features: {
    emotionAlias: false
  },
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-a11y',
    '@storybook/addon-storysource',
    { name: '@storybook/addon-docs', options: { configureJSX: true } },
    '@storybook/addon-controls'
  ],
  webpackFinal: async config => {
    // React preset + Emotion props
    config.module.rules[0].use[0].options.presets = [
      require.resolve('@babel/preset-react'),
      require.resolve('@babel/preset-env'),
      require.resolve('@emotion/babel-preset-css-prop')
    ];

    return config;
  }
};

Hope this helps you guys!