[Bug]: runtime and iframe 404 on first load

[coryphil]

Describe the bug

I am trying to upgrade from storybook 8.3.5 to 8.5.1. When I upgrade and run storybook, it opens the browser and stays on the loading spinner with the errors shown in the screenshot. It corrects itself on refresh. I have tried some other suggestions from past issues like vite --force, tracking down caches and removing, and others but those do not remove the issues. This issue occurs for all versions higher than 8.3.5 for me.

Reproduction link

no

Reproduction steps

1. upgrade to any storybook version higher than 8.3.5
2. run storybook dev
3. see no other errors except those shown in the console and loading spinner.

System

Storybook Environment Info:

  System:
    OS: macOS 14.7
    CPU: (12) arm64 Apple M3 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 23.5.0 - /opt/homebrew/bin/node
    npm: 10.9.2 - /opt/homebrew/bin/npm <----- active
    pnpm: 9.12.1 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 129.0.6668.90
    Safari: 17.6
  npmPackages:
    @storybook/addon-a11y: 8.4.7 => 8.4.7 
    @storybook/addon-essentials: 8.4.7 => 8.4.7 
    @storybook/addon-interactions: 8.4.7 => 8.4.7 
    @storybook/addon-links: 8.4.7 => 8.4.7 
    @storybook/addon-onboarding: 8.4.7 => 8.4.7 
    @storybook/blocks: 8.4.7 => 8.4.7 
    @storybook/builder-vite: 8.4.7 => 8.4.7 
    @storybook/react: 8.4.7 => 8.4.7 
    @storybook/react-vite: 8.4.7 => 8.4.7 
    @storybook/test: 8.4.7 => 8.4.7 
    @storybook/test-runner: 0.19.1 => 0.19.1 
    chromatic: 11.10.4 => 11.10.4 
    storybook: 8.4.7 => 8.4.7 
    storybook-addon-tailwind-autodocs: 1.0.8 => 1.0.8 
    storybook-react-i18next: 3.1.7 => 3.1.7 

Additional context

No response

[MatheoJaouen]

This getAbsolutePath seems to fix it but we are facing other issues on our side as well,

import path from 'path';
import type { StorybookConfig } from '@storybook/react-vite';

function mockDependencies(config) {
    return {
        ...config.resolve,
        alias: {
            ...config.resolve.alias,
            fs: resolve(__dirname, './mocks/fs.js'),
        },
    };
}

const getAbsolutePath = (packageName: string): any =>
    path.dirname(require.resolve(path.join(packageName, 'package.json')));

const config: StorybookConfig = {
    stories: ['../src/stories/**/*.stories.tsx'],

    addons: [
        '@storybook/addon-essentials',
        '@storybook/addon-storysource',
        'storybook-dark-mode',
        '@chromatic-com/storybook',
    ],

    framework: {
        name: getAbsolutePath('@storybook/react-vite'),
        options: {},
    },

    viteFinal: async (c

[coryphil]

@MatheoJaouen Adding getAbsolutePath does not fix it for me. Thanks for the suggestion.

[tyler36]

Same issue for me after updating Storybook from 8.3.2 to 8.5.2

I'm following the Storybook for Vue tutorial

[valentinpalkovic]

Can you please give us more information about what logs are logged to the terminal during startup?

[crimx]

Can you please give us more information about what logs are logged to the terminal during startup?

You can reproduce the issue with this project.

Terminal Logs

> storybook dev -p 6006

@storybook/core v8.5.3

info => Serving static files from ././.storybook/public at /
info => Starting manager..
WARN No story files found for the specified pattern: src/**/*.mdx
info => Starting preview..
info Using tsconfig paths for react-docgen
╭────────────────────────────────────────────────────╮
│                                                    │
│   Storybook 8.5.3 for react-vite started           │
│   128 ms for manager and 1.4 s for preview         │
│                                                    │
│    Local:            http://localhost:6006/        │
│    On your network:  http://192.168.1.125:6006/    │
│                                                    │
╰────────────────────────────────────────────────────╯

Console Logs

[HerbCaudill]

Here's another repro FWIW: https://github.com/HerbCaudill/react-router-vite-storybook-test

This the most bare-bones possible repo that combines Vite, React Router v7, and Storybook (which seems like it should be a pretty common combination going forward).

This repo was created using these libraries' default initialization packages with a couple of tweaks to make them play nice together.

1. Create a new Vite project

   pnpm create vite 

   (Choose React and React Router v7)

2. Initialize Storybook.

   npx storybook@latest init

3. In package.json, downgrade to React 18.

4. In react-router.config.ts, set SSR to false.

5. Create a storybook-specific Vite config file that omits the reactRouter plugin, and point to that in .storybook/main.ts.

What I see on first load roughly matches what others have reported here, although it's very inconsistent, which would suggest a race condition. Here are two different runs (deleting node_modules and reinstalling each time).

I can generally get it to show the stories after refreshing the browser a couple of times, although I consistently continue to get the 404 for runtime.js.

[joshrobertsv2]

We are experiencing the same issue after jumping up to "storybook": "^8.5.4",