vite icon indicating copy to clipboard operation
vite copied to clipboard

Update v4 migration guide per breaking change with data URLs

Open msorens opened this issue 1 month ago • 1 comments

Description

Adding this note to the migration guide because it took me quite some time to track it down when migrating from vite v4.5.3 to v5.2.11. My hope is that I can save others the aggravation.

Problem

After I upgraded from v4.5.3 to v5.2.11 everything in my application seemed to work except that small SVG assets were broken because they were now rendering as data URLs.

My first attempt at figuring out why was unsuccessful so I reverted the migration. I came back several weeks later to try again and this time tracked it down to the build.assetsInlineLimit configuration setting (https://vitejs.dev/config/build-options.html#build-assetsinlinelimit). By disabling that (setting it to zero) I no longer had data URLs and then all my SVG assets loaded successfully.

I have run trials...

  • with absolute URLs and relative URLs
  • with CDN base URL and without
  • in Chrome and in Firefox None of those made a difference. Bottom line: When I did not have assetsInlineLimit in my configuration file, with vite 4.5.3 there were no data URLs (and thus no failing images), while with vite 5.2.11 there were data URLs (and thus failing images).

Results

Expected:

<img src="/assets-new/ship-ZuEbWyOy.svg" class="logo"> 

-- OR --

<img src="https://dl.myBaseUrl.com/ui/assets-new/ship-ZuEbWyOy.svg" class="logo">

Actual:

<img src="/data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='101'%20height='32'%20fill='none'%3e%3cg%20clip-path...

msorens avatar May 26 '24 15:05 msorens