Error when trying to use emotion, storybook doesn't display docs

[Codex-]

I'm currently trying to move a few things we have to use vite and it's going well so far except with the storybook side of things.

If you install the @emotion/react and @emotion/styled packages, mdx files no longer render.

The components render but when you try to load the docs you get presented with an error when trying to view the docs/mdx files:

DocsPage.js?v=5882c46e:45 Uncaught TypeError: Cannot read properties of undefined (reading 'content')
    at DocsPage.js?v=5882c46e:45:34
    at handleInterpolation2 (emotion-serialize.browser.esm.js:137:24)
    at serializeStyles4 (emotion-serialize.browser.esm.js:251:15)
    at emotion-styled-base.browser.esm.js:114:24
    at emotion-element-699e6908.browser.esm.js:35:12
    at renderWithHooks (react-dom.development.js:14985:18)
    at updateForwardRef (react-dom.development.js:17044:20)
    at beginWork (react-dom.development.js:19098:16)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:3945:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:16)

react-dom.development.js:20085 The above error occurred in the <Styled(div)> component:

    at http://localhost:61476/node_modules/.vite/@emotion_styled.js?v=5882c46e:1170:45
    at MDXProvider2 (http://localhost:61476/node_modules/.vite/chunk-2YJ4K74A.js?v=5882c46e:121:46)
    at ThemeProvider2
    at SourceContainer (http://localhost:61476/node_modules/@storybook/addon-docs/dist/esm/blocks/SourceContainer.js:97:23)
    at DocsContainer (http://localhost:61476/node_modules/@storybook/addon-docs/dist/esm/blocks/DocsContainer.js:47:22)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

POST http://localhost:61476/runtime-error 404 (Not Found)

I found that there were some hacky suggestions in #113 but these didn't help anyway 🤔 what is the 'correct' or expected way to allow the usage of emotion with storybook-builder-vite?

Minimum reproduction: https://github.com/Codex-/storybook-vite-react-emotion

Any help or advice is appreciated 😅

[Codex-]

Of course as soon as I post this I finally come across: #219 (comment)

Although with this minimum repro I get render was not supported :( ! which feels a bit spooky 🤔

[IanVS]

Hi, don't be scared by the render was not supported, it's just a fallback log that we print, but as far as I can tell it causes no problems. Although to be fair, I don't really know what render means in this context. I think it has something to do with the CSF3 render preset, but @shilman closed out his PR that would have handled it without merging (https://github.com/eirslett/storybook-builder-vite/pull/76/files#diff-16a70dcc26578a576303c7a3f4b25e73c9e22ff828dc65cd3860cb9b4c03ecd3R101), so I guess we don't need it.

[Codex-]

Great, thanks for the answer :)