Storybook: No stories will load after conversion to CSF using storiesof-to-csf codemode

[daveisfera]

Describe the bug
We'd like to move to CSF and the storiesof-to-csf codemod would be very helpful in doing that, but none of our stories will load after running it.

To Reproduce
Run storiesof-to-csf codemod on code like this:

import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { withKnobs, text } from '@storybook/addon-knobs';
import LabeledInput from './index';

storiesOf('Molecules', module)
    .addDecorator(withKnobs)
    .add('LabeledInput', () => {
        return (
            <LabeledInput
                label={text('label', 'Label')}
                value={text('value', '')}
                onChange={action('onChange')}
                placeHolder={text('placeHolder', 'placeHolder')}
            />
        );
    });

Expected behavior
Story converted to CSF would load

Code snippets
It was converted to this (which isn't loading):

import React from 'react';
import { action } from '@storybook/addon-actions';
import { withKnobs, text } from '@storybook/addon-knobs';
import LabeledInput from './index';

export default {
    title: 'Molecules',
    decorators: [withKnobs],
};

export const labeledInput = () => {
    return (
        <LabeledInput
            label={text('label', 'Label')}
            value={text('value', '')}
            onChange={action('onChange')}
            placeHolder={text('placeHolder', 'placeHolder')}
        />
    );
};

labeledInput.story = {
    name: 'LabeledInput',
};

And I changed it to this but it still wouldn't load:

import React from 'react';
import { action } from '@storybook/addon-actions';
import { withKnobs, text } from '@storybook/addon-knobs';
import LabeledInput from './index';

export default {
    title: 'Molecules',
    component: LabeledInput,
    decorators: [withKnobs],
};  

export const simpleStory = () => <LabeledInput
            label={text('label', 'Label')}
            value={text('value', '')}
            onChange={action('onChange')}
            placeHolder={text('placeHolder', 'placeHolder')}
        />; 

System:

Environment Info:

  System:
    OS: macOS 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
  Binaries:
    Node: 10.16.3 - /usr/local/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.9.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 76.0.3809.132
    Firefox: 68.0.2
    Safari: 12.1.2
  npmPackages:
    @storybook/codemod: ^5.2.0 => 5.2.0 

Additional context
5.2 looks like a great release! Thanks for all of the hard work!

[daveisfera]

Forgot to include the message that Storybook reports:

No Preview
Sorry, but you either have no stories or none are selected somehow.

Please check the Storybook config.
Try reloading the page.
If the problem persists, check the browser console, or the terminal you've run Storybook from.

[shilman]

@daveisfera you also need to update your call to configure in config.js per the documentation. I'll update the codemod docs as well

https://github.com/storybookjs/storybook/blob/next/addons/docs/README.md

[daveisfera]

What am I missing from that readme? I don't see anything that is related to CSF. Do I need to rename all of the files to .mdx or something?

[shilman]

@daveisfera I was on my phone. This is a better link:

https://github.com/storybookjs/storybook/blob/next/docs/src/pages/basics/writing-stories/index.md#loading-stories

With storiesOf, it's enough to require the files. With CSF and MDX, configure actually needs access to the imported modules.

So your call to configure might look like:

configure(require.context('../src', true, /\.stories\.js$/), module);

[daveisfera]

That did the trick, but now I'm getting an Es Module story that's empty for each of the stories. Is that expected or is there something wrong with my setup that's causing that?

[shilman]

@daveisfera Def not expected. Can you post your config here?

[daveisfera]

We're using these addons:

@storybook/addon-actions
@storybook/addon-links
@storybook/addon-notes
@storybook/addon-knobs

We setup a mock for jQuery:

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

const jQueryMock = () => ({
    on: action('jQuery.on'),
    off: action('jQuery.off'),
    click: action('jQuery.click'),
    submit: action('jQuery.submit'),
    addClass: action('jQuery.addClass'),
    ajaxStop: action('jQuery.ajaxStop'),
});

jQueryMock.extend = obj => {
    Object.keys(obj).forEach(k => {
        if (typeof jQueryMock[k] === 'undefined') {
            jQueryMock[k] = obj[k];
        }
    });
};

window.$ = window.jQuery = jQueryMock;

global.$ = global.jQuery = jQueryMock;

And then the configure line is:
configure(require.context('../src/apps', true, /\.stories\.jsx$/), module);

[shilman]

Hmm nothing jumping out. Can you provide a repro?

[kfayelun]

Hey! As discussed on discord I'm getting the same issue, and here is my repo: https://github.com/netliferesearch/netlife2019/tree/adding_storybook_/web

This is a gatsby frontend, where I've followed this for the setup: https://www.gatsbyjs.org/docs/visual-testing-with-storybook/ but changed the configure method as described above.

[shilman]

Boo-yah!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.3.0-alpha.12 containing PR #8317 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

[shilman]

Huzzah!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.2.4 containing PR #8317 that references this issue. Upgrade today to try it out!

[daveisfera]

I just updated and the Es Module stories are no longer showing up. Thanks for taking care of this.