Storybook: React - Browser error: fn.apply is not a function

[tonyjmartinez]

Describe the bug
Most of my components produce the following error in the browser.
TypeError: fn.apply is not a function

To Reproduce
Steps to reproduce the behavior:

1. npm run storybook
2. Error shows up in browser

Expected behavior
No error, show my component

Screenshots

System:

Environment Info:

  System:
    OS: macOS 10.15.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 10.15.3 - ~/.nvm/versions/node/v10.15.3/bin/node
    Yarn: 1.19.0 - /usr/local/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v10.15.3/bin/npm
  Browsers:
    Chrome: 78.0.3904.97
    Safari: 13.0.3
  npmPackages:
    @storybook/react: ^5.2.6 => 5.2.6 

[tonyjmartinez]

Found my problem... I wasn't exporting a proper React component.
This export const card = <Card>This is a card</Card>;
Should have been this export const card = () => <Card>This is a card</Card>;

[mnpenner]

Could we make this error message a little better? I just hit this one too and it was super confusing.

Also a warning about missing a default export in a .stories.tsx file would nice for us newcomers.

[shilman]

Good idea @mnpenner - any interest in trying to fix this?

[sunnykgupta]

I just faced this. Clearly it is caused by not reading the docs better 😬
Glad I was able to find my way to this issue and quickly identify my mistake.

[XingXiaoWu]

same question.
but it looks like can't use Upper Camel Case
just like

export const Basic = () => ({...})

when I use little camel-case

export const basic = () => ({..})

it's ok.

[shilman]

@XingXiaoWu do you have a repro? we recommend TitleCase for story names and use that all the time

[XingXiaoWu]

@XingXiaoWu您是否有代表？我们建议使用TitleCase作为故事名称，并一直使用

I can provide it，but Vue
vue-demo.zip

Startup Steps:

npm i
npm run storybook

File location

The story file is located in vue-demo/stories/ 3-freetable.stories.js
The Component file is located in vue-demo/src/component

Repetition steps

//in vue-demo/stories/ 3-freetable.stories.js
export const basic = () => ({..})

Modified to

//in vue-demo/stories/ 3-freetable.stories.js
export const Basic = () => ({..})

Expected behavior

Normal behavior

Actual behavior

Error : fn.apply is not a function

[towry]

@ XingXiaoWu do you have a repro? we recommend TitleCase for story names and use that all the time

I have the same issue, my example is const Example = ...., I have to change Example to example.

deps:

    "@storybook/addon-actions": "^5.3.19",
    "@storybook/addon-knobs": "^5.3.19",
    "@storybook/addon-notes": "^5.3.19",
    "@storybook/addons": "^5.3.19",
    "@storybook/preset-scss": "^1.0.2",
    "@storybook/preset-typescript": "^3.0.0",
    "@storybook/vue": "^5.3.19",

[shilman]

@towry do you have a public repro? i can't imagine why this problem might occur.

[towry]

@towry do you have a public repro? i can't imagine why this problem might occur.

I just created one: https://github.com/pze/storybook-vue-issue

npm run storybook