Update v4 migration guide per breaking change with data URLs #17319
+9
−0
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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). 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...
|
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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.assetsInlineLimitconfiguration 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...
Bottom line: When I did not have
assetsInlineLimitin 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:
-- OR --
Actual: