Storybook: Storybook 5 breaks with Emotion 9

[elliotdickison]

Describe the bug

I'm working on [email protected] components that use [email protected]. I recently upgraded to @storybook/[email protected], but when I boot it up I get the following runtime error:

Uncaught TypeError: Cannot read property 'length' of undefined
    at serializeStyles (main.3173126555acebfe0d1a.bundle.js:445)
    at css (vendors~main.ad7bd95803918bf0d539.bundle.js:643)
    at Module.keyframes (vendors~main.ad7bd95803918bf0d539.bundle.js:504)
    at Object../node_modules/@storybook/theming/dist/animation.js (vendors~main.ad7bd95803918bf0d539.bundle.js:7687)
    at __webpack_require__ (runtime~main.7b4918090cfe19b7778a.bundle.js:79)
    at Object../node_modules/@storybook/theming/dist/create.js (vendors~main.ad7bd95803918bf0d539.bundle.js:7845)
    at __webpack_require__ (runtime~main.7b4918090cfe19b7778a.bundle.js:79)
    at Object../node_modules/@storybook/theming/dist/index.js (vendors~main.ad7bd95803918bf0d539.bundle.js:8126)
    at __webpack_require__ (runtime~main.7b4918090cfe19b7778a.bundle.js:79)
    at Object../node_modules/@storybook/router/dist/visibility.js (vendors~main.ad7bd95803918bf0d539.bundle.js:7643)

I dug into it and it appears that this is due to the fact that storybook is pulling in @storybook/theming, which is in turn pulling in emotion 10, which does not play nice with emotion 9.

To Reproduce

Install Storybook 5 in a project that uses Emotion 9.

Expected behavior

I would expect to be able to drop components into Storybook without having to use the same css-in-js library/version as Storybook.

Additional context

Thanks for the great work on storybook!

[shilman]

@elliotdickison What addons are you using?

[elliotdickison]

No addons, @storybook/[email protected] is my only storybook dependency.

[shilman]

Storybook runs two separate webpacks: one for the "preview" (user code, running in an iframe) and a second for the "manager" (UI wrapping that iframe). AFAIK the preview has no dependency on emotion unless you happen to be using a buggy addon (which you're not). So this makes me think that simply running emotion 9/10 together in the same browser window, even if they are in different iframes, is causing an issue.

I could be wrong since I'm not an emotion expert (and since there are lots of moving parts). But if that's the case, what would you suggest we could do differently, short of not using emotion to theme our UI?

[elliotdickison]

That is good to know. It sounds like this is more likely an emotion issue. I'll close for now, thank you for the help!

[qoalu]

having this issue @elliotdickison , did you file an issue to emotion?

[elliotdickison]

I did not, I was never really able to get to the bottom of it. Our plan is to just upgrade to emotion 10 when we upgrade storybook since we’re using the framework-agnostic API that didn’t change between 9 and 10.