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

[theiliad]

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

To Reproduce
Steps to reproduce the behavior:

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

[shilman]

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.

[theiliad]

Working again, thanks 👍

[magicspon]

I'm seeing this issue.

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

cheers

[psabharwal123]

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?

[MarcNq]

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.

[immuzov]

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

[nullobject]

I'm seeing this issue too:

react 16.6.3
@storybook/react 4.0.7

[sievan]

I'm also seeing this issue

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

[ysgk]

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/[email protected]" has incorrect peer dependency "@emotion/[email protected]".

[igor-dv]

Linking the #4925 pr for reference.

[devictoribero]

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. :cry:

[diegopamio]

Any clue on how to overcome this? I'd gladly try to fix it, but I'm not certain if I would be able to do it.

[devictoribero]

@diegopamio I tried but I could not :cry:

[sievan]

@diegopamio Only fix I could find was to downgrade (as @ysgk mentioned) to:

• @emotion/core 0.13.1
• @emotion/styled 0.10.6

[MarcNq]

I think what should be done is upgrading Storybook's Emotion to last version, but I'm not sure how could that affect to people using prior versions of Emotion, or whether that is relevant for Storybook's authors. After all, retrocompatibility can be like being flatmates with an ex.

For the ones who are looking for a nice alternative:
I recommend using Fela instead of Emotion. It's a nice library that supports the same syntax as Emotion, and more. That obviously solves the issue.

[sievan]

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

[agutoli]

I just installed @emotion/core 0.13.1 and added a resolver at webpack to force use this version.

It's working for me.

module.exports = {
  plugins: [
    // your custom plugins
  ],
  module: {
    rules: [
      // add your custom rules.
    ],
  },
  resolve: {
    alias: {
      "emotion": path.resolve(__dirname, 'node_modules/@emotion')
    }
  }
};

node: v8.11.1
npm: 5.10.0
@storybook/addon-actions: 4.0.0
@storybook/addon-links: 4.0.0
@storybook/addons: 4.0.0
@storybook/react: 4.0.0

[slikts]

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

[slikts]

I fixed this for myself by downgrading to Storybook 3.

[farcaller]

That's not a "fix", it's a workaround at most. The issue needs to be addressed.

[igor-dv]

This issue is being addressed as mentioned in the previous comments.

[viczhuravlev]

I have:

"@emotion/core": "10.0.6",
"@emotion/styled": "10.0.6",
"react": "16.7.0",
"react-dom": "16.7.0"
"@storybook/react": "4.1.6",

And it's not working for me.

[shilman]

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.

[vjpr]

@shilman Any update on this?

[travi]

@vjpr i've been using emotion v10 successfully with the v5 alpha of storybook

[vjpr]

Just realized v5 alpha is out and it works for me. Should this issue be closed.

[shilman]

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!

[ahmadalfy]

Can confirm upgrading to storyboard 5.0.0-RC1 fixed it

[Rolandisimo]

Also, ran into an issue throwing Uncaught TypeError: Object(...) is not a function on a CRA2 build.
Nothing worked until I tried the 5.0.0-alpha version of @storybook/react.

Thanks! ❤️

[ahmadalfy]

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

[Rolandisimo]

Upgraded to 5.0.0-rc.1.
⚠️Works without addons.

@ahmadalfy Fails with any 4.x.x storybook/addon I've tried.
Reference issue: https://github.com/storybooks/storybook/issues/5645

[SebPez]

@viczhuravlev did you manage to fix it?

[SebPez]

I was able to use Storybook 4 and Emotion 10 ONLY when I installed with yarn instead of npm even with different node versions starting a 8.x.x.

     node v11.10.0
    "react": "^16.7.0",
    "react-dom": "^16.7.0"
    "gatsby": "^2.0.115",

    "@babel/core": "7.2.2",
    "babel-loader": "8.0.5",

    "@storybook/addon-actions": "^4.1.11",
    "@storybook/addon-info": "^4.1.11",
    "@storybook/addon-knobs": "^4.1.11",
    "@storybook/react": "4.1.11",

    "@emotion/core": "^10.0.7",
    "@emotion/styled": "^10.0.7",
    "emotion-normalize": "^10.0.0",

[Ziv-Barber]

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

[artemirq]

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

@ysgk Thanks, it's works with @storybook/react 4.0.9

[angelozehr]

Has anyone found out what caused the problem in the first place? I am running on the latest versions and still encounter this error

[shilman]

@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]

@angelozehr It is a regression. See https://github.com/storybooks/storybook/issues/6474

[lppedd]

Still happening on 5.2.1. A bit frustrating.
Edit: caused by another dependency importing React 15. Madness.

[shilman]

@lppedd Are you saying React15 support is broken in 5.2.1?

[lppedd]

@shilman apparently yes.

[shilman]

confirmed 😭

[shilman]

@ndelangen this is broken in cra-react15 and also on the now deployment, but since storyshots are enabled it apparently doesn't break the build. any ideas?

[shilman]

Closing this as a dupe to #8284