HMR causes Stories of "..." named "..." already exists error

[levithomason]

Solved

Don't forget to include the module argument in your storiesOf call 😉

---

Original Post

I have a single Example.stories.js file. When making changes, I see this error after the HMR update. This bug was introduced within the last few days. Prior to that I had never seen this bug.

Preview area

Example.stories.js

import React from 'react'
import { storiesOf } from '@storybook/react'
import { action } from '@storybook/addon-actions'
import * as knobs from '@storybook/addon-knobs'
import { linkTo } from '@storybook/addon-links'

import { Button, Container, Segment } from 'semantic-ui-react'

const stories = storiesOf('__Examples__')

stories.add('Actions', () => (
  <Container text>
    <p>Stories can log actions. Open the "Action Logger" panel and click the button.</p>
    <Button onClick={action('onClick')}>Log Action</Button>
  </Container>
))

stories.add('Knobs', () => {
  // Knobs appear in the Storybook in the order they were instantiated in code
  const props = {
    content: knobs.text('text', 'Click Me'),
    size: knobs.select('size', ['mini', 'tiny', 'small', 'medium', 'large', 'big', 'huge', 'massive']),
    color: knobs.select('color', [
      'red',
      'orange',
      'yellow',
      'olive',
      'green',
      'teal',
      'blue',
      'violet',
      'purple',
      'pink',
      'brown',
      'grey',
      'black',
    ]),
    active: knobs.boolean('active', false),
    basic: knobs.boolean('basic', false),
    circular: knobs.boolean('circular', false),
    compact: knobs.boolean('compact', false),
    disabled: knobs.boolean('disabled', false),
    fluid: knobs.boolean('fluid', false),
    inverted: knobs.boolean('inverted', false),
    loading: knobs.boolean('loading', false),
  }

  return (
    <Container text>
      <p>
        Knobs make your story interactive. It is a good practice to make a "knob" for each prop you are
        showing the story for.
      </p>
      <p>Open the "Knobs" panel and try it out.</p>
      <Segment inverted={props.inverted}>
        <Button {...props} />
      </Segment>
    </Container>
  )
})

stories.add('Links', () => (
  <Container text>
    <p>Stories can link to other stories.</p>
    <Button
      primary
      onClick={linkTo('__Examples__', 'Knobs')}
      icon="level up"
      labelPosition="left"
      content="Go to 'Knobs'"
    />
  </Container>
))

[levithomason]

I forgot the module argument in the storiesOf call. Would be great to throw an error in that case.

[shilman]

Cc @igor-dv @ndelangen

[ndelangen]

According to the screenshot we do throw an error 😂
It's just not the error that explains what you think is wrong.

The error we show is to prevent someone from adding a story with the exact same name twice..

But of course that is exactly what happens if HMR is not handled..

I guess we should move this error into a warning and let the rendering continue.

[ndelangen]

Code for this error is here:
https://github.com/storybooks/storybook/blob/master/app/react/src/client/preview/client_api.js#L72

[levithomason]

Heh, yes, there is an error 😛 I'm thinking it may be helpful if storiesOf() threw an error itself if there were a missing module argument. Something like Error: storiesOf() "module" argument must be an object, got: undefined.

Is a PR for this acceptable?

[igor-dv]

@levithomason

We've discussed it here: #1506

So I've added the console warning to this..

[ndelangen]

Is the console warning shown in this case? We can't see in the screenshot.

I think the correct behavior would be to accept the new story being injected, but show a warning in the console (PR welcome), and show an individual warning if module is missing (implemented).

What do you think @igor-dv ?