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

[alwkins]

Thanks everyone, for the tip to check for missing () =>
I saw the same fn.apply error when trying to pass in storyFn.

Defined storyFn:

export const MyComponentStory = () => {
    return (
        <MyComponent />
    );
}

This usage caused the error:

storiesOf('Components', module).add('MyComponent', MyComponentStory());

It resolved when I added the () =>:

storiesOf('Components', module).add('MyComponent', () => MyComponentStory());

[akbarkz]

I have a similar issue when using Vite as a bundler. I posted my question with all the details on SO here: https://stackoverflow.com/questions/70420749/storybook-with-vite-error-fn-apply-is-not-a-function

[IanVS]

The stack overflow solution is that a decorator was causing the problem, so it sounds like folks here might want to check that any decorators they are using (including global decorators in preview.js) are correct.

I'd also recommend that everyone try out CSF3, in which stories are exported as objects, rather than functions.