Using emotion 9 and 10 in the same window

[paul-sachs]

• emotion version: 9.2.12 AND 10.0.10
• react version: 16.8.6

What you did:

Trying to use an emotion 9 lib within storybook v5.

What happened:

Error is thrown on load:

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)

See for a little additional detail:

storybookjs/storybook#6337

Expectation:

Two different webpacks (one with 10.x and one for 9) should behave properly on the same window.

[FezVrasta]

Would you be able to provide a reproducible example? Possibly on CodeSandbox

[paul-sachs]

I'll try to make up an example repo. Unfortunately code sandbox doesn't support storybook.

…

On Wed, May 15, 2019 at 6:26 AM Federico Zivolo ***@***.***> wrote: Would you be able to provide a reproducible example? Possibly on CodeSandbox — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#1347?email_source=notifications&email_token=ACXLLAGBAXZJJLMQEAZBPZDPVPQMJA5CNFSM4HM5ZWPKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODVOHIFI#issuecomment-492598293>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACXLLAHV6KFNKHFAGCX3IHDPVPQMJANCNFSM4HM5ZWPA> .

[FezVrasta]

You should be able to use CodeSanbox Containers:
https://hackernoon.com/codesandbox-containers-5864a8f26715

I also found this CodeSandbox that runs Storybook:
https://codesandbox.io/s/github/libetl/storybook-to-codesandbox-test

[paul-sachs]

Oh cool. I found an issue for adding support for storybook to codesandbox so I stopped there. I'll give it a shot.

…

On Wed, May 15, 2019 at 7:57 AM Federico Zivolo ***@***.***> wrote: You should be able to use CodeSanbox Containers: https://hackernoon.com/codesandbox-containers-5864a8f26715 I also found this CodeSandbox that runs Storybook: https://codesandbox.io/s/github/libetl/storybook-to-codesandbox-test — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#1347?email_source=notifications&email_token=ACXLLACUFFP2GNYEHBF3UD3PVP3BLA5CNFSM4HM5ZWPKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODVONQSI#issuecomment-492623945>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACXLLAAID6YLKXD3XAF4YK3PVP3BLANCNFSM4HM5ZWPA> .

[IsenrichO]

I ran into a similar issue recently. Are you using yarn workspaces too by chance?

[paul-sachs]

Yep

…

On Wed, May 15, 2019 at 6:34 PM Oliver Isenrich ***@***.***> wrote: I ran into a similar issue recently. Are you using yarn workspaces too by chance? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#1347?email_source=notifications&email_token=ACXLLAGSRJIGUUALYC3QFWDPVSFX5A5CNFSM4HM5ZWPKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODVQEO4A#issuecomment-492849008>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACXLLAGAPTAQL65PR5ZFPGLPVSFX5ANCNFSM4HM5ZWPA> .

[IsenrichO]

Workspaces hoists your dependencies and then leads to an issue because of different major versions of emotion. I had to upgrade to emotion v10 and storybook v5 together unfortunately. Would also be curious if there's a better approach though.

[qoalu]

Not using workspaces and having the issue as well.
We decided to move to styled-components instead in our project (same api, no conflicts)

[Andarist]

Closing this because we have not received enough information for a long time to be able to look at this.