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

[VladimirHumeniuk]

I have this errors in console, when i run Storybook (tried 5.0.5 and 5.0.3). Does anyone faced with this?

Uncaught TypeError: Object(...) is not a function
    at Function.div (vendors~main.cbfa0565136f7756886e.bundle.js:2795)
    at Object.../../../node_modules/@storybook/components/dist/Badge/Badge.js (vendors~main.cbfa0565136f7756886e.bundle.js:15399)
    at __webpack_require__ (runtime~main.7861100cd90c77ea6569.bundle.js:84)
    at Object.../../../node_modules/@storybook/components/dist/index.js (vendors~main.cbfa0565136f7756886e.bundle.js:16902)
    at __webpack_require__ (runtime~main.7861100cd90c77ea6569.bundle.js:84)
    at Object.../../../node_modules/@storybook/addon-knobs/dist/components/Panel.js (vendors~main.cbfa0565136f7756886e.bundle.js:10776)
    at __webpack_require__ (runtime~main.7861100cd90c77ea6569.bundle.js:84)
    at Object.../../../node_modules/@storybook/addon-knobs/dist/register.js (vendors~main.cbfa0565136f7756886e.bundle.js:13304)
    at __webpack_require__ (runtime~main.7861100cd90c77ea6569.bundle.js:84)
    at Object.../../../node_modules/@storybook/addon-knobs/register.js (vendors~main.cbfa0565136f7756886e.bundle.js:13372)

[shilman]

This looks a bit like the React version error: https://github.com/storybooks/storybook/issues/4796

But it doesn't make sense in 5.0, so I'm not sure what's going on...

[VladimirHumeniuk]

@shilman exactly, because I already tried on 16.8.0 and 16.3.0

[shilman]

@VladimirHumeniuk did you figure it out?

[VladimirHumeniuk]

@shilman no, we just abandoned the idea of using the 5.. versions.

[shilman]

That's a shame. Can you paste your package.json deps?

[VladimirHumeniuk]

@shilman

    "@emotion/core": "^0.x.x",
    "@storybook/addon-a11y": "^5.0.5",
    "@storybook/addon-actions": "^5.0.5",
    "@storybook/addon-backgrounds": "^5.0.5",
    "@storybook/addon-knobs": "^5.0.5",
    "@storybook/addon-viewport": "^5.0.5",
    "@storybook/react": "^5.0.5",
    "babel-loader": "^8.0.4",
    "eslint": "^5.9.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-config-prettier": "^3.3.0",
    "eslint-plugin-flowtype": "^3.2.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^6.1.2",
    "eslint-plugin-react": "^7.11.1",
    "file-loader": "^2.0.0",
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "reset-css": "^4.0.1",
    "storybook-addon-jsx": "^6.0.0",
    "storybook-readme": "^5.0.0"

[ryanrombough]

I had this same issue. It was because I was still trying to import action from @storybook/react. It is now imported from @storybook/addon-actions. So I had to update:

import { storiesOf, action } from '@storybook/react';

to

import { storiesOf } from '@storybook/react';
import { actions } from '@storybook/addon-actions';

in all of my .stories.js files

[VladimirHumeniuk]

@ryanrombough will try to do this, thanks in advance.

UPD: No, it's not our case. We didn't imported actions at all.

[VladimirHumeniuk]

Tried everything from the scratch on 5.0.6, same errors::

[shilman]

@VladimirHumeniuk Do you happen to have a reproduction I can look at?

[Lelith]

@shilman
i also experience the same issue after trying to upgrade from 4 to 5 but i already used @storybook/addon-actions before.

other dependencies:

    "react": "^16.8.6",
    "@babel/core": "^7.4.3",

    "@storybook/addon-actions": "^5.0.6",
    "@storybook/addon-info": "^5.0.6",
    "@storybook/addon-links": "^5.0.6",
    "@storybook/addons": "^5.0.6",
    "@storybook/react": "^5.0.6",
    "@storybook/addon-viewport": "^5.0.6",

also adding my config here:

import React from 'react';
import { configure, addDecorator, addParameters } from '@storybook/react';
import { setDefaults, withInfo } from '@storybook/addon-info';
import { configureViewport } from '@storybook/addon-viewport';
require('./style.css');
import { setIntlConfig, withIntl } from 'storybook-addon-intl';
import { addLocaleData } from 'react-intl';
import locale_en from 'react-intl/locale-data/en';
import locale_de from 'react-intl/locale-data/de';
import locale_da from 'react-intl/locale-data/da';
import locale_nl from 'react-intl/locale-data/nl';

addLocaleData([...locale_en, ...locale_de, ...locale_da]);

import messages_en from "../lib/translations/en_COM";
import messages_de from "../lib/translations/de_DE";
import messages_da from "../lib/translations/da_DK";
import messages_nl from "../lib/translations/nl_NL";

const messages = {
    'de': messages_de,
    'da': messages_da,
    'en': messages_en,
    'nl': messages_nl
};

const getMessages = (locale) => messages[locale];

// Set intl configuration
setIntlConfig({
    locales: ['en', 'de', 'da', 'nl'],
    defaultLocale: 'en',
    getMessages
});

function loadStories() {
  require('../stories/Instructions.js');
  const req = require.context('../stories', true, /\.story.js$/);
  req.keys().forEach(filename => req(filename));
}

addDecorator(withInfo);
addDecorator(withIntl);

addDecorator(story => (
    <div className="demoWrapper">
      {story()}
    </div>
));

addParameters({
  options: {
    sortStoriesByKind: true,
  }
})

configure(loadStories, module);

aaaand before i forget node v 11.10.1

[shilman]

@Lelith Try removing "addon-info"?

[Lelith]

@shilman its a quite big component library with many stories and all of them using this addon :/ so will stop migration for now but will update once i tried out eliminating this addon / other addons.

[ericsoco]

I also ran into this issue. Turned out it was due to the order of exports in my library -- one component was importing a styled-components theme from another module, and accessing it within a styled.div. However, the theme object was exporting after the component in my index.js. Rather than throw an NPE, I saw Uncaught TypeError: Object(...) is not a function.

[smykes]

The weird part for me is it runs fine locally, but throws this error when deployed too Netlify.

[wlblanchette]

I ran into ~this~ a similar issue and it was related to importing from "@storybook/theming": "5.0.11"

[JDansercoer]

@smykes Try to check your repo for circular dependencies. I had the exact same problem as you, where running it locally worked as it should, where building (and deploying it) gave me this error.
After removing the circular dependency, it all worked again!

[gsarpy]

I am having this issue as well. I never upgraded Storybook/Emotion but rather the only thing that changed before this error was I installed a new package that does not have any dependencies. (it's just a package that converts \n to <br /> nl2br()).

Not sure where to go. Everything else I changed on this branch was simple HTML/JSX changes nothing that should cause an issue with a dependency. I use create-react-app - is there a recommended way to upgrade storybook/emotion or downgrade it if that's a better direction for now?

I have tried deleting node_modules and running an install again. I tried completely deleting my local copy and cloning my project again but no luck.

[divyeshjethwa]

If you're facing this problem with angular then in my case:

I solved it by importing moduleMetadata from '@storybook/angular' instead of '@storybook/angular/dist/client/preview/types'