You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
In our project, we need to dynamically configure assets URLs in runtime (we're currently using __webpack_public_path__, but trying to switch to vite).
I read the discussion in #3522 , and implemented a solution by implementing renderDynamicImport in a plugin. A minimal reproduction of this is provided in the linked repo (snippet here):
This works fine for loading assets dynamically. The problem however, is that as soon as we implement this hook, only Javascript assets are loaded. CSS files with <style> content from asynchronous are not loaded. All code to load CSS files seem to disappear from the build output, when this hook is added. I expected both JS and CSS assets to be emitted, and rendered by my custom render hook.
Note: If I change the implementation to return null, or even the default { left: 'import(', right: ')' }, the CSS files are loaded.
Note: About the provided repo for reproduction: It contains a dynamically loaded page with some CSS that changes the background color of the content to red. This CSS is loaded in 'dev' mode, but not when running 'build' and 'preview'. The PREFIX variable is currently empty, so everything should work as if the hook didn't exist.
Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
renderDynamicImport conflicts with the internal CSS chunking mechanism and I think there isn't a good way to solve this conflict.
Closing as I think the reason why this issue was created is to achieve #3522 and it is already implemented and released as experimental.renderBuiltUrl.
If there's any missing pieces, feel free to create a new issue.
Describe the bug
In our project, we need to dynamically configure assets URLs in runtime (we're currently using
__webpack_public_path__
, but trying to switch to vite).I read the discussion in #3522 , and implemented a solution by implementing
renderDynamicImport
in a plugin. A minimal reproduction of this is provided in the linked repo (snippet here):This works fine for loading assets dynamically. The problem however, is that as soon as we implement this hook, only Javascript assets are loaded. CSS files with <style> content from asynchronous are not loaded. All code to load CSS files seem to disappear from the build output, when this hook is added. I expected both JS and CSS assets to be emitted, and rendered by my custom render hook.
Note: If I change the implementation to return
null
, or even the default{ left: 'import(', right: ')' }
, the CSS files are loaded.Note: About the provided repo for reproduction: It contains a dynamically loaded page with some CSS that changes the background color of the content to red. This CSS is loaded in 'dev' mode, but not when running 'build' and 'preview'. The
PREFIX
variable is currently empty, so everything should work as if the hook didn't exist.Reproduction
https://github.com/ropez/vite-project
System Info
Used Package Manager
yarn
Logs
No response
Validations
The text was updated successfully, but these errors were encountered: