mcansh / vite-plugin-svg-sprite

this vite plugin will transform any imported svg files and combine them into a cachable svg sprite sheet
https://www.npmjs.com/package/@mcansh/vite-svg-sprite-plugin
21 stars 1 forks source link

The spritesheet url sometimes comes with wrong data #39

Open lichomonjelat opened 7 months ago

lichomonjelat commented 7 months ago

Hi there @mcansh! I'been implementing your plugin on my remix js app, locally it works fine, each icon renders it's all good, but when the time for testing in the qa environment arrived, we found out several problems, the icons aren't loading correctly, some of them do, but others don't, i have a few hydration errors on my console (maybe it's a problem on my end) and i keep getting a 404 on the spritesheet, sometimes the request is ok (200) but most of the time it does not work. It tries to get the default spritesheet without the hash and it keeps getting 404, maybe that's a reason why the icons are not rendering correctly. And other thing that i've found out is when you make a navigation, this error happens too, it tries to get the default spritesheet name instead of the hashed one.

Captura de pantalla 2024-04-30 a la(s) 10 39 04 a  m Captura de pantalla 2024-04-30 a la(s) 10 42 19 a  m
mcansh commented 7 months ago

hi @lichomonjelat do you have a reproduction repo? i know you said in your QA environment it happens, but does it also happen locally when you do npm run build and npm run start?

lichomonjelat commented 7 months ago

hi @lichomonjelat do you have a reproduction repo? i know you said in your QA environment it happens, but does it also happen locally when you do npm run build and npm run start?

Hi @mcansh! yes, it happens too if i run the prod build locally Captura de pantalla 2024-05-01 a la(s) 9 24 10 a  m

but if i hit refresh, it does load it from the cache Captura de pantalla 2024-05-01 a la(s) 9 24 48 a  m

jcheese1 commented 3 months ago

@lichomonjelat this is what I have for the moment inside vite.config.js:

  build: {
    rollupOptions: {
      output: {
        assetFileNames: (file) => {
          if (file.name.endsWith(".svg")) {
            return "assets/[name].[ext]";
          }
          return 'assets/[name]-[hash].[ext]';
        }
      }
    }
  },

this will not append the hash if its a svg.

mcansh commented 3 months ago

definitely something happening in the writeBundle method were im going through the emitted files and updating the sprite url, havent had a chance to look into it unfortunately. also need to tweak something for the warning about emitFile and serve mode, but that should be unrelated to this issue