Docs Broken for Stories Using Chakra UI/Emotion

[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.

Here is the stack trace

To Reproduce

Project here

System

Environment Info:

  System:
    OS: macOS 11.6
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 14.17.3 - /usr/local/bin/node
    npm: 6.14.13 - /usr/local/bin/npm
  Browsers:
    Chrome: 94.0.4606.71
    Safari: 15.0
  npmPackages:
    @storybook/addon-a11y: ^6.3.9 => 6.3.9 
    @storybook/addon-essentials: ^6.3.9 => 6.3.9 
    @storybook/addon-links: ^6.3.9 => 6.3.9 
    @storybook/react: ^6.3.9 => 6.3.9 
    @storybook/testing-react: 0.0.22 => 0.0.22 

Additional context

Please note I myself do not have any need for MDX (of course Storybook may need it internally).

[neilchaudhuri]

As I look into the issue more, I experimented with removing the Vite-related configuration from main.js.

The result is that the component doesn't render properly because Chakra UI, for reasons I can't discern, doesn't resolve the background color (called clickable in the theme file) properly. However, the Docs page does appear this time.

[neilchaudhuri]

I tried updating with@storybook/theming, but it didn't work. Reproduction repo updated to reflect changes that still cause the addon-docs to fail

[shilman]

have you tried this? https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#emotion11-quasi-compatibility

[neilchaudhuri]

Thanks for making me aware of this. I just tried, and it didn't help.

Now to be fair, I am using storybook-builder-vite, so I might need to do something in addition. I will keep tinkering.

[shilman]

@neilchaudhuri Indeed that possible (?!) workaround is only for webpack 🤦

[ndelangen]

I suspect this problem is solved in storybook 7.0 beta.

Please let me know if it doesn't and re-open this issue. 🙏