How to deploy Storybook with Vite on Cloudflare Workers?

[kpyszkowski]

Summary

I'd like to deploy Storybook build on Cloudflare Workers. I couldn't find any example repos or guides. Cloudflare's Vite plugin causes Storybook to throw error on build and dev.

Looks like Cloudflare team already addressed some related issues but it's not working at all.

Additional information

> storybook dev -p 6006

storybook v9.1.2

info => Starting manager..
No story files found for the specified pattern: stories/*.stories.tsx
info => Starting preview..
failed to load config from /Users/kpyszkowski/asdf/apps/storybook/vite.config.ts
=> Failed to build the preview
TypeError: Class extends value undefined is not a constructor or null

storybook: 9.1.2
vite: 5.4.19
@cloudflare/vite-plugin: 1.11.6

Create a reproduction

No response

[dosubot[bot]]

Hi @kpyszkowski! I'm Dosu and I’m helping the storybook team.

There aren't any official guides or example repos for deploying Storybook with Vite on Cloudflare Workers. The error you're seeing—TypeError: Class extends value undefined is not a constructor or null—is likely due to incompatibilities between Storybook, Vite, and the Cloudflare Vite plugin. The Cloudflare Vite plugin isn't officially supported by Storybook's Vite builder and can cause issues like this, often due to ESM/CJS conflicts or plugin order problems in the Storybook Vite context (ref).

Storybook's Vite builder merges your Vite config automatically, but you can customize or remove problematic plugins using the viteFinal function in your .storybook/main.js or .storybook/main.ts. For example, you can filter out the Cloudflare plugin for Storybook runs:

export default {
  // ...other config
  async viteFinal(config) {
    // Remove Cloudflare plugin if present
    config.plugins = (config.plugins || []).filter(
      (plugin) => plugin?.name !== 'cloudflare'
    );
    return config;
  },
};

(docs)

For deployment, the typical approach is to run build-storybook to generate a static site (storybook-static), then serve those static files from Cloudflare Workers. You don't need the Cloudflare Vite plugin for this—just a Worker script that serves static assets from KV, R2, or the file system. If your build is missing an index.html, you may need to force HTML output in your viteFinal config (example).

If you need the Cloudflare Vite plugin for your main app, consider conditionally including it only when not running Storybook. There are no known workarounds for using the plugin directly with Storybook's Vite builder at this time.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[kpyszkowski]

It can be done without touching Cloudflare's Vite plugin. Storybook builds static HTML and it can be served as usual static content.
The only significant change is worker entry point which points requests to assets bucket. I placed it in .storybook but can be anywhere:

• .storybook/worker.js:

  export default {
    async fetch(request, env) {
      return env.ASSETS.fetch(request);
    },
  };

• wrangler.jsonc:

  {
    "name": "storybook", // can be any
    "compatibility_date": "2025-08-18",
    "assets": {
      "directory": "./storybook-static", // default build output directory
      "binding": "ASSETS",
    },
    "main": "./.storybook/worker.js", // worker entry point
  }