Vite builder sorting stories alphabetically instead of by export order

Describe the bug

It doesn’t seem like stories are sorted in the same way as the non-vite builders. Previously it looked like stories were sorted by the order they were exported, so if Default was exported first, it’d show first in the sidebar and in the docs page. This doesn’t seem to be the case with the new Vite builder, if I create Default and Custom, even if Custom comes after Default in the order of exports, Custom will show first. Overriding the sortOrder in the preview.js file doesn’t seem to fix it either.

Working Example

(This could probably be replicated with other setups too)

• Create a nextjs app with npx create-next-app
• Add storybook with npx sb init
• Modify 1-Button.stories.js to have the following stories:

export const Default = () => <Button>Test</Button>
export const Custom = () => <Button>Test</Button>

• Open storybook
• Sidebar and canvas/docs (if you add and configure the docs addon) both show the order of [Default, Custom]

Failing Example (https://github.com/Rixcy/storybook-vite-repro)

• Create a vite app with yarn create @vitejs/app
• Add storybook with the vite loader using npx sb@next init --builder storybook-builder-vite
• Modify Button.stories.tsx to have the following stories:

export const Default = Template.bind({})
export const Custom = Template.bind({})

• Open storybook
• Sidebar and canvas/docs show an order of [Custom, Default] (Expected result: [Default, Custom])

System

  System:
    OS: macOS 11.4
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 14.15.0 - ~/.nvm/versions/node/v14.15.0/bin/node
    Yarn: 1.22.5 - ~/.yarn/bin/yarn
    npm: 6.14.8 - ~/.nvm/versions/node/v14.15.0/bin/npm
  Browsers:
    Chrome: 91.0.4472.106
    Firefox: 88.0.1
    Safari: 14.1.1
  npmPackages:    @storybook/addon-actions: ^6.3.0-rc.11 => 6.3.0-rc.11 
    @storybook/addon-essentials: ^6.3.0-rc.11 => 6.3.0-rc.11 
    @storybook/addon-links: ^6.3.0-rc.11 => 6.3.0-rc.11 
    @storybook/react: ^6.3.0-rc.11 => 6.3.0-rc.11 

[shilman]

@soulsam480 here’s a reference implementation https://github.com/modernweb-dev/web/blob/6c5893cc79c91e82f9aec35d3011c6e33ce878cc/packages/dev-server-storybook/src/shared/stories/injectExportsOrder.ts

[shilman]

The vite builder needs to be updated to use this workaround:

https://github.com/storybookjs/storybook/blob/next/lib/core-client/src/preview/loadCsf.ts#L92-L102

This was introduced to help the @web/dev-server get the right order in the Modern Web integration