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.

[fercomunello]

@mansoorkhan96 @gr1zix This is what I'm doing in a Java Web project. Let me know if that helps!

@if (LaunchMode.current() == LaunchMode.DEVELOPMENT)
  <script type="module" src="${Vite.JS_DEV_CLIENT}"></script>
  <script type="module" src="${Vite.SVG_MAP_PLUGIN_DEV_CLIENT}"></script>
@endif

The rendered imports in my main JTE template are:

<script type="module" src="http://localhost:5173/@vite/client"></script>
<script type="module" src="http://localhost:5173/@vite-plugin-svg-spritemap/client__spritemap"></script>

So you need to add __spritemap right after /client to get the source file of the Vite plugin.

For instance, this is my vite.config.js config (omitted unrelated configs):

import pluginSvgMap from "@spiriit/vite-plugin-svg-spritemap";
export default defineConfig(({mode}) => {
  return {
    plugins: [
     pluginSvgMap(
            './src/icons/material/**/*.svg', {
              prefix: 'mat-',
              output: {
                name: 'google-mat-svgmap.svg',
                filename: 'google-mat.[hash][extname]'
              },
              injectSvgOnDev: true,
              svgo: true,
            }
          )
    ],
});

My Vite's manifest.json file looks like the following:

{
  "google-mat-svgmap.svg": {
    "file": "google-mat.ebb77e66.svg",
    "src": "google-mat-svgmap.svg"
  }
}  

Finally to use some SVG symbol in production you'll need to configure your framework to read the manifest.json file and get the bundle's path correctly:

 <a href="/marketplace"
    <svg width="1.2rem" height="1.2rem">
      <use xlink:href="/vitejs/google-mat.ebb77e66.svg#mat-corporate_fare"></use>
    </svg>
    Marketplace
</a>

In your development environment it'll be way simpler:

<use xlink:href="#mat-home"></use>

For some reason, injectSVGOnDev config is deprecated so you should use injectSvgOnDev instead. The plugin will append into the DOM all the mapped SVGs:

<div id="vite-plugin-svg-spritemap" style="display: none;">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <symbol fill="#e8eaed" id="mat-corporate_fare" viewBox="0 -960 960 960">
      <path d="M80-120v-720h400v160h400v560zm80-80h240v-80H160zm0-160h240v-80H160zm0-160h240v-80H160zm0-160h240v-80H160zm320 480h320v-400H480zm80-240v-80h160v80zm0 160v-80h160v80z"></path>
    </symbol>
    <use xlink:href="#mat-corporate_fare" width="24" height="24" y="0"></use>
    <view id="mat-corporate_fare-view" viewBox="0 0 24 24"></view>
  </svg>
</div>

Edit: Yep, it looks like HMR feature is broken for multiple spritemap routes, instead of adding new divs at the bottom of the page it replaces the last injected wrapper (id = vite-plugin-svg-spritemap). A possible workaround would be to put a new script after each spritemap dev module but this is just a workaround, the plugin is still not able to hot reload new added/removed files.

<script type="module">
    const elementId = 'vite-plugin-svg-spritemap';
    const injectedElement = document.getElementById(elementId);
    injectedElement.id = `svgmap-${self.crypto.randomUUID()}`;
</script>

[janein]

I'm having the same issue. As soon as I add multiple routes, I can't get it to work in dev mode as the injections replace each other.

The workaround @fercomunello provided helps if you add this inline script after each injection script. 👍

[Applelo]

Can someone provide me a repo with a simple laravel example to reproduce the problem allowing me to debug this issue :)

[janein]

ℹ️ with the release of 6.0.0, the workaround stopped working.

Until recently I managed to get my setup runnig like this:

{% for namespace in sprite_namespaces %}
    <script type="module" src="/@vite-plugin-svg-spritemap/client__{{ namespace }}"></script>
    {# add this script to assign unique IDs as otherwise the namespaces would overwrite each other #}
    <script type="module">
        const elementId = 'vite-plugin-svg-spritemap';
        const injectedElement = document.getElementById(elementId);
        injectedElement.id = `svgmap-${self.crypto.randomUUID()}`;
    </script>
{% endfor %}

WIth the new version of just /@vite-plugin-svg-spritemap/client, I get only the first namespace. Seems like it doesn't support multiple instances anymore?

With this change it makes it impossible to update for now.

[Applelo]

I would love to fix this issue. As I said before:

Can someone provide me a repo with a simple laravel example to reproduce the problem allowing me to debug this issue :)