In production, stories do not appear in export order #17611

rdebeasi · 2022-03-02T17:36:52Z

Describe the bug
In production, stories do not appear in export order. Instead, they are sorted alphabetically.

#15574 describes similar behavior and was closed when a fix was released in v6.14.13 and v6.5.0-alpha.17. I'm still experiencing this problem with Storybook 6.5.0-alpha.45, however.

Thank you in advance for your help!! 😄

To Reproduce

Clone https://github.com/rdebeasi/storybook-sort-repro
Run yarn storybook to start Storybook in dev mode. Stories appear in export order (Story C, Story B, Story A). This is the expected behavior.
Run yarn build-storybook && npx serve to start Storybook in production mode. Shows appear in sorted in alphabetical order (Story A, Story B, Story C). This behavior appears to be a bug.

System

  OS: macOS 11.6.4

  CPU: (8) x64 Intel(R) Core(TM) i7-8559U CPU @ 2.70GHz

 Binaries:

  Node: 14.15.1 - ~/.nvm/versions/node/v14.15.1/bin/node

  Yarn: 3.2.0 - ~/.yarn/bin/yarn

  npm: 6.14.8 - ~/.nvm/versions/node/v14.15.1/bin/npm

 Browsers:

  Chrome: 98.0.4758.109

  Firefox: 97.0.1

  Safari: 15.3

 npmPackages:

  @storybook/addon-actions: ^6.5.0-alpha.45 => 6.5.0-alpha.45 

  @storybook/addon-docs: ^6.5.0-alpha.45 => 6.5.0-alpha.45 

  @storybook/addon-essentials: ^6.5.0-alpha.45 => 6.5.0-alpha.45 

  @storybook/addon-interactions: ^6.5.0-alpha.45 => 6.5.0-alpha.45 

  @storybook/addon-links: ^6.5.0-alpha.45 => 6.5.0-alpha.45 

  @storybook/angular: ^6.5.0-alpha.45 => 6.5.0-alpha.45 

  @storybook/builder-webpack5: ^6.5.0-alpha.45 => 6.5.0-alpha.45 

  @storybook/manager-webpack5: ^6.5.0-alpha.45 => 6.5.0-alpha.45 

  @storybook/testing-library: ^0.0.9 => 0.0.9

The text was updated successfully, but these errors were encountered:

himerus · 2022-03-03T21:33:07Z

I have seen this repeatedly in about 8 different Storybook environments at minimum.

This is a major issue as on many stories, we may intentionally build the first story to handle all the controls and be a flexible demonstration of all the options. THEN we will choose to iterate out more "hard coded" stories for some of the additional ones to provide multiple varying scenarios we can run a11y tests against, etc.

I wish I'd have had time to look into this, but we've definitely seen this for MONTHS.

shilman · 2022-03-04T01:32:01Z

Did you see this comment

#15574 (comment)

rdebeasi · 2022-03-04T14:33:07Z

Thanks for sharing that link! Unfortunately, it does not resolve this issue.

That comment refers to a problem with a custom Webpack config. In the repro above, we are using the default configuration, without any Webpack customization.

shilman · 2022-03-04T17:20:43Z

@rdebeasi @himerus I'm seeing an inconsistency between the babel config for angular (broken) vs. react (works). will investigate further. are all the projects you're seeing this on using Angular? If not, what framework? thanks! 🙏

himerus · 2022-03-04T17:23:06Z

@shilman we are using web components 100%.

Thanks for taking a look!! This has been an annoyance, and I've never found the time to look into what was causing it.

shilman · 2022-03-04T17:52:39Z

@himerus in your case i think it's your custom babel config that's overriding the defaults. try adding babel-plugin-named-exports-order to process your story files and i think it should work. please let me know either way! 🙏

rdebeasi · 2022-03-04T18:42:00Z

Yes, I'm seeing this problem only with Storybook Angular. I'm not able to reproduce the problem with Storybook React.

himerus · 2022-03-04T18:47:13Z

@himerus in your case i think it's your custom babel config that's overriding the defaults. try adding babel-plugin-named-exports-order to process your story files and i think it should work. please let me know either way! 🙏

Interesting. Now I have to figure out/remember why we have that large babel config in place to begin with. It is a leftover remnant from long ago. Adding babel-plugin-named-exports-order almost solved the problem. They are listed in the correct order in the sidebar menu, but not in the story itself.

Any additional thoughts welcome, otherwise I'll dig more into that configuration.

shilman · 2022-03-06T17:18:43Z

They are listed in the correct order in the sidebar menu, but not in the story itself.

@himerus To clarify, do you mean in the DocsPage for that story on the Docs tab?

himerus · 2022-03-06T17:50:09Z

@shilman Exactly. This is on the Docs tab.

shilman · 2022-03-07T07:33:04Z

@tmeasday any ideas why the DocsPage story order wouldn't match the sidebar order?

tmeasday · 2022-03-09T05:57:03Z

@himerus -- am I correct in saying you are NOT using storyStoryV7?

If so, I don't really see any obvious reason why the order here (which drives the docs page):

storybook/lib/store/src/StoryStore.ts

Line 219 in fc9853a

