Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
1 task
prodigy7 opened this issue Jul 2, 2023 · 0 comments
Open
1 task

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

prodigy7 opened this issue Jul 2, 2023 · 0 comments
Labels
bug Something isn't working

Comments

@prodigy7
Copy link

prodigy7 commented Jul 2, 2023

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:

  • npm run dev
  • npm run build
  • npm run build-storybook

Not here:

  • npm run storybook

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

  • I am willing to submit a pull request for this issue.
@prodigy7 prodigy7 added the bug Something isn't working label Jul 2, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant