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

theiliad · 2018-11-15T22:18:45Z

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

The text was updated successfully, but these errors were encountered:

shilman · 2018-11-16T08:46:16Z

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 · 2018-11-16T16:04:15Z

Working again, thanks 👍

magicspon · 2018-11-28T16:35:31Z

I'm seeing this issue.

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

cheers

psabharwal123 · 2018-11-28T21:20:44Z

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 · 2018-11-29T13:22:34Z

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.

aimuzov · 2018-12-04T05:36:28Z

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 · 2018-12-07T03:54:01Z

I'm seeing this issue too:

react 16.6.3
@storybook/react 4.0.7

There was an issue where it caused storybook compilation issues. For more info: storybookjs/storybook#4796

sievan · 2018-12-11T16:27:01Z

I'm also seeing this issue

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

ysgk · 2018-12-12T07:53:10Z

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".

igor-dv · 2018-12-12T09:15:02Z

Linking the #4925 pr for reference.

devictoribero · 2018-12-15T11:37:34Z

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. 😢

diegopamio · 2018-12-19T20:58:01Z

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 · 2018-12-20T09:40:08Z

@diegopamio I tried but I could not 😢

sievan · 2018-12-20T15:46:23Z

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

@emotion/core 0.13.1
@emotion/styled 0.10.6

MarcNq · 2018-12-20T16:11:21Z

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 · 2018-12-21T15:00:46Z

@MarcNq This seems to be happening already 😄 #4525

agutoli · 2018-12-21T15:18:02Z

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 · 2018-12-30T11:04:06Z

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

slikts · 2018-12-30T11:14:03Z

I fixed this for myself by downgrading to Storybook 3.

farcaller · 2018-12-30T11:51:53Z

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

igor-dv · 2018-12-31T17:03:45Z

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

vjpr · 2019-01-22T22:15:20Z

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

shilman · 2019-01-23T12:48:46Z

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 · 2019-02-18T09:43:44Z

Can confirm upgrading to storyboard 5.0.0-RC1 fixed it

Rolandisimo · 2019-02-18T10:17:48Z

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 · 2019-02-18T11:51:04Z

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

Rolandisimo · 2019-02-18T12:31:23Z

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

@ahmadalfy Fails with any 4.x.x storybook/addon I've tried.
Reference issue: #5645

SebPez · 2019-02-25T05:22:51Z

@viczhuravlev did you manage to fix it?

SebPez · 2019-02-25T05:45:23Z

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 · 2019-03-04T09:30:33Z

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

storybookjs/storybook#4796

artembatura · 2019-03-05T19:58:40Z

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

benjazehr · 2019-04-03T12:28:32Z

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 · 2019-04-03T13:44:47Z

@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 · 2019-04-10T03:53:58Z

@angelozehr It is a regression. See #6474

lppedd · 2019-10-01T08:30:25Z

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

shilman · 2019-10-01T13:31:47Z

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

lppedd · 2019-10-01T13:39:31Z

@shilman apparently yes.

shilman · 2019-10-01T13:50:13Z

confirmed 😭

shilman · 2019-10-01T14:19:32Z

@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 · 2019-10-14T11:00:03Z

Closing this as a dupe to #8284

abudi1416 · 2021-11-07T10:27:28Z

having the same issue when using Storybook along with Angular 11 project

shilman added question / support react labels Nov 16, 2018

shilman closed this as completed Nov 16, 2018

skaraman mentioned this issue Nov 30, 2018

Incompatible with new Storybook 4.0+ preactjs/preact#1260

Closed

nullobject pushed a commit to conversation/ui that referenced this issue Dec 7, 2018

Import withStyles directly in components

8a97c20

There was an issue where it caused storybook compilation issues. For more info: storybookjs/storybook#4796

alexreardon mentioned this issue Dec 17, 2018

All examples page not working atlassian/react-beautiful-dnd#1019

Closed

yashwanth2804 mentioned this issue Dec 27, 2018

Can not able to start Storybook forem/forem#1407

Closed

etairi mentioned this issue Dec 29, 2018

Fixed upgrade to Emotion10 davidhu2000/react-spinners#50

Merged

igor-dv reopened this Dec 31, 2018

shilman closed this as completed Jan 23, 2019

shilman mentioned this issue Feb 28, 2019

Exports missing from addon-viewport #5500

Closed

masaki-koide added a commit to masaki-koide/my-portfolio that referenced this issue Mar 4, 2019

fix: storybookのaddonを全て無効化

ebc4b74

storybookjs/storybook#4796

shilman mentioned this issue Mar 27, 2019

Uncaught TypeError: Object(...) is not a function #6311

Closed

shilman mentioned this issue Apr 10, 2019

SB5 Theming breaks React 15 compat #6474

Closed

2 tasks

nelsonomuto mentioned this issue Aug 21, 2019

refactor(styles): move from sass to css in js Pocket/extension-save-to-pocket#102

Closed

lppedd mentioned this issue Oct 1, 2019

@storybook/angular: Expected 'styles' to be an array of strings #7877

Closed

shilman reopened this Oct 1, 2019

shilman added the high priority label Oct 1, 2019

shilman closed this as completed Oct 14, 2019

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

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

Comments

theiliad commented Nov 15, 2018

shilman commented Nov 16, 2018

theiliad commented Nov 16, 2018

magicspon commented Nov 28, 2018

psabharwal123 commented Nov 28, 2018

MarcNq commented Nov 29, 2018

aimuzov commented Dec 4, 2018 • edited

nullobject commented Dec 7, 2018

sievan commented Dec 11, 2018

ysgk commented Dec 12, 2018 • edited

igor-dv commented Dec 12, 2018

devictoribero commented Dec 15, 2018 • edited

diegopamio commented Dec 19, 2018

devictoribero commented Dec 20, 2018

sievan commented Dec 20, 2018

MarcNq commented Dec 20, 2018 • edited

sievan commented Dec 21, 2018

agutoli commented Dec 21, 2018 • edited

slikts commented Dec 30, 2018

slikts commented Dec 30, 2018

farcaller commented Dec 30, 2018

igor-dv commented Dec 31, 2018 • edited

vjpr commented Jan 22, 2019

shilman commented Jan 23, 2019

ahmadalfy commented Feb 18, 2019

Rolandisimo commented Feb 18, 2019 • edited

ahmadalfy commented Feb 18, 2019

Rolandisimo commented Feb 18, 2019 • edited

SebPez commented Feb 25, 2019

SebPez commented Feb 25, 2019

Ziv-Barber commented Mar 4, 2019

artembatura commented Mar 5, 2019 • edited

benjazehr commented Apr 3, 2019

shilman commented Apr 3, 2019

shilman commented Apr 10, 2019

lppedd commented Oct 1, 2019 • edited

shilman commented Oct 1, 2019

lppedd commented Oct 1, 2019

shilman commented Oct 1, 2019

shilman commented Oct 1, 2019

shilman commented Oct 14, 2019

abudi1416 commented Nov 7, 2021

aimuzov commented Dec 4, 2018 •

edited

ysgk commented Dec 12, 2018 •

edited

devictoribero commented Dec 15, 2018 •

edited

MarcNq commented Dec 20, 2018 •

edited

agutoli commented Dec 21, 2018 •

edited

igor-dv commented Dec 31, 2018 •

edited

Rolandisimo commented Feb 18, 2019 •

edited

Rolandisimo commented Feb 18, 2019 •

edited

artembatura commented Mar 5, 2019 •

edited

lppedd commented Oct 1, 2019 •

edited