Stories are not sorted by their export (in production)

[janivo]

Describe the bug
In production, stories are not sorted according to their export instead, they are sorted alphabetically.

How they should be sorted (working correctly in dev):

How they are actually sorted (in production):

To Reproduce
I've tried to create an example but I could not reproduce the bug.
Here is a working example: https://github.com/inovex/elements

1. Pull repo
2. Run yarn install
3. Run yarn start
4. See that the sorting is correct
5. Run cd packages/storybook
6. Run yarn build
7. Run cd dist
8. Serve built content (e.g. serve .)
9. See wrong sorting order

Everything related to the storybook can be found under packages/storybook.

System

  System:
    OS: macOS 10.15.7
    CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
  Binaries:
    Node: 14.16.1 - ~/.nvm/versions/node/v14.16.1/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v14.16.1/bin/yarn
    npm: 6.14.12 - ~/.nvm/versions/node/v14.16.1/bin/npm
  Browsers:
    Chrome: 91.0.4472.114
    Firefox: 89.0
    Safari: 14.1.1
  npmPackages: (added manually because of monorepo)
	"@storybook/addon-actions": "^6.3.2",
    "@storybook/addon-essentials": "^6.3.2",
    "@storybook/addon-links": "^6.3.2",
    "@storybook/addon-viewport": "^6.3.2",
    "@storybook/builder-webpack5": "^6.3.2",
    "@storybook/manager-webpack5": "^6.3.2",
    "@storybook/theming": "^6.3.2",
    "@storybook/web-components": "^6.3.2",

Additional context
It seems to be related to this issue: #15305

I've tried to sort the stories manually within the preview.js but it only sorted the entries in the sidebar but not the actual content on the canvas. Meaning, I would click on the story on the top of the sidebar, leading me to the rendered story at the bottom of the page in the canvas.

[dcwarwick]

I see this too.

Here's an example:
The storybook: https://ibm-cloud-cognitive.netlify.app/?path=/story/cloud-cognitive-canary-pageheader--demo
The source file: https://github.com/carbon-design-system/ibm-cloud-cognitive/blob/main/packages/cloud-cognitive/src/components/PageHeader/PageHeader.stories.js
In the source file, the stories are exported (from line 451 onwards) with the three "Simple page header" stories first, but in the storybook two of those appear half-way down the list and the third at the end. In the storybook, the stories are appearing in alphabetical order of their export names, NOT in the order they were exported. This is not done by a story sort function, and didn't happen until recently.

I think this is caused by Webpack. We are using Webpack 5.45.1. Or possibly it's a babel thing. Certainly, I've looked in the bundles that Webpack is building, and I can see that the exports have been sorted into alphabetical order there. Here is part of a main.XXXXXXX.iframe.bundle.js file generated from building the above source file:

This shows the exports listed in alphabetical order, not the order they appeared in the original file. So it's not storybook's fault: it really is preserving the order it gets the stories, but in the built storybooks that order is NOT the original export order from the source files.

[hbmuller]

Also seeing this under the same circumstance - only in prod with webpack 5.
Any ideas on how to go about it?

Sorry for tagging you, @shilman. If you have any pointers, I can investigate further and try to propose a workaround.

Btw, this issue should probably be labelled as webpack5.

[iessa-pragg-ctct]

An interesting side effect that is most likely related to this issue, our org is using DocsPage and the story presented as the 'primary' ends up getting replaced with the alphabetic first story, which for ~50% of our components is not right. I hacked around this for now by providing a custom re-implementation of the docs page (with doc blocks) that explicitly sets which story should be the primary one.

This also affects the ArgsTable, however that is not fixable via the same workaround as the component is hard coded to only support naming a story to use when used via MDX documentation.

[janivo]

I stumbled over the fact that stories that import any .scss files are not sorted properly, while files without style imports work fine.

I can't make sense of this at the moment, but maybe this is helpful to someone.

[davoam]

Also seeing this under the same circumstance - only in prod with webpack 5.
Any ideas on how to go about it?

Sorry for tagging you, @shilman. If you have any pointers, I can investigate further and try to propose a workaround.

Btw, this issue should probably be labelled as webpack5.

We also have the same problem. It's only in production. We use angular 12 and webpack 5

[IanVS]

I've encountered this as well, using the vite builder, in dev. The vite builder uses __namedExportsOrder, perhaps that stopped working correctly?

I've tracked down the first broken version to 6.4.0-alpha.35, which is when the on-demand store was added. Note that this occurs without opting into the new store, however.

An example of the issue can be seen in storybookjs/builder-vite#118.

[shilman]

Yee-haw!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.4.0-beta.30 containing PR #16626 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.

[IanVS]

Confirmed that this indeed fixes the story sorting for the vite builder. 🎉 Thanks!

[shilman]

Thanks for checking @IanVS !! You rock!

[sQVe]

I'm sadly still seeing this issue on @next with webpack@5.

[shilman]

@sQVe Rats!! Do you a have a reproduction repo you can share? If not, can you create one? See how to create a repro. 🙏

[sQVe]

@shilman The repo I'm seeing this on is private and I sadly don't have time to create a reproduction repo, sorry. I solved it by downgrading to webpack@4.

