Storybook Globals are not applied when using `rolldown-vite`

[TheAlexLichter]

Describe the bug

When building a Storybook with rolldown-vite (here the plain react + ts example), it fails after the build because the globals can't be applied.

Reproduction

https://github.com/TheAlexLichter/rolldown-vite-reproductions/tree/storybook-globals

Steps to reproduce

After cloning the repo:

0. pnpm i
1. pnpm storybook:build
2. Serve the storybook instance via pnpm storybook:serve
3. Open on localhost:3000
4. See error in the console

When running it via pnpm storybook:dev things work as expected. Same without rolldown-vite.

System Info

System:
    OS: macOS 15.3.2
    CPU: (12) arm64 Apple M2 Max
    Memory: 95.63 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.15.0 - /usr/local/bin/node
    Yarn: 1.22.22 - /opt/homebrew/bin/yarn
    npm: 10.9.2 - /usr/local/bin/npm
    pnpm: 10.10.0 - /opt/homebrew/bin/pnpm
    bun: 1.0.30 - /opt/homebrew/bin/bun
  Browsers:
    Chrome: 136.0.7103.114
    Safari: 18.3.1
  npmPackages:
    @vitejs/plugin-react: ^4.4.1 => 4.4.1 
    vite: ^6.3.5 => 6.3.5

Used Package Manager

pnpm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs and the Rolldown-related guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[sapphi-red]

It seems there's a bug in rolldown and a misconfiguration on storybook side.

---

The entrypoint imports virtual:/@storybook/builder-vite/vite-app.js . The code looks like below (removed some unrelated code).

import { setup } from 'storybook/internal/preview/runtime';
setup();

import * as entry_preview_docs_19280 from "…/rolldown-vite-reproductions-storyblok-globals/node_modules/.pnpm/…/node_modules/@storybook/react/dist/entry-preview-docs.mjs";

storybook/internal/preview/runtime resolves to ./node_modules/.pnpm/…/node_modules/storybook/dist/preview/runtime.js that has a code like below.

var k = (() => {
  let e;
  return typeof window < "u" ? e = window : typeof globalThis < "u" ? e = globalThis : typeof global < "u" ? e = global : typeof self < "u" ?
  e = self : e = {}, e;
})();
// src/preview/globals/globals.ts
var Nb = {
  "@storybook/global": "__STORYBOOK_MODULE_GLOBAL__",
  "storybook/test": "__STORYBOOK_MODULE_TEST__",
  "storybook/actions": "__STORYBOOK_MODULE_ACTIONS__",
  "storybook/preview-api": "__STORYBOOK_MODULE_PREVIEW_API__",
  "storybook/internal/channels": "__STORYBOOK_MODULE_CHANNELS__",
  "storybook/internal/client-logger": "__STORYBOOK_MODULE_CLIENT_LOGGER__",
  "storybook/internal/core-events": "__STORYBOOK_MODULE_CORE_EVENTS__",
  "storybook/internal/preview-errors": "__STORYBOOK_MODULE_CORE_EVENTS_PREVIEW_ERRORS__",
  "storybook/internal/types": "__STORYBOOK_MODULE_TYPES__",
  // @deprecated TODO: Remove in 9.1
  "storybook/internal/preview-api": "__STORYBOOK_MODULE_PREVIEW_API__"
}, px = Object.keys(Nb);
function Lxe() {
  px.forEach((e) => {
    k[Nb[e]] = ZV[e];
  }), k.sendTelemetryError = (e) => {
    k.__STORYBOOK_ADDONS_CHANNEL__.emit(qb, rz(e));
  }, k.addEventListener("error", Nxe), k.addEventListener("unhandledrejection", jxe), QV();
}
Lxe();
export {
  Lxe as setup
};

…/rolldown-vite-reproductions-storyblok-globals/node_modules/.pnpm/…/node_modules/@storybook/react/dist/entry-preview-docs.mjs is the module that contains const { UnknownArgTypesError: br } = __STORYBOOK_MODULE_CORE_EVENTS_PREVIEW_ERRORS__; (transformed from import { UnknownArgTypesError as br } from "storybook/internal/preview-errors";) where the error happens.

