Storybook: Error: "version" is a required argument.

[jpcmf]

I dont know if it's a bug or a config pattern. But I'm stuck on this right now.

I just create a basic button component and when I build the storybook it's break.

WARNING in ./stories/components/4-Button.stories.tsx
Module build failed (from ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js):
Error: "version" is a required argument.
    at Object.getArg (/Users/joaopaulofricks/www/xxx-Design-System/node_modules/@pmmmwh/react-refresh-webpack-plugin/node_modules/source-map/lib/util.js:24:11)
    at /Users/joaopaulofricks/www/xxx-Design-System/node_modules/@pmmmwh/react-refresh-webpack-plugin/node_modules/source-map/lib/source-map-consumer.js:207:28
    at async Object._loader (/Users/joaopaulofricks/www/xxx-Design-System/node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js:78:9)
 @ \.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$ (. sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$) ./stories/components/4-Button.stories.tsx
 @ ./.storybook/generated-stories-entry.js
 @ multi ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/addParameter.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./node_modules/react-scripts/node_modules/react-dev-utils/webpackHotDevClient.js

Button.stories

import React from 'react';
import { withKnobs, object, text, boolean } from '@storybook/addon-knobs';//eslint-disable-line
import { storiesOf } from '@storybook/react'; //eslint-disable-line
import { Button } from '../../src/components';

storiesOf('Atoms|Button', module)
  .addDecorator(withKnobs)
  .add('Primário', () => (
    <Button
      type={object('type', 'button')}
      className={text('className', 'storybook-example')}
    >
      Primário
    </Button>
  ))

System

  System:
    OS: macOS High Sierra 10.13.6
    CPU: (4) x64 Intel(R) Core(TM) i5-2400S CPU @ 2.50GHz
  Binaries:
    Node: 15.2.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.0.10 - /usr/local/bin/npm
  Browsers:
    Chrome: 87.0.4280.67
    Edge: 87.0.664.47
    Safari: 13.1.2
  npmPackages:
    @storybook/addon-actions: ^6.1.5 => 6.1.5
    @storybook/addon-essentials: ^6.1.5 => 6.1.5
    @storybook/addon-knobs: ^6.1.5 => 6.1.5
    @storybook/addon-links: ^6.1.5 => 6.1.5
    @storybook/addons: ^6.1.5 => 6.1.5
    @storybook/node-logger: ^6.1.5 => 6.1.5
    @storybook/preset-create-react-app: ^3.1.5 => 3.1.5
    @storybook/react: ^6.1.5 => 6.1.5
    @storybook/theming: ^6.1.5 => 6.1.5

[shilman]

Do you have a repro repo you can share?

[jpcmf]

Yes @shilman , i just create a new repo - https://github.com/jpcmf/sb-clone

Thank you

[jpcmf]

@shilman Any help?

[shilman]

Fixed it after considerable debugging. I'm not sure how to make the error message useful.

1. Moved the stories into the src folder because that's where the CRA preset applies. We recommend placing stories directly beside the components they describe.
2. Converted the story to CSF which is also the recommended format. I don't think is strictly necessary.

export default { title: 'Atoms/Button', decorators: [withKnobs] };

export const Primario: any = () => (
  <Button
    type={object('type', 'button')}
    className={text('className', 'storybook-example')}
  >
    Primário
  </Button>
);

[jpcmf]

@shilman Lot of people remove the stories folder from src and I do the same. My bad. Well it's fix my problem. I'm running the last version of SB now. Thanks a lot for your time!

[shilman]

@mrmckeb any thoughts on how to detect this and warn users?

[mrmckeb]

I think we should just add a warning/error to the preset for now... what do you think @shilman?

I can do that if you think it makes sense?

[jpcmf]

I agree with @mrmckeb. Thank you guys 👍

[shilman]

@mrmckeb yeah I think we should add a warning if the user loads a story from outside of the src/ directory. Do you know how to detect that? If so, please add it. 🙏

[JacquesBonet]

I had the problem too.

My stories are under src directory.

I use a monorepo structure.

If I remove in .storybook/main.js this line

"@storybook/preset-create-react-app"

thats works