Issue loading any images in storybook - including default install

[ClaraLeigh]

Summary

Hey friends,

I have this issue where images/assets just seem broken in storybook. Including the default bare bones install of storybookjs with no changes made.

I've tried:

• Different node versions (default to 22)
• A completely blank project install
• A seperate user account
• Older versions of storybookjs

Running Mac M1 Pro, using vue/vite/typescript.

What happens is that it seems to mostly get the url right, but it prepends undefined to the front of every asset url.
When looking at the sources tab in dev tools, I can see where it's trying to load the image, and generally it looks something like this example from the default install:

http://localhost:6006/stories/assets/accessibility.png?import
Content:

export default "undefined/stories/assets/accessibility.png"

If I use something outside the default storybook example, it shows pretty much the correct path to the asset but with the prefix undefined, the same as the above example, so its semi working. If you remove undefined from the path, those images load.

I am more than happy to try and figure this out myself but I just have no idea where to start looking as its clearly not something specific to my user/node version/project as it happens on a blank install. I can only assume that as I can't see another support request about this, there is something funky going on my machine that seems to persist across user accounts and different node installs.

Any help, point in the right direction, hacky workarounds, or suggestions would be greatly appreciated as its impacting my ability to do anything image wise in storybook.

Additional information

No response

Create a reproduction

No response

[ClaraLeigh]

If anyone stumbles on this, I think it could be related to the laravel vite plugin.

I did a hacky patch as I couldn't figure out the cause, basically modified the main.ts, added a viteFinal to the storybookConfig and pushed the following plugin to the plugin array:

const patchUndefinedPathPlugin = () => {
  return {
    name: 'patch-undefined-path',
    enforce: 'post', // run after other transforms
    transform(code, id) {
      // Only process files that actually contain the problematic string.
      if (typeof code === 'string' && code.includes('undefined/resources/js')) {
        const patched = code.replace(/undefined\/resources\/js/g, 'resources/js');
        return patched;
      }
      return code;
    },
  };
};

const config: StorybookConfig = {
  "stories": [
    "../stories/**/*.mdx",
    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)"
  ],
  "addons": [
    getAbsolutePath('@storybook/addon-essentials'),
    getAbsolutePath('@chromatic-com/storybook'),
    getAbsolutePath("@storybook/experimental-addon-test"),
    getAbsolutePath("@storybook/addon-themes")
  ],
  "framework": {
    "name": getAbsolutePath('@storybook/vue3-vite'),
    "options": {}
  },
  viteFinal: async (config) => {    
      config.plugins.push(patchUndefinedPathPlugin());

If you do indeed find this using the same laravel-vite stack, then chances are you'll need a bunch of custom decorators etc to get things running. Something I've started on, so ping me if I don't have a plugin created and I might be able to share some example code.