Webpack5 Builder - Stories cannot be explicitly sorted

[sashafklein]

Describe the bug

I just updated from the Webpack 4 Builder to Webpack 5, and my stories are suddenly sorted differently. Specifically, whereas they used to display in order of export, they now sort alphabetically. In other words, the below code would produce a storybook with Later showing up before MeFirst

// This would show up first
export const MeFirst = ...
// This would show up later, even though L precedes M
export const Later = ...

Looked at the sorting docs, and the objects passed to the storySort option in parameters, but it appears the native export order is not given to this sorting function. Is there any way to have the order of the story exports determine their appearance?

System

  System:
    OS: macOS 12.0.1
    CPU: (10) x64 Apple M1 Pro
  Binaries:
    Node: 12.13.0 - ~/.nvm/versions/node/v12.13.0/bin/node
    npm: 7.5.3 - ~/.nvm/versions/node/v12.13.0/bin/npm
  Browsers:
    Chrome: 99.0.4844.51
    Firefox: 96.0.2
    Safari: 15.1
  npmPackages:
    @storybook/addon-a11y: ^6.4.19 => 6.4.19 
    @storybook/addon-actions: ^6.4.19 => 6.4.19 
    @storybook/addon-essentials: ^6.4.19 => 6.4.19 
    @storybook/addon-links: ^6.4.19 => 6.4.19 
    @storybook/builder-webpack5: ^6.4.19 => 6.4.19 
    @storybook/manager-webpack5: ^6.4.19 => 6.4.19 
    @storybook/node-logger: ^6.4.19 => 6.4.19 
    @storybook/preset-create-react-app: ^4.0.1 => 4.0.1 
    @storybook/preset-scss: ^1.0.3 => 1.0.3 
    @storybook/react: ^6.4.19 => 6.4.19 

[kkakroo]

I had been on webpack5 builder for a while but started seeing this issue after one of the recent updates.
However removing webpack5 builder fixed the issue for now, thanks.

[rdebeasi]

Related: #17847

[rdebeasi]

Here's a repro using @storybook/angular 6.5.0-alpha.55.

Thanks in advance for looking into this! 😄

[rdebeasi]

Thanks for your interest! In the future, you can receive updates by clicking the "subscribe" button on the right side of the page. 😄

[catdc2017]

I found a work around for this issue. The sort is occurring on the export const

export const A = () => {
    const labelText = text(LABEL, LABEL_DEFAULT, GENERAL);
    const helperText = text(HELPER_TEXT, HELPER_TEXT_DEFAULT, GENERAL);
    return {
        moduleMetadata: {
            imports: [AutocompleteReactiveModule],
        },
        component: AutocompleteReactiveComponent,
        props: {
            labelText,
            helperText,
        },
    };
};

A.storyName = 'Basic';
A.parameters = { docs: { page: AutocompleteReactiveMDX }, themes: getThemeConfig() };

So if you name the const alphabetically as you want them in your stories.ts it will work in production correctly

Example below sorts correctly in production

A.storyName = 'Basic';
B.storyName = 'API';
C.storyName = 'Guidelines';

Example below does not sort correctly in production

Basic.storyName = 'Basic';
API.storyName = 'API';
Guidelines.storyName = 'Guidelines';

[catdc2017]

Obviously I would be more interested in a correct fix of course rather than work around so I will be keeping an eye on this 😀

[brandonmcconnell]

I've been noticing this lately as well. Even if alphabetical is the new default, there should be a way using storySort to enforce intrinsic/export order.

This would be possible if the intrinsic order were included as an integer somewhere in the sort method's callback function, but it does not appear to be.

[shilman]

closing as dupe to #15574

[symmetriq]

This was fixed in 6.5, but is now broken again in 6.5.5.

[shilman]

@symmetriq do you have a reproduction you can share? Or, specifically, can you share your stories glob from .storybook/main.js?

[symmetriq]

@shilman

  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],

[rshackleton]

Also seeing this issue after switching to the webpack 5 builder.

stories: ['../src/stories/**/*.stories.mdx', '../src/stories/**/*.stories.@(js|jsx|ts|tsx)']

[siminino]

Also seeing this issue after upgrading to 6.5.9, using builder webpack 5 and React. (before was in storybook 6.4.22 and webpack 4)
Now, any story that comes before "Default" when alphabetically sorted (ex: Bottom), becomes the default story. So, Default is not default anymore.
Obs: and looks like Primary is not primary anymore too.

[symmetriq]

For me, stories are sorted as expected (in export order, not alphabetical) as of Storybook 6.5.8. I'm now using 6.5.9 and it's still working correctly. There must be some other factor involved.

[siminino]

You are totally right @symmetriq. I have just found the "other factor" involved.

We use the filename format *.example.js in our project. This is our storybook main.js:

module.exports = {
  stories: ['../src/components/**/*.example.js'],
  framework: '@storybook/react',
  addons: [
    '@storybook/addon-actions',
    '@storybook/addon-viewport',
    '@storybook/addon-knobs',
    '@storybook/addon-docs',
    '@storybook/addon-controls',
    '@storybook/addon-measure',
    '@storybook/addon-outline',
  ],
  core: {
    builder: 'webpack5',
  },
}

After changing one story filename to *.stories.js and updating main.js to search for this pattern, it sorts as expected.

So, we have an issue where we must use the proposed stories filename format to make sorting works properly.

[siminino]

I open i new ticket for it #18535