Installing Emotion 11 breaks storybook-builder-vite

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.

[joshwooding]

@dantman You should be able to use this solution: https://github.com/storybookjs/storybook/issues/16716#issuecomment-1020613602

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: https://github.com/storybookjs/storybook/pull/17000