Storybook: Unable to migrate to CSF

[phaistonian]

Ideas ?:)

[shilman]

Try sb migrate storiesof-to-csf --glob="**/*.stories.js" with the =?

[phaistonian]

@shilman Same issue ;(

[shilman]

Do you have 55 .stories.js files in your project? I think it's sending other files that it shouldn't be sending? What if you point it at src/**/*.stories.js or something like that?

[phaistonian]

Yes, this is the correct figure.

I tried it in a different system and it worked.

Perhaps an rm -rf node_modules && yarn would solve it.

Thank you.

[shilman]

Pretty strange. Glad you figured it out! 👍

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[jayliu50]

Not working for me. No stories show up whatsoever.

• ran the migration script. all stories.js files transformed fine, as per manually inspection.
• cleared yarn.lock and deleted node_modules
• changing any story to CSF makes it disappear from the UI.
  
  
  
  • Going with output from the script makes ALL stories disappear (all were transformed successfully).
  
  
  • change any stories BACK to storiesOf makes them reappear
  
  
• NO errors in the browser console
• NO errors in the terminal
• config matches that of the tutorial
• About your Storybook confirms version 5.2.8

• I can verify that all stories ARE being loaded through

      function loadStories() { 
          req.keys().forEach(filename => {
              console.log(filename); 
              return req(filename)
          });
      } 
  

[shilman]

@jayliu50 please read the "loading stories" documentation:

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

Your loadStories function needs to return a value if you want to use CSF.

[jayliu50]

@shilman thanks for the reply, and for pointing me in the right direction.

I changed from before to after, and it works now.

Thank you!!

BEFORE

import React, { Fragment } from 'react';

import { configure, addDecorator } from '@storybook/react';
import GlobalStyle from '../src/styles/global';

// automatically import all files ending in *.stories.js
const req = require.context('../src', true, /\.stories\.js$/);

function loadStories() {
  req.keys().forEach(filename => req(filename));
}

addDecorator(storyFn => (
  <Fragment>
    {storyFn()}
    <GlobalStyle></GlobalStyle>
  </Fragment>
));

configure(loadStories, module);

AFTER

import React, { Fragment } from 'react';

import { configure, addDecorator } from '@storybook/react';
import GlobalStyle from '../src/styles/global';

// automatically import all files ending in *.stories.js
configure([require.context('../src', true, /\.stories\.js$/)], module);

addDecorator(storyFn => (
  <Fragment>
  {storyFn()}
  <GlobalStyle></GlobalStyle>
  </Fragment>
));

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[phaistonian]

The way to _fix_ this is to move babel.config.js so that it's not used when migrating.

When done, you can put it back / rename it.