return Object.keys(csfFile.stories).map((storyId: StoryId) =>

would differ from the order in extract (which drives the sidebar):

storybook/lib/store/src/StoryStore.ts

Line 246 in fc9853a

    
           return Object.entries(this.storyIndex.stories).reduce((acc, [storyId, { importPath }]) => {

However, I suppose technically there's definitely a bug there, as the order in the index could definitely be different from the raw export order (e.g. if you are using sorting, or __namedExportsOrder). I'll send a fix for that in any case @shilman. (#17669)

On the surface it doesn't seem like what's happening here though -- in the v6 store (without sorting, or order), the index just ends up walking the exports anyway:

storybook/lib/client-api/src/StoryStoreFacade.ts

Lines 190 to 192 in b422c7f

    
           Object.entries(sortedExports) 
        
             .filter(([key]) => isExportStory(key, defaultExport)) 
        
             .forEach(([key, storyExport]: [string, any]) => {

shilman · 2022-03-09T16:41:47Z

Great Caesar's ghost!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.5.0-alpha.47 containing PR #17669 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

rdebeasi · 2022-03-15T15:17:05Z

Thanks for making this change! I've updated the repro to Storybook 6.5.0-alpha.48. Stories are now sorted in alphabetical order in both local and development.

My understanding is that the intended behavior is for stories to be sorted in export order, not alphabetical order. For example, in the How to write stories docs, the Button stories are shown in export order:

Primary
Secondary
Large
Small

Closing this issue. Please re-open if you think there's still more to do.

I think there's still more to do, but I don't have permission to re-open this issue because I'm not a collaborator and I didn't close the issue. Could someone please re-open this issue? Thank you!

liverant · 2022-03-24T09:54:25Z

With the new version:

 "@nrwl/storybook": "^13.10.0-beta.1",
    "@storybook/addon-docs": "^6.5.0-alpha.50",
    "@storybook/addon-essentials": "^6.5.0-alpha.50",
    "@storybook/addon-viewport": "^6.5.0-alpha.50",
    "@storybook/angular": "^6.5.0-alpha.50",
    "@storybook/builder-webpack5": "^6.5.0-alpha.50",
    "@storybook/manager-webpack5": "^6.5.0-alpha.50",

And the default config (preview.js):

export const parameters = {
  viewMode: 'docs',
  docs: {
    inlineStories: true,
    container: DocsContainer,
    page: DocsPage,
    source: {
      state: 'open',
    },
  },
  viewport: {
    viewports: INITIAL_VIEWPORTS,
  },
};

Stories in prod build are still not in their imported order
("Playground" should be first, instead we get alphabetical order)

@shilman can you reopen?

shilman · 2022-04-01T06:55:47Z

Shiver me timbers!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.4.20 containing PR #17669 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb upgrade

platon-rov · 2022-04-04T15:45:09Z

Still sorted in the wrong order. Tried even 6.5-alpha.55 version. HTML framework.

rdebeasi · 2022-04-04T16:10:45Z

I'm unable to reopen this issue, so I'd recommend continuing the conversation in #17665, which appears to describe a similar problem. Thanks! 😄

rdebeasi added bug needs triage labels Mar 2, 2022

shilman added builder-webpack5 and removed needs triage labels Mar 4, 2022

shilman added the angular label Mar 6, 2022

tmeasday mentioned this issue Mar 9, 2022

Addon-docs: DocsPage story order should match the index #17669

Merged

3 tasks

shilman closed this as completed Mar 9, 2022

rdebeasi mentioned this issue Apr 1, 2022

Sorting option order doesn't affect sorting for the stories in a file #17847

Closed

platon-rov mentioned this issue Apr 4, 2022

bug: examples displayed in wrong order SAP/fundamental-styles#3287

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

In production, stories do not appear in export order #17611

In production, stories do not appear in export order #17611

rdebeasi commented Mar 2, 2022

himerus commented Mar 3, 2022

shilman commented Mar 4, 2022

rdebeasi commented Mar 4, 2022

shilman commented Mar 4, 2022

himerus commented Mar 4, 2022 •

edited

Loading

shilman commented Mar 4, 2022 •

edited

Loading

rdebeasi commented Mar 4, 2022 •

edited

Loading

himerus commented Mar 4, 2022

shilman commented Mar 6, 2022 •

edited

Loading

himerus commented Mar 6, 2022

shilman commented Mar 7, 2022

tmeasday commented Mar 9, 2022 •

edited

Loading

shilman commented Mar 9, 2022

rdebeasi commented Mar 15, 2022

liverant commented Mar 24, 2022 •

edited

Loading

shilman commented Apr 1, 2022

platon-rov commented Apr 4, 2022

rdebeasi commented Apr 4, 2022

In production, stories do not appear in export order #17611

In production, stories do not appear in export order #17611

Comments

rdebeasi commented Mar 2, 2022

himerus commented Mar 3, 2022

shilman commented Mar 4, 2022

rdebeasi commented Mar 4, 2022

shilman commented Mar 4, 2022

himerus commented Mar 4, 2022 • edited Loading

shilman commented Mar 4, 2022 • edited Loading

rdebeasi commented Mar 4, 2022 • edited Loading

himerus commented Mar 4, 2022

shilman commented Mar 6, 2022 • edited Loading

himerus commented Mar 6, 2022

shilman commented Mar 7, 2022

tmeasday commented Mar 9, 2022 • edited Loading

shilman commented Mar 9, 2022

rdebeasi commented Mar 15, 2022

liverant commented Mar 24, 2022 • edited Loading

shilman commented Apr 1, 2022

platon-rov commented Apr 4, 2022

rdebeasi commented Apr 4, 2022

himerus commented Mar 4, 2022 •

edited

Loading

shilman commented Mar 4, 2022 •

edited

Loading

rdebeasi commented Mar 4, 2022 •

edited

Loading

shilman commented Mar 6, 2022 •

edited

Loading

tmeasday commented Mar 9, 2022 •

edited

Loading

liverant commented Mar 24, 2022 •

edited

Loading