Storybook: Common name prefix causes rapid switching between stories on load

Created on 16 Jul 2020  路  9Comments  路  Source: storybookjs/storybook

This appears to have been introduced in 6.0.0-beta.33.

Using these stories:

import { storiesOf } from '@storybook/react';
import React from 'react';

storiesOf('test', module)
  .add('x y', () => {
    console.log('render x y'); 
    return <div>x y</div>
  })
  .add('x', () => {
    console.log('render x');
    return <div>x</div>
  });

if you start on the "x" story and then reload the page, it will switch to the "x y" story, and the console prints

render x y
render x
render x y

(In my real project using typescript it actually switches between the 2 stories many more times, sometimes endlessly.)

This seems somehow related to the fact that the second story's name is a prefix of the first. If you change the second story name to "x z" the bug doesn't occur. It also doesn't occur if you change the order of the stories or change which one is selected at the beginning.

react bug core needs reproduction tracked

All 9 comments

Ping? Just want to make sure this doesn't fall thru the cracks before the release!

Thanks for the ping @pelotom -- I missed this one somehow. Are you still seeing it on the latest RC? npx sb@next upgrade --prerelease to make sure all the packages are up to date. Possibly related: https://github.com/storybookjs/storybook/pull/11080

Hi @shilman, I tried with the latest and it's still happening.

Do you have a public repro you can share?

I'll take a look, thanks @pelotom

Crikey!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-rc.14 containing PR #11637 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.

Thanks guys!

Whoopee!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-rc.15 containing PR #11660 that references this issue. Upgrade today to try it out!

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

Was this page helpful?
0 / 5 - 0 ratings

Related issues

dmmarmol picture dmmarmol  路  57Comments

hckhanh picture hckhanh  路  69Comments

43081j picture 43081j  路  61Comments

EdenTurgeman picture EdenTurgeman  路  81Comments

Olian04 picture Olian04  路  78Comments