Addon-docs broken with emotion11

[neilchaudhuri]

Describe the bug

I am building components using Chakra UI, which uses Emotion. When I navigate to the docs tab, it's blank and breaks all stories after you go there. This means once I encounter the error, Storybook is done until you reload (and not a Docs page of course).

To Reproduce

Use this repo to run Storybook and reproduce

System

Environment Info:

  System:
    OS: macOS 12.0.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 16.12.0 - ~/.nvm/versions/node/v16.12.0/bin/node
    npm: 8.1.0 - ~/.nvm/versions/node/v16.12.0/bin/npm
  Browsers:
    Chrome: 96.0.4664.45
    Safari: 15.1
  npmPackages:
    @storybook/addon-a11y: ^6.3.12 => 6.3.12 
    @storybook/addon-essentials: ^6.3.12 => 6.3.12 
    @storybook/addon-links: ^6.3.12 => 6.3.12 
    @storybook/addons: ^6.3.12 => 6.3.12 
    @storybook/react: ^6.3.12 => 6.3.12 
    @storybook/testing-react: 0.0.22 => 0.0.22 
    @storybook/theming: ^6.3.12 => 6.3.12 

Additional context

Please let me know if I can provide more information.

[devzeebo]

#7577 (comment)

describes this issue, and eventually concluded that it is caused by two versions of @emotion/styled being installed. Upgrading the @emotion/styled dependency in @storybook/theming (storybook/lib/theming/package.json) should fix the issue for people using emotion v11, but will likely break for users using emotion v10.

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[trescenzi]

I had this issue as well. Was stumped and then checked out chakra-ui's storybook config and their solution seems to have worked for me. Their main.js aliases @emotion/core and @emotion/theming both to @emotion/react. My main.js now looks like this and everything works

const path = require('path');

module.exports = {
  webpackFinal: async (config) => {
    // the emotion aliases ensure that only one context is loaded, without it the `useTheme` hook breaks
    // in storybook
    config.resolve.alias = {
      ...(config.resolve.alias ?? {}),
      '@emotion/react': path.resolve('../../node_modules/@emotion/react'),
      '@emotion/styled': path.resolve('../../node_modules/@emotion/styled'),
      '@emotion/core': path.resolve('../../node_modules/@emotion/react'),
      'emotion-theming': path.resolve('../../node_modules/@emotion/react'),
    };

    return config;
  },
}

[devzeebo]

storybookjs/builder-vite#219 links to:

https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#emotion11-quasi-compatibility

which mentions the

module.exports = {
  features: {
    emotionAlias: false,
  },
};

Which resolves Emotion 11 problem for me (using MUI 5) without the manual webpack aliasing.

[shilman]

FYI we're working on a fix for this, hopefully available in the next few days

[shilman]

Olé!! 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.