Running Storybook dev causes mime type issue

[haapti]

Summary

im running Storybook 9.1.2 for nextjs-vite.

when running storybook dev server, im getting this error on browser console and none of the stories are displaying, only white pages with loading animation.

Failed to load module script: Expected a JavaScript-or-Wasm module script but the server responded with a MIME type of "video/mp2t". Strict MIME type checking is enforced for module scripts per HTML spec.

no errors in build logs.

found an old discussion about this error on vitejs vitejs/vite#9332

Additional information

No response

Create a reproduction

No response

[dosubot[bot]]

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

This MIME type error usually means the dev server is serving a JavaScript module with the wrong Content-Type, often due to a misconfiguration or plugin interference in Vite. Storybook delegates module file serving to Vite, and there’s no custom MIME type logic in Storybook’s Vite or Next.js integrations—so the issue is likely in Vite’s config or a plugin conflict¹.

Here’s how you can debug and potentially resolve it:

• Open your browser’s network tab and check which file is being served as "video/mp2t". This can help pinpoint the problematic route or asset.
• Review your Vite and Storybook config for custom staticDirs, rewrites, or plugins that might affect file serving.
• Try disabling non-essential Vite plugins to see if one is interfering with MIME type handling.
• Clear your cache and restart the dev server.
• If you’re using any custom server middleware or proxy config, double-check those for route or MIME type overrides.

If the issue persists, you may want to isolate the problem by starting with a minimal Storybook + Next.js + Vite setup and gradually reintroducing your config and plugins.

To reply, just mention @dosu.

---

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

Footnotes

1. Storybook Vite builder delegates MIME type handling to Vite ↩

[haapti]

thank you.

noticed that there is http://localhost:6006/fonts/index.ts what has content type video/mp2t.

i wonder why the file is not compiled to js?

import localFont from "next/font/local";

export const manrope = localFont({
  src: [
    {
      path: "./Manrope-Bold.woff2",
      weight: "700",
      style: "bold",
    },
    {
      path: "./Manrope-Medium.woff2",
      weight: "500",
      style: "normal",
    },
    {
      path: "./Manrope-SemiBold.woff2",
      weight: "600",
      style: "semi-bold",
    },
  ],
  variable: "--font-manrope",
});

export const rayo = localFont({
  src: [
    {
      path: "./Rayomabrypro-bold.woff2",
      weight: "700",
      style: "bold",
    },
    {
      path: "./Rayomabrypro-light.woff2",
      weight: "300",
      style: "light",
    },
  ],
  variable: "--font-rayo",
});

[dosubot[bot]]

The reason your /fonts/index.ts file is not compiled to JS and is served with the wrong MIME type is because it's in a static directory (configured via staticDirs). Storybook serves files in staticDirs as raw static assets—they aren't processed or compiled by Vite or Storybook, so TypeScript files are delivered as-is, which causes MIME type errors when the browser expects a JS module¹².

To fix this, move your font config TypeScript file (index.ts) out of any staticDirs and into your main source directory (like src). Only put actual static assets (such as .woff2 font files) in staticDirs or public. The code that imports and configures fonts must be handled by Vite's build pipeline to be properly compiled and served as JS.

To reply, just mention @dosu.

---

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

Footnotes

1. Storybook Docs: staticDirs serve files as static assets, not compiled code ↩

2. Storybook core server code: staticDirs files are served raw, not compiled ↩