Open
Description
Describe the bug
In development mode, imports of common chunks are hoisted, which can lead to weird results if modules have side effects.
Reproduction
https://stackblitz.com/edit/vitejs-vite-emgasq4m?file=src%2Fmain.js,index.html&terminal=dev
Steps to reproduce
- Create the following project
// index.html <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Vite App</title> </head> <body> <script type="module" src="./src/main.js"></script> </body> </html>
// ./src/main.js import 'foo/js/bar.js'; import 'foo/js/baz.js'; // foo/js/bar.js import '../css/bar.css'; import './baz.js'; // foo/js/baz.js import '../css/baz.css'; // foo/css/bar.css html { height: 100%; background-color: red; } // foo/css/baz.css html { height: 100%; background-color: green; }
- Run
npm run dev
Excepted behavior:
Since baz.js is imported after bar.js, background-color: green should override background-color: red
Actual behavior:
background-color:red takes effect. Because baz.js is extracted into a common chunk and the import of this chunk is hoisted to the top.
System Info
Vite: 6.2.2Used Package Manager
pnpm
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 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.