search

storybookjs / builder-vite

A builder plugin to run and build Storybooks with Vite
MIT License
891 stars 107 forks source link

[Bug] Asset path is not set correctly during development #580

Open prodigy7 opened 1 year ago

prodigy7 commented 1 year ago

What version of vite are you using?

4.0.0

System info and storybook versions

System: OS: Linux 5.15 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish) CPU: (12) x64 Intel(R) Core(TM) i7-10750H CPU @ 2.60GHz Binaries: Node: 18.16.0 - /usr/bin/node Yarn: 1.22.19 - /usr/bin/yarn npm: 9.6.7 - /usr/bin/npm npmPackages: @storybook/addon-essentials: ^7.0.24 => 7.0.24 @storybook/addon-interactions: ^7.0.24 => 7.0.24 @storybook/addon-links: ^7.0.24 => 7.0.24 @storybook/blocks: ^7.0.24 => 7.0.24 @storybook/testing-library: ^0.0.14-next.2 => 0.0.14-next.2 @storybook/vue3: ^7.0.24 => 7.0.24 @storybook/vue3-vite: ^7.0.24 => 7.0.24

Describe the Bug

I am currently developing a project with Laravel, InertisJS, Quasar, VueJS3 and have included Storybook here. I have worked out most of the basics so that it works as I had hoped. However, I currently have a problem for which I cannot find a solution.

I have the following layout:

// resources/js/Layouts/AuthenticatedLayout.vue
<script setup>
</script>

<template>
    <q-layout view="hHh lpR fFf" class="bg-grey-1">
        <q-header elevated class="bg-primary text-white">
            <q-toolbar style="background-color: #1DB954;">
                <Link href="/" style="text-decoration: none; color: white">
                    <q-toolbar-title>
                        <q-avatar square size="35px">
                            <img src="@images/test.png">
                        </q-avatar>
                        Spot-AI
                    </q-toolbar-title>
                </Link>
                <q-space/>
                <q-btn outline color="standard" :href="route('logout')">{{ user.name }} logout</q-btn>
            </q-toolbar>
        </q-header>

        <q-page-container>
            <!-- Page Content -->
            <main>
                <div class="row items-start q-ma-lg">
                    <div class="col-md-12 bg-white shadow-1">
                        <div class="q-pa-md q-gutter-sm">
                            <slot />
                        </div>
                    </div>
                </div>
            </main>
        </q-page-container>
        |{{ $page }}|
    </q-layout>
</template>

<script>
import { Link } from '@inertiajs/inertia-vue3'

export default {
    components: {
        Link
    },
    computed: {
        user() {
            return this.$page.props.auth.user
        }
    }
}
</script>

That's the story:

// resources/js/Layouts/AuthenticatedLayout.stories.js
import AuthenticatedLayout from './AuthenticatedLayout.vue';

// More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
export default {
  component: AuthenticatedLayout,
  tags: ['autodocs'],
  argTypes: {
  },
};

// More on writing stories with args: https://storybook.js.org/docs/vue/writing-stories/args
export const Default = {
  args: {
  },
};

The .storybook/main.js

// .storybook/main.js
const config = {
    stories: [
        "../resources/js/**/*.mdx",
        "../resources/js/**/*.stories.@(js|jsx|ts|tsx)"
    ],
    addons: [
        "@storybook/addon-links",
        "@storybook/addon-essentials",
        "@storybook/addon-interactions",
    ],
    framework: {
        name: "@storybook/vue3-vite",
        options: {},
    },
    docs: {
        autodocs: "tag",
    }
};
export default config;

The .storybook/preview.js

// .storybook/preview.js
import "@quasar/extras/roboto-font/roboto-font.css";
import "@quasar/extras/material-icons/material-icons.css";
import "@quasar/extras/animate/fadeInUp.css";
import "@quasar/extras/animate/fadeOutDown.css";
import "@quasar/extras/animate/fadeInRight.css";
import "@quasar/extras/animate/fadeOutRight.css";

import "quasar/dist/quasar.sass";

// import "../src/assets/css/global.scss";

import { setup } from "@storybook/vue3";
import { Quasar } from "quasar";
import { ZiggyVue } from '../vendor/tightenco/ziggy/dist/vue.m';
import { Ziggy } from '../resources/js/ziggy.js'

setup((app) => {
    app.use(Quasar, {plugins:{}});
    app.use(ZiggyVue, Ziggy);
    app.config.globalProperties.$page = {
        props: {
            auth: {
                user: 'SpotifyUser'
            }
        }
    };
});

/** @type { import('@storybook/vue3').Preview } */
export const preview = {
    parameters: {
        actions: { argTypesRegex: "^on[A-Z].*" },
        controls: {
            matchers: {
                color: /(background|color)$/i,
                date: /Date$/,
            },
        },
    },
};

export default preview;

The vite.config.js:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

import { fileURLToPath, URL } from 'node:url'

// Added for importing quasar assets
import { quasar, transformAssetUrls } from '@quasar/vite-plugin'

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
        // Added for loading quasar related things
        quasar({sassVariables: 'resources/css/quasar-variables.sass'})
    ],
    /***
     * Workaround so path is set right for assets / See https://laracasts.com/discuss/channels/vit
     e/laravel-vite-issue
     ***/
    server: {
        hmr: {
            host: 'localhost',
        },
    },
    resolve: {
        alias: {
            '@images': fileURLToPath(new URL('./resources/js/Images', import.meta.url))
        }
    }
});

My problem now is that when I start npm run storybook and then call the layout, I see in the developer console from the browser that the following files could not be loaded:

:6006/undefined/node_modules/@quasar/extras/roboto-font/web-font/KFOlCnqEu92Fr1MmEU9fBBc-.woff:1     GET http://localhost:6006/undefined/node_modules/@quasar/extras/roboto-font/web-font/KFOlCnqEu92Fr1MmEU9fBBc-.woff net::ERR_ABORTED 404 (Not Found)
:6006/undefined/node_modules/@quasar/extras/roboto-font/web-font/KFOmCnqEu92Fr1Mu4mxM.woff:1     GET http://localhost:6006/undefined/node_modules/@quasar/extras/roboto-font/web-font/KFOmCnqEu92Fr1Mu4mxM.woff net::ERR_ABORTED 404 (Not Found)
spotify.png:1     GET http://localhost:6006/undefined/resources/js/Images/spotify.png 404 (Not Found)
Image (async)

The interesting thing is: the layout itself works when I call npm run dev or npm run build. It also works when I call npm run build-storybook and then display the build via a web server. I.e. in the following three cases the assets are loaded correctly:

Not here:

Currently, this does not seem logical to me. What is going wrong here? Seems like a bug to me

Link to Minimal Reproducible Example

No response

Participation