-
Notifications
You must be signed in to change notification settings - Fork 4.3k
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
[v4] Issue with vite-plugin-vue-devtools and v4 beta.1 #15057
Comments
@HummingMind Hey there! I wasn't able to reproduce this locally using the latest Here's the example I tried: https://github.com/philipp-spiess/tailwindcss-playgrounds/tree/main/vue It's just a |
I did not give out the full information in the origianl post. It's not just a vue@latest with TW4 and Vue Router. But it's also with unplugin-vue-router, which automatically generates the routes, based on file-based routing, instead of manually configuring them. I was able to reproduce locally, in a clean create-vue project. I'll use that as the new re-production. |
@philipp-spiess When you run the "dev" script, just go into the /pages/index.vue and just add some tailwind classes to the paragraph element to trigger HMR. Here is what I see in the client console: |
Just tested by switching from the So it has something to do with the new tailwindcss vite plugin. Thank you! |
Oh I wonder if this is the same issue as #15159 and has to do with virtual modules not being resolved correctly. Thanks for putting together the repro! |
Still happens with beta.3 🍻 |
|
It's much better on beta.6. You can still see "the jump" on the very first window load (once the browser opens), but HMR works fine after that point, where it did not with beta.3. So this could probably be cosnidered "fixed", if there is no way to improve the initial page load. Thank you for all the hard work! |
What version of Tailwind CSS are you using?
4.0.0-beta.1
What build tool (or framework if it abstracts the build tool) are you using?
Vite 5.4.11
What version of Node.js are you using?
v22.11.0
What browser are you using?
Chrome 131.0.6778.86
What operating system are you using?
Windows 11 24H2
Reproduction URL
StackBlitz
Can't run it there though. They don't seem to allow plugins like tailwindcss in vite.config.js
Another way to reproduce is just to
npm create vue@latest
with vue router and just add TailwindCSS v4 alpha/beta to it and run the dev server.Describe your issue
When using vue and vue-router, during vite HMR, the vite-plugin-vue-devtools, version 7.6.4, freaks out with this error:
and the page looks like this:
The text was updated successfully, but these errors were encountered: