[Bug]: Storybook failed to load iframe.html when publishing

[hieucd04]

Describe the bug

After updating storybook to 10.2.0, the below error started to appear in the console and storybook was not working.
Notice the missing / before the iframe.html.

localhost:6006 worked fine. This issue only happened when deploying the output of yarn storybook build to server.

Reverting storybook back to 10.1.11 fixed the issue for me.
None of the 10.2.* versions work on my side.

Reproduction link

I don't have time to create a repro. I only come across this issue when doing regular npm update works. Hopefully it gets fixed soon. Sorry for this inconvenience.

Reproduction steps

No response

System

System:
|  OS: Windows 11 10.0.26200
|  CPU: (32) x64 13th Gen Intel(R) Core(TM) i9-13900K
|  Binaries:
|  Node: 24.12.0 - C:\Program Files\nodejs\node.EXE
|  Yarn: 1.22.22 - C:\Users\hieucd\AppData\Roaming\npm\yarn.CMD
|  npm: 11.6.2 - C:\Program Files\nodejs\npm.CMD <----- active
|  Browsers:
|  Chrome: 144.0.7559.135
|  Edge: Chromium (140.0.3485.54)
|  Firefox: 144.0 - C:\Program Files\Mozilla Firefox\firefox.exe

Additional context

No response

[dosubot]

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

This is a confirmed regression in v10.2.0. When accessing Storybook via URLs ending in /index.html (common in static hosting deployments), the path concatenation logic incorrectly creates URLs like storybookiframe.html instead of /iframe.html.

The fix is available in v10.3.0-alpha.1. You can try upgrading to the latest 10.x release, or continue using v10.1.11 until a stable release with the fix is available.

See #33629 for the tracking issue.

To reply, just mention @dosu.

---

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

   

[blksnk]

Hi, I'm getting a similar issue when accessing our storybook build. We host ours at the /design-system root, and while the manager shell loads, none of the stories do. The issue seems to be a regression in how the iframe's src gets generated.

We initially detected the issue while running storybook v10.2.2, where the malformed preview url was something like /design-systemiframe.html (missing /).
After upgrading to v10.2.8, we get another error: now our prefix is completely absent from the iframe's src, it simply starts with /iframe.html.

Here's a snippet of our main.ts config file if it helps:

{
  // ...
  async viteFinal(config, configType) {
    if (configType === "PRODUCTION") {
      config.base = "/design-system/";
      config.publicDir = "/design-system";
    }
    // ...
    return config
  },
  // ...
  managerHead: (head, { configType }) => {
    if (configType === "PRODUCTION") {
      return `
        ${head}
        <base href="/design-system/">
      `;
    }

    return head;
  },
  // ...
}

The complete configuration and repository can be found here.

---

It seems the changes made in v10.2 and the subsequent fix in v10.2.3 created another regression. It is my understanding that the fix meant to handle an edge case where storybook was directly accessed via /index.html. Maybe we could handle this single case while still preserving base path changes.

[darshjme-codes]

Triage note:

Bug: Storybook fails to load iframe.html when published (production build).

Labels applied: bug, needs triage ✓

Suggested additional labels:

• builder: webpack or builder: vite
• deployment

Common causes:

• Incorrect base URL configuration
• Missing static file copying
• Asset path resolution issues

Environment needed: Build tool, hosting platform, config