Dynamic css import not working about vite HOT 9 OPEN

Start a new pull request in StackBlitz Codeflow.

• vitejs-vite-73w53t (Open reproduction)

from vite.

I also have an issue with the import-analysis.
In my project i get this warning:

[vite] warning:
[ng] C:/[project path]/src/.angular/cache/17.3.7/vite/deps/chunk-CK32LNO7.js
[ng] 2757| return i[n];
[ng] 2758| }
[ng] 2759| return import("./".concat(a, ".entry.js").concat("")).then(function(e2) {
[ng] | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
[ng] 2760| {
[ng] 2761| cmpModules.set(a, e2);
[ng] The above dynamic import cannot be analyzed by Vite.
[ng] See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats. If this is intended to be left as-is, you can use the /* @vite-ignore */ comment inside the import() call to suppress this warning.
[ng]
[ng] Plugin: vite:import-analysis
[ng] File: C:/[project path]/src/.angular/cache/17.3.7/vite/deps/chunk-CK32LNO7.js?v=10cb471d

This import should be legit while starting with "./" I do not think there is much I can do here while that code is automatically generated.
I can do as suggested to add the "/* @vite-ignore */" part. And that does remove the warning but only untill angular decides to update its cache or i install the project on another machine.

I was on vite 5.1.4 and now tried to update it to 5.2.11 with the same result.

from vite.

I also have an issue with the import-analysis. In my project i get this warning:

[vite] warning: [ng] C:/[project path]/src/.angular/cache/17.3.7/vite/deps/chunk-CK32LNO7.js [ng] 2757| return i[n]; [ng] 2758| } [ng] 2759| return import("./".concat(a, ".entry.js").concat("")).then(function(e2) { [ng] | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [ng] 2760| { [ng] 2761| cmpModules.set(a, e2); [ng] The above dynamic import cannot be analyzed by Vite. [ng] See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats. If this is intended to be left as-is, you can use the /* @vite-ignore */ comment inside the import() call to suppress this warning. [ng] [ng] Plugin: vite:import-analysis [ng] File: C:/[project path]/src/.angular/cache/17.3.7/vite/deps/chunk-CK32LNO7.js?v=10cb471d

This import should be legit while starting with "./" I do not think there is much I can do here while that code is automatically generated. I can do as suggested to add the "/* @vite-ignore */" part. And that does remove the warning but only untill angular decides to update its cache or i install the project on another machine.

I was on vite 5.1.4 and now tried to update it to 5.2.11 with the same result.

ignoring it is not a resolution, I need to bundle them correctly and chunk for each css should be created

from vite.

I updated the issue to clarify expectations

from vite.

might be related #14102

from vite.

ooo please.... seems its only works this way

https://github.com/spamshaker/vite-css-bundling-issue/blob/working/src/theme-loader.ts

Now those two chunks have been created and finally can be reached in runtime:

dist/assets/theme-dark-6jg3YJQ8.css 0.03 kB │ gzip: 0.04 kB
dist/assets/theme-light-DdXo6UAR.css 0.03 kB │ gzip: 0.04 kB

full output I got:

npm run build && npm run preview

> [email protected] build
> tsc && vite build

vite v5.2.11 building for production...
✓ 39 modules transformed.
dist/index.html                         0.44 kB │ gzip:  0.29 kB
dist/assets/react-CHdo91hT.svg          4.13 kB │ gzip:  2.05 kB
dist/assets/theme-dark-6jg3YJQ8.css     0.03 kB │ gzip:  0.04 kB
dist/assets/theme-light-DdXo6UAR.css    0.03 kB │ gzip:  0.04 kB
dist/assets/index-DiwrgTda.css          1.39 kB │ gzip:  0.72 kB
dist/assets/index-Bu5yqxi-.js         144.72 kB │ gzip: 46.79 kB
✓ built in 345ms

> [email protected] preview
> vite preview

  ➜  Local:   http://localhost:4173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

from vite.

Does anyone know if this is gonna be like that or it it's going to be fixed?

from vite.

here is exactly what I needed and it seems to be working

https://github.com/spamshaker/vite-css-bundling-issue/blob/b6cac1beb197910ad50006a5497ae211e15f492f/node_modules/themes/loader.js?plain=1#L1-L13

this means that it loads it in appropriate way - switch/case is enough in my case. I have put it into node_modules to ensure that it can be bundled when the css is provided as a library

as for the import.meta.glob - it works, however it is not part of any ECMA or tc39 proposals (or I just didn't find it) so I would treat it as a workaround.

At this stage if no objection the Issue could be closed, or the documentation would need to be updated as I saw there are opened couple of similar issues like

• #14102
• #15864

from vite.

I'm having a similar issue (I think) with Vue single file components dynamically loaded via Vite import.meta.glob.

In production, dynamically loaded components are missing a lot of CSS styles. There is no issue when running vite in dev mode.

As suggested in #10630, this seems to be triggered by the cssCodeSplit: true build option, so cssCodeSplit: false might be a workaround.

from vite.