Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CSS assets not loaded when implementing renderDynamicImport in plugin #8588

Closed
7 tasks done
ropez opened this issue Jun 14, 2022 · 1 comment
Closed
7 tasks done

CSS assets not loaded when implementing renderDynamicImport in plugin #8588

ropez opened this issue Jun 14, 2022 · 1 comment

Comments

@ropez
Copy link

ropez commented Jun 14, 2022

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):

  plugins: [
    vue(),

    {
      name: 'dynamic-import-plugin',
      renderDynamicImport: () => ({
        left: 'import(PREFIX + ',
        right: ')',
      }),
    },
  ],

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

System:
    OS: Windows 10 10.0.22000
    CPU: (16) x64 Intel(R) Core(TM) i9-10885H CPU @ 2.40GHz
    Memory: 11.48 GB / 31.61 GB
  Binaries:
    Node: 16.15.1 - ~\scoop\apps\nodejs-lts\current\node.EXE
    Yarn: 1.22.5 - ~\scoop\apps\yarn\current\Yarn\bin\yarn.CMD
    npm: 8.11.0 - ~\scoop\apps\nodejs-lts\current\npm.CMD
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (102.0.1245.39)
    Internet Explorer: 11.0.22000.120
  npmPackages:
    @vitejs/plugin-vue: ^2.3.3 => 2.3.3
    vite: ^2.9.9 => 2.9.11

Used Package Manager

yarn

Logs

No response

Validations

@sapphi-red
Copy link
Member

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.

@sapphi-red sapphi-red closed this as not planned Won't fix, can't repro, duplicate, stale Aug 2, 2022
@github-actions github-actions bot locked and limited conversation to collaborators Aug 17, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

2 participants