storybook: Uncaught TypeError: Object(...) is not a function - @emotion

Describe the bug When updating @storybook/react to 4.0.7, we are receiving the following error:

To Reproduce Steps to reproduce the behavior:

Go to https://github.com/IBM/carbon-charts
Update @storybook/react version in packages/react/package.json to 4.0.7
Run npm install on the root folder of the repo
Run npm run storybook in packages/react

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 18
Comments: 45 (11 by maintainers)

Commits related to this issue

Import withStyles directly in components There was an issue where it caused storybook compilation issues. For more info: https://github.com/storybooks/storybook/issues/4796 — committed to conversation/ui by deleted user 6 years ago
fix: storybookのaddonを全て無効化 https://github.com/storybooks/storybook/issues/4796 — committed to masaki-koide/my-portfolio by masaki-koide 5 years ago

Most upvoted comments

I’m seeing this issue.

Using react 16.6.3, @storybook/react 4.0.9 and @emotion/core 10.0.0

cheers

magicspon on Nov 28, 2018

Support for Emotion 10 is part of Storybook 5.0, which hasn’t reached alpha yet. I’ll post here when it’s ready to try out – ETA next week.

shilman on Jan 10, 2019

This should not be closed; I’m using React 16.7 and getting the same error.

slikts on Dec 30, 2018

https://github.com/storybooks/storybook/blob/next/MIGRATION.md#react-163

Please upgrade to React 16.3+ and this problem should go away. We hope to re-introduce support for older versions of React in Storybook 4.1 coming soon.

shilman on Nov 16, 2018

I’m also seeing this issue

react 16.6.3 @storybook/react 4.0.7 @emotion/core 10.0.4

sievan on Dec 11, 2018

Also seeing this issue when trying to use emotion for my own components.

Using: React 16.3.2 + @storybook/react 4.0.2 React 16.6.3 + @storybook/react 4.0.2 React 16.6.3 + @storybook/react 4.0.9 And @emotion/core 10.0.0 in all cases.

MarcNq on Nov 29, 2018

confirmed 😭

shilman on Oct 1, 2019

Sorry, forgot to comment on this issue. v5 is in alpha on the next NPM tag. Here’s the latest alpha: https://github.com/storybooks/storybook/releases/tag/v5.0.0-alpha.8

Upgrade today to try it out. We’re hoping to progress to RC by next week!

shilman on Jan 23, 2019

@MarcNq This seems to be happening already 😄 https://github.com/storybooks/storybook/issues/4525

sievan on Dec 21, 2018

I have:

"@emotion/core": "^10.0.5",
"@emotion/styled": "^10.0.5",
"@storybook/react": "^4.1.1",
"react": "^16.5.1",
"react-dom": "^16.5.1"

And it’s not working either. 😢

devictoribero on Dec 15, 2018

I’m seeing this issue.

Using react 16.7.0-alpha.2, @storybook/4.1.0-alpha.10 and @emotion/core 10.0.1

cheers

UPD: same problem with: @storybook/4.1.0-alpha.11

aimuzov on Dec 6, 2018

@angelozehr the original problem was caused by a dependency on react 16.3+ that was introduced in storybook 4.0 due to emotion. Users trying to run older react projects in 4.0 ran into this error. However, in SB4.1 we split the “manager” (UI) and “preview” (user components) into two separate processes so that it was possible to use SB4.1 with older versions of React. Now in 5.0 it appears that the same error message has come back, possibly for a different underlying problem. To make things more difficult/confusing yarn appears to have some weird interactions with Storybook, so in some cases clearing your node_modules and yarn.lock fix some dependency-related problems. 😢

shilman on Apr 3, 2019

That’s not a “fix”, it’s a workaround at most. The issue needs to be addressed.

farcaller on Dec 30, 2018

i am using preact instead of react, what changes are required in preact to make this work (basically what is the specific change from old react to 16.3+), also should i open a new bug?

psabharwal123 on Nov 28, 2018

Linking the #4925 pr for reference.

igor-dv on Dec 12, 2018

Closing this as a dupe to #8284

shilman on Oct 14, 2019

To fix this remove all the ‘@emotion’ packages from package.json, remove node_modules and yarn.lock (or package json lock) and yarn install.

Ziv-Barber on Mar 4, 2019

@Rolandisimo better than using alpha you can use 5.0.0-RC1

ahmadalfy on Feb 18, 2019

I had the same problem.

react 16.6.3
@storybook/react 4.0.12
@storybook/addon-knobs 4.0.12
@emotion/core 10.0.4
@emotion/styled 10.0.4

After all, I downgraded emotion to 0.x.x and it’s working fine now.

@emotion/core 0.13.1
@emotion/styled 0.10.6

I should have taken the warning message 😅

warning "@storybook/addon-knobs > @emotion/styled > @emotion/styled-base@0.10.6" has incorrect peer dependency "@emotion/core@0.x.x".

ysgk on Dec 12, 2018