[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?