fix: Move CSS collection to generateBundle for Vite 6 & 7 compatibility#339
fix: Move CSS collection to generateBundle for Vite 6 & 7 compatibility#339dc-riskhub wants to merge 2 commits intoWJSoftware:mainfrom
Conversation
In Vite 7, chunk.viteMetadata.importedCss is not populated when the renderChunk hook runs, causing the CSS map to be empty. This results in micro-frontend CSS not being loaded in production. This fix moves CSS collection from renderChunk to generateBundle, where viteMetadata.importedCss is fully populated. Changes: - Removed CSS collection logic from renderChunk hook - Added CSS collection logic to generateBundle hook - Added defensive null checks for importedCss and imports arrays Fixes CSS loading issues in Vite 7+ projects.
webJose
left a comment
There was a problem hiding this comment.
Does it work in Vite v6 as well?
|
I've not had the chance to test it in Vite 6, but I when I get a spare moment, I'll do so and report back. |
|
@webJose I tested in Vite 6.4.1 and can confirm it works. This fix relies on Rollup's hook execution order, which doesn't change across these versions of Vite. This means the CSS map is populated properly in both Vite 6 and 7. 👍 Also pushed a fix for the map tests too. |
|
Thanks for testing. My PC fried and i had to buy a new one. I should get it today. In the meantime i'm using a tablet but I cannot add trusted publishing to the repo with it. Must wait for the new hardware. |
|
My pleasure, sorry to hear your machine went kaput. If there are any other changes you'd like me to consider, do let me know. Many thanks! |
Problem
In Vite 6 & 7,
chunk.viteMetadata.importedCssis not populated when therenderChunkhook runs. This causes the CSS map to be empty, resulting in micro-frontend CSS not being loaded in production.Root Cause
The plugin currently collects CSS in the
renderChunkhook, but Vite 6/7 only populatesviteMetadata.importedCssafter allrenderChunkhooks have completed. When the plugin checks for CSS files, the metadata is still empty.Solution
Move CSS collection from the
renderChunkhook to thegenerateBundlehook, whereviteMetadata.importedCssis fully populated.Changes
renderChunkhookgenerateBundlehook before injecting the cssMapimportedCssandimportsarraysTesting
Verified with a monorepo containing 7+ micro-frontends on Vite 7.2.7:
Before fix:
After fix:
All micro-frontend CSS now loads correctly in production builds.
Related
This issue was mentioned in #87 where the workaround was to use
inlineDynamicImports: true. This fix resolves the root cause, allowing proper code splitting while maintaining CSS loading.