overwoob's avatar

Vite SSR, all assets have incorrect URLs and return 404

Hey all, I'm trying to set up Vite SSR following Laravel 9 docs #ssr section

After I updated vite.config.js and used npm run build(vite build && vite build --ssr) everything worked fine, but when I tried to use npm run dev(vite) all of the assets started to return 404, because links for them were incorrectly generated

Example: @vite('resources/css/app.css') -> /resources/css/app.css instead of build/assets/app.bfe649e7.css

I tried to fix this by reverting all changes in the vite.config.js but it did not help.

How can I fix this issue?

Thanks in advance!

vite.config.js

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

export default defineConfig({
    server: {
        port: 90,
    },
    plugins: [
        laravel({
            ssr: 'resources/js/ssr.js',
            input: [
                'resources/css/app.css',
                'resources/css/components-v2.css',
                'resources/js/app.js',
                'resources/js/components-v2.js',
                'resources/js/alpine.js',
            ],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    resolve: {
        alias: {
            vue: 'vue/dist/vue.esm-bundler.js',
        },
    },
});

blade file

<div id="app">
    <test-component></test-component>
</div>
...
@vite('resources/css/app.css')
@vite('resources/css/components-v2.css')
@vite('resources/js/app.js')
@vite('resources/js/components-v2.js')
@vite('resources/js/alpine.js')
0 likes
0 replies

Please or to participate in this conversation.