Installing Emotion 11 breaks storybook-builder-vite

[dantman]

Trying to use storybook-builder-vite as the builder when you have Emotion 11 installed breaks docs pages with an Uncaught TypeError: Cannot read properties of undefined (reading 'content') in one of the MDX/docs pages' <Styled(div)> elements because the Emotion theme is empty.

Reproduction

1. npx sb init --type react - Initialize storybook
2. npm install react react-dom storybook-builder-vite - Add React and storybook-builder-vite
3. Add core: { builder: 'storybook-builder-vite' } to configure storybook-builder-vite
4. npm run storybook - The Introduction page in Storybook works now
5. npm install @emotion/react @emotion/styled - Install Emotion 11
6. npm run storybook - The Introduction page is now broken

More information

Lots of projects have upgraded to Emotion v11. This includes libraries like MUI, where it's not possible to just downgrade back to Emotion v10.

Storybook is currently running Emotion v10. However running the normal Webpack4 builder docs pages still work, even when running with features.emotionAlias: false, to ensure that the project's own Emotion v11 theme provider works.

[IanVS]

I don't know much about emotion, but is #210 helpful for you at all?

[dantman]

No, that's unrelated. That's about transpiling the css`` API for projects.

This is about the Styled API which doesn't require Babel transforms and Storybook's own docs code breaking.

[dantman]

Storybook's Webpack4 builder had aliases in it that forced things to use Emotion v10, which broke Emotion v11 projects because Storybook Emotion v10 theme was used instead of the project's Emotion and the project's own theme was not used. features.emotionAlias: false, was added to disable the aliases and allow the themes to work.

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

It's worth noting that even when running features.emotionAlias: false, which disables the aliases and allows a project's Emotion v11 theme to work. The Webpack4 builder will work. But if you turn on the Vite builder in the same project the docs pages then break.

Looks like there are a few issues for this in the Storybook repo, but this is is ultimately a storybook-builder-vite issue since Storybook's own Webpack builders work fine even when all the emotion specific hacks are removed:

• Addon-docs broken with emotion11 storybook#16716
• Docs Broken for Stories Using Chakra UI/Emotion  storybook#16252
• Using Emotion seems to break MDX storybook#15390

[joshwooding]

@dantman Thanks for providing a reproduction! This had been mentioned previously but we didn't have a reproduction to use 🚀

[dantman]

Great!

I should note, for a proper fix it should also be possible to follow the MUI installation steps, add a story for the MUI button, add a decorator with a theme provider for a custom theme with a different primary color, and see that primary color on the button story.

It's possible to fix the docs page by introducing the same "force everything to use storybook theming's version of emotion" alias that Storybook originally had. i.e. There primary color would not show in examples.

But that would just break canvas pages instead effectively trading the Vite specific bug for recreating the bug Storybook used to have.

[joshwooding]

@dantman You should be able to use this solution: storybookjs/storybook#16716 (comment)

I've tested it locally and it works, all you need to to is use the viteFinal setup instead.

  async viteFinal(config) {
    config.resolve.alias = {
        ...config.resolve.alias,
      '@emotion/react': path.resolve(path.join(__dirname, '../node_modules/@emotion/react')),
      '@emotion/styled': path.resolve(path.join(__dirname,'../node_modules/@emotion/styled')),
      '@emotion/core':path.resolve(path.join(__dirname, '../node_modules/@emotion/react')),
      'emotion-theming': path.resolve(path.join(__dirname, '../node_modules/@emotion/react')),
    }
    return config;
  },

[IanVS]

It looks like storybook is also working on improving their compatibility with emotion 11: storybookjs/storybook#17000