HMR feature does not work with Laravel

[mansoorkhan96]

I have tried in many different ways but the HMR would not work in Laravel.

error in console: net::ERR_ABORTED 404 (Not Found)

I have added following in vite.js

import { defineConfig } from 'vite';
import laravel, { refreshPaths } from 'laravel-vite-plugin';
import VitePluginSvgSpritemap from '@spiriit/vite-plugin-svg-spritemap';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: false,
        })
        VitePluginSvgSpritemap('resources/svg/*.svg', {
            injectSVGOnDev: true,
        }),
    ]
});

And in my blade layout where i add app.js.

 @vite([
    'resources/js/app.js',
    '@vite-plugin-svg-spritemap/client',
])

Svg blade component

@props(['name'])

<svg {{ $attributes->merge(['class' => 'icon']) }}>
    <use href="#sprite-{{ $name }}"></use>
    {{-- Production --}}
    {{-- <use href="{{ Vite::asset('spritemap.svg') }}#sprite-{{ $name }}"></use> --}}
</svg>

Screenshots

It seems to generate the HMR script url but does not inject the svg sprites.

[mansoorkhan96]

Also tried following but still not working.

<script>
    {!! Vite::content('@vite-plugin-svg-spritemap/client') !!};
</script>

[mauricekindermann]

I hope this gets fixed, but in the meantime here's a workaround:

VitePluginSvgSpritemap('resources/svg/*.svg', {
    output: {
        filename: 'spritemap.svg',
    },
}),

href="{{ asset('build/assets/spritemap.svg') }}?{{ filemtime(public_path('build/assets/spritemap.svg')) }}#sprite-{{ $name }}"

Remove the hash and cache-bust via query string.

[Applelo]

Seems like a bug with the new multiple instances feature. If you don't use any new features, you can downgrade on 2.2 version.

[mansoorkhan96]

Seems like a bug with the new multiple instances feature. If you don't use any new features, you can downgrade on 2.2 version.

I will try to downgrade to 2.2 and report back. Thanks.

[mansoorkhan96]

Downgraded to 2.2 and still same error.

[gr1zix]

I did a downgrade to version 2.2. HMR started working and icons with injectSVGOnDev: true param were added before </body> tag. But there is still an issue: /__spritemap in the path part still prevents apply of icon

Example:

<svg><use xlink:href="/__spritemap#icon-arrow"></use></svg>

Tested on stack Laravel + InertiaJS + Vue.