[Bug]: Storybook bundle not deterministic

[henkerik]

Describe the bug

The storybook bundle is not build deterministically from the source files. The order the stories in the bundle is determined by the listStories function:

storybook/code/builders/builder-vite/src/list-stories.ts

Line 8 in 1919343

export async function listStories(options: Options) {

This function uses a glob, but the order of the results from a glob are given in no arbitrary order. This results in a Storybook bundle in which the list of story imports may differ from one build to the next.

This breaks artifact based build systems like Bazel or Buck2 because they assume every build action is deterministic.

Fix

This bug in Storybook was easily patched by sorting the list of stories at the end of line:

storybook/code/builders/builder-vite/src/list-stories.ts

Line 28 in 1919343

).reduce((carry, stories) => carry.concat(stories.map(normalizePath)), []);

The sort order doesn't matter, as long as it is consistent from one build to the next.

To Reproduce

Take a large Storybook and build it multiple times from sources. The resulting bundle does not always have the same file hash.

System

No response

Additional context

No response

[valentinpalkovic]

Hi @henkerik,

Thanks for reporting this! These findings are very interesting. Do you mind opening a PR with a fix? Do you know, whether this bug also applies to the webpack5 builder?

[henkerik]

Hey @valentinpalkovic ,

Sure, this is how we fixed (*) this bug:

#24833

(*) were are currently running Storybook with a patch (https://pnpm.io/cli/patch)

[henkerik]

FYI, I don't see any usage of glob in the webpack5 builder, so I don't think this specific bug is present in the webpack5 builder.

[valentinpalkovic]

Great! Thanks for checking the Webpack5 builder!