__STORYBOOK_MODULE_CORE_EVENTS_PREVIEW_ERRORS__ is defined by the Lxe(); call in storybook/internal/preview/runtime. Lxe() call defines a global variable so this is a side effect. (Note that setup(); in virtual:/@storybook/builder-vite/vite-app.js is called after all the imports are loaded, so it's not affect here).
But storybook sets sideEffects: false in the package.json. This means the bundler can ignore that Lxe() call and can move the module (because modules without a side effect can be reordered without changing the semantics). This would break the output.

That said, even if sideEffects field is not set, rolldown seems to be not generating the output correctly.
Here's a simplified reproduction: https://stackblitz.com/edit/github-nci4o6nk-ps3o8u9e?file=dist%2Findex.js
node src/index.js and node dist/index.js behaves differently.
It seems esbuild has the same incorrect behavior (bundler.sxzz.dev).

[sapphi-red]

rolldown/rolldown#4617

[sapphi-red]

Probably dynamic import behaves similar to a normal entrypoint in esbuild, so the issue is same with evanw/esbuild#399.

[JReinhold]

This is an interesting problem. At first I thought we could just remove the side effect and require builders to call setup() like the Vite builder does, but as you say

Note that setup(); in virtual:/@storybook/builder-vite/vite-app.js is called after all the imports are loaded, so it's not affect here

We need the globals to be defined immediately at module initialization time.

I really dont wanna set sideEffects to true in the package.json as I'd expect that to have wide spread consequences - its strange that it can't be set on an per-entry-point-basis?

If we change the import from import { setup } from 'storybook/internal/preview/runtime' to just import 'storybook/internal/preview/runtime' would that instruct the bundler that this is a side-effectful module?

[sapphi-red]

At first I thought we could just remove the side effect and require builders to call setup() like the Vite builder does

If you extract the code that require setup() to be called to a separate module, then that would be called after setup() is called. For example,

// builderEntry.js

import './builderSetup.js'
import './builderMain.js'

// builderSetup.js
import { setup } from 'storybook/internal/preview/runtime'
setup()

// builderMain.js
doPostSetupThings()

I think this is one option.

I really dont wanna set sideEffects to true in the package.json as I'd expect that to have wide spread consequences - its strange that it can't be set on an per-entry-point-basis?

You can use an array of globs to specify it per-file. In this case, sideEffects: ['./dist/preview/runtime.js'] should work.

If we change the import from import { setup } from 'storybook/internal/preview/runtime' to just import 'storybook/internal/preview/runtime' would that instruct the bundler that this is a side-effectful module?

This won't change the behavior (webpack/webpack#6571).

[JReinhold]

At first I thought we could just remove the side effect and require builders to call setup() like the Vite builder does

If you extract the code that require setup() to be called to a separate module, then that would be called after setup() is called. For example,

// builderEntry.js

import './builderSetup.js'
import './builderMain.js'

// builderSetup.js
import { setup } from 'storybook/internal/preview/runtime'
setup()

// builderMain.js
doPostSetupThings()
I think this is one option.

Hmm so essentially instead of generating:

// vite-app.js

import { setup } from "/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/storybook_internal_preview_runtime.js?v=2e77dd58";

setup();

const { composeConfigs, PreviewWeb } = __STORYBOOK_MODULE_PREVIEW_API__;

import * as entry_preview_9306 from "/node_modules/@storybook/react/dist/entry-preview.mjs?v=2e77dd58";
import * as entry_preview_argtypes_10230 from "/node_modules/@storybook/react/dist/entry-preview-argtypes.mjs?v=2e77dd58";
import * as preview_5576 from "/dist/preview.js";
import * as preview_6200 from "/.storybook/preview.ts";

we'd put the latter part into a sub-module, because those are the one that depends on the globalization happening in setup():

// vite-app.js

import { setup } from "/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/storybook_internal_preview_runtime.js?v=2e77dd58";

setup();

import * as allPreviewEntries from 'all-preview-entries.js';

// all-preview-entries.js

const { composeConfigs, PreviewWeb } = __STORYBOOK_MODULE_PREVIEW_API__;

export * as entry_preview_9306 from "/node_modules/@storybook/react/dist/entry-preview.mjs?v=2e77dd58";
export * as entry_preview_argtypes_10230 from "/node_modules/@storybook/react/dist/entry-preview-argtypes.mjs?v=2e77dd58";
export * as preview_5576 from "/dist/preview.js";
export * as preview_6200 from "/.storybook/preview.ts";

Or would we also need to extract the former part into a separate module for this to take effect? so:

// vite-app.js
import 'setup.js';
import * as allPreviewEntries from 'all-preview-entries.js';

// setup.js

import { setup } from "/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/storybook_internal_preview_runtime.js?v=2e77dd58";

setup();

// all-preview-entries.js

const { composeConfigs, PreviewWeb } = __STORYBOOK_MODULE_PREVIEW_API__;

export * as entry_preview_9306 from "/node_modules/@storybook/react/dist/entry-preview.mjs?v=2e77dd58";
export * as entry_preview_argtypes_10230 from "/node_modules/@storybook/react/dist/entry-preview-argtypes.mjs?v=2e77dd58";
export * as preview_5576 from "/dist/preview.js";
export * as preview_6200 from "/.storybook/preview.ts";

You can use an array of globs to specify it per-file. In this case, sideEffects: ['./dist/preview/runtime.js'] should work.

Oh I didn't know that, this might be the simplest solution for now. I didn't think to look in the Webpack documentation for this API. 😅

[sapphi-red]

// vite-app.js

import { setup } from "/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/storybook_internal_preview_runtime.js?v=2e77dd58";

setup();

import * as allPreviewEntries from 'all-preview-entries.js';

// all-preview-entries.js

const { composeConfigs, PreviewWeb } = __STORYBOOK_MODULE_PREVIEW_API__;

export * as entry_preview_9306 from "/node_modules/@storybook/react/dist/entry-preview.mjs?v=2e77dd58";
export * as entry_preview_argtypes_10230 from "/node_modules/@storybook/react/dist/entry-preview-argtypes.mjs?v=2e77dd58";
export * as preview_5576 from "/dist/preview.js";
export * as preview_6200 from "/.storybook/preview.ts";

This won't work because the statements in all-preview-entries.js will be executed before setup(). All import statements are hoisted so the place you write setup() or const { composeConfigs, PreviewWeb } = __STORYBOOK_MODULE_PREVIEW_API__ doesn't affect the execution order.

// vite-app.js
import 'setup.js';
import * as allPreviewEntries from 'all-preview-entries.js';

// setup.js

import { setup } from "/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/storybook_internal_preview_runtime.js?v=2e77dd58";

setup();

// all-preview-entries.js

const { composeConfigs, PreviewWeb } = __STORYBOOK_MODULE_PREVIEW_API__;

export * as entry_preview_9306 from "/node_modules/@storybook/react/dist/entry-preview.mjs?v=2e77dd58";
export * as entry_preview_argtypes_10230 from "/node_modules/@storybook/react/dist/entry-preview-argtypes.mjs?v=2e77dd58";
export * as preview_5576 from "/dist/preview.js";
export * as preview_6200 from "/.storybook/preview.ts";

On the other hand, this would work because the execution order of import statements does not change (while the execution order between normal statements and import statements changes due to hoisting).

[JReinhold]

On the other hand, this would work because the execution order of import statements does not change (while the execution order between normal statements and import statements changes due to hoisting).

Ah I see now, yeah that makes sense!

You can use an array of globs to specify it per-file. In this case, sideEffects: ['./dist/preview/runtime.js'] should work.

I tried to make this change directly in the reproduction listed above, but didn't see any effect from it. I'm assuming it's because rolldown/rolldown#4617 still needs to be fixed first?

[sapphi-red]

Yeah, rolldown/rolldown#4617 needs to be fixed. A workaround would be to set build.rollupOptions.experimental.strictExecutionOrder: true.

[sapphi-red]

The rolldown version that the current rolldown-vite uses should work fine with the option above. But if you override the rolldown version to a newer one, you'll probably encounter (rolldown/rolldown#4684).