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

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!

[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);

[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