[FBNitro]

@shilman I just grabbed 6.4.0-rc3 and I have the same issue with ordering on webpack5.

start-storybook has everything in export order.
build-storybook has a different order.

It will take me a bit to get a sample together, assuming I can reproduce it elsewhere.

[FBNitro]

@shilman a sample has been created: https://github.com/FBNitro/webpack5-ordering

If you clone that and yarn start-storybook, both stories appear in the same order. if you yarn build-storybook and open the storybook-static\index.html you'll see one is in order and one is not.

I was able to isolate this to an issue of having a function in the story vs the same function being imported from another file.

Let me know if you need anything else.

[IanVS]

I double-checked, and both the dev and production builds using the vite builder are correctly sorted by export order. So it seems like maybe this is specific to the webpack5 builder, rather than storybook core.

[FBNitro]

Curious if anyone has looked at this yet, I've done all the work to move to webpack 5, but I'm holding off until this is resolved.

[fabpico]

Since I've upgraded from an older version (using Webpack 4) to version 6.4.22 using (Webpack 5), I have this phenomena already on dev mode.
The stories all seem to be sorted alphabetically by default now. But the Official docs says By default, stories are sorted in the order in which they were imported., which is not the case anymore.

[shilman]

@fabpico do you have a custom babel config?

[fabpico]

@fabpico do you have a custom babel config?

@shilman I have following config:

Project root

There is no .babelrc.

.storybook/.babelrc

{
  "plugins": ["@babel/plugin-proposal-export-default-from"]
}

Not sure if this is needed anymore. However when I remove this file and restart the dev server, the issue persists.

.storybook/main.js

There is no babel config.

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/preset-create-react-app'],
  core: {
    builder: 'webpack5'
  }
};

[wuifdesign]

I have the same problem, just after running npx create-react-app my-app --template typescript and npx sb init --builder webpack5 in a new folder and than starting up storybook the order will be alphabetic for the predefined stories.

[tmeasday]

@wuifdesign can you post your reproduction somewhere please?

[wuifdesign]

@tmeasday sure i can, but it is just running the two commands in a terminal anywhere.

npx create-react-app my-app --template typescript 
cd my-app
npx sb init --builder webpack5
npm run storybook

Clean repo only run the two commands (no other changes): https://github.com/wuifdesign/storybook-sorting-bug

running npm run storybook will show wrong order (same as for npm run build-storybook).

[riccardo-forina]

It's not a clean repo, but we have the same issue on https://github.com/redhat-developer/app-services-ui-components if it can help debugging

[tmeasday]

Thanks @wuifdesign, I can see the problem. Appreciate the repro even if it's easy, just makes sure we are definitely looking at the same thing, no ambiguity :)

[shilman]

Thanks @tmeasday @wuifdesign . This looks like a bug with the CRA preset for typescript specifically. When I run a new project without TS enabled, sorting works. When I run it with TS enabled, it looks like it deletes Storybook's babel config somehow. I will follow up with @mrmckeb to see if we can get to the bottom of it. Thanks for your patience!

Looks like you are using 6.4. This is fixed in 6.5.

[shilman]

I'm closing this as fixed in 6.5. If you are still encountering this issue after upgrading:

• Please try removing custom babel configs if you have them for troubleshooting
• Please file a new issue with a reproduction

Many thanks for your patience on this! The JS ecosystem is the gift that keeps on giving!

[tmeasday]

@fabpico I can confirm that the posted reproduction was indeed fixed by 6.5. If you have a reproduction that fails in 6.5 we can re-open and take a look at it.

[fabpico]

@tmeasday You should be able to (at least I can) reproduce it on this fresh storybook installation (v6.5.5) since repro creation is not working.

The screenshots prove that the rendered stories are still sorted alphabetically, insted of sorted by how they were defined in order.

Node is v16.15.0 if this info helps.

[tmeasday]

Thanks @fabpico. This seems like a new issue with CRA and recent versions of either SB or the CRA preset. Opening a new issue here: #18322

[elenagarrone]

@tmeasday and @shilman I'm still seeing the issues using Angular 12 and Webpack 5:

    "@storybook/addon-a11y": "^6.5.7",
    "@storybook/addon-essentials": "^6.5.7",
    "@storybook/addons": "^6.5.7",
    "@storybook/angular": "^6.5.7",
    "@storybook/builder-webpack5": "^6.5.7",
    "@storybook/manager-webpack5": "^6.5.7",
    "@storybook/theming": "^6.5.7",

while it should be:

Buttons
  Primary dark
  Primary light
  Secondary dark
  Secondary light
  Icon only
  Icon with text

This is the code I'm running: https://github.com/elenagarrone/canopy/tree/fep-434-angular-upgrade

npm i
npm start

[elenagarrone]

@tmeasday and @shilman could you please reopen?

[shilman]

@elenagarrone can you please open an angular-specific issue to track this? I believe it's fixed for the other frameworks already

[elenagarrone]

@elenagarrone can you please open an angular-specific issue to track this? I believe it's fixed for the other frameworks already

Will do thank you!

[dkilgore-eightfold]

Repros again using webpack 5.76.0

[tmeasday]

@dkilgore-eightfold can you open a new issue with a reproduction please?