Vite generates an empty JS file (which shouldn't exist)

[davidmz]

Describe the bug

In some conditions, vite build generates an empty js file that has no source. I tried to create a minimal reproduction, please see the attached link to stackblitz.

Run vite build (or just see an existing 'dist' folder there). It generates an empty 'assets/qa-item.00ef0854.js' file that is used in generated page1.html and page2.html. But the sources of these files has no js links.

Reproduction

https://stackblitz.com/edit/vitejs-vite-1fn6ez

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (4) x64 Intel(R) Core(TM) i5-7500 CPU @ 3.40GHz
    Memory: 17.82 GB / 47.89 GB
  Binaries:
    Node: 14.17.6 - C:\PROGRAM FILES\NODEJS\node.EXE
    Yarn: 1.22.15 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.14.15 - C:\PROGRAM FILES\NODEJS\npm.CMD
  Browsers:
    Chrome: 98.0.4758.82
    Edge: Spartan (44.19041.1266.0), Chromium (98.0.1108.50)
    Internet Explorer: 11.0.19041.1202

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• 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.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[jianqi-jin]

@davidmz Why the input is .html file? Try the .js file directly.

[bluwy]

It's important to note that this only happens with build.cssCodeSplit: false. Vite seems to generate a qa-item.<hash>.js mapping the source qa-item.css. And if you set build.minify: false, you can see there is content in the qa-item.<hash>.js file, which is simply var qaItem = "";. After esbuild minifies and removes it, the file becomes empty which comes to this issue.

[thasmo]

For us this happens with build.cssCodeSplit: false for lazily loaded JS files (import()) which only import CSS files.

Reproduction Code: https://github.com/thasmo/vite-6913

[Erutan409]

Anyone find a resolution to this?

[emkayy]

I get a file dev-html-ddf0fdd4.js since my source files are inside dev/html/ with the content:

/* empty css                */