Closed Dannymx closed 1 year ago
I got the same error, it only works with classes already defined somewhere else.
Same error on 13.0.7-canary.1
. Seems to work on 13.0.6
? Correct me if I'm wrong.
Related issue here https://github.com/vercel/next.js/issues/43396#issuecomment-1342924284
Same error on
13.0.7-canary.1
. Seems to work on13.0.6
? Correct me if I'm wrong.
I'm on 13.0.6
and it doesn't work. I just tried a fresh next.js installation based on the official tailwind guide, with the /app
directory https://tailwindcss.com/docs/guides/nextjs#app-directory
and it's the same problem there (13.0.6
).
I up- and downgraded between different next.js versions and there is a difference between 13.0.5
and 13.0.4
, hot reload works works well with 13.0.4
, but is broken with 13.0.5
.
I have an issue as well with 13.0.6, hot reload often "loading" endless with a small project. No experimental app dir in my case. (node:17576) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 client/ listeners added to [EventEmitter]. Use emitter.setMaxListeners() to increase limit
My problem looks like solved. I added this into the tailwind.config (excludes node_modules from purge):
content: [
//...
"!./node_modules",
],
P.S.: Not sure if this solved my problem, other candidate was switching off the windows firewall.
Unfortunately @teddybee's workaround didn't work for me, it may be because I'm in a pnpm monorepo
Still broken on latest canary
Not fixed in v13.0.7-canary.4
Facing the same issue. The only workaround I've found is to downgrade your next version to 13.0.4
.
I can confirm the issue. Happens specifically on app
directory + v13
We land a fix in 13.0.8-canary.0. Could you upgrade to to see if the hmr is fixed for you?
We land a fix in 13.0.8-canary.0. Could you upgrade to to see if the hmr is fixed for you?
Working as expected now on 13.0.8-canary.0
. Marking this as completed.
doesn't seem to work for me when upgrading to 13.0.8-canary.0
but kept downgrading to 13.0.4
and started working again.
@asheikho99 could you provide a reproduction, will be easier to investigate 🙏 thanks
@asheikho99 could you provide a reproduction, will be easier to investigate 🙏 thanks
Here is a GIF shows the exact issue. Notice how it's working fine until couple changes then it stops working, I would have to manually refresh to see changes. https://imgur.com/a/H8Pt8Q6
❯ To reproduce: https://github.com/asheikho99/hot-reload-example
❯ Using:
Firefox 108.0.1 (64-bit)
Chrome Version 108.0.5359.125 (Official Build) (64-bit)
I also made sure that is no cache for localhost
❯ npx next info
Platform: win32
Arch: x64
Version: Windows 10 Pro
Binaries:
Node: 16.15.0
npm: N/A
Yarn: N/A
pnpm: N/A
Relevant packages:
next: 13.0.8-canary.0
eslint-config-next: 13.0.7
react: 18.2.0
react-dom: 18.2.0
Running under WSL on Windows 10, clean yarn install doesn't work for me. New classes are not compiled in when saved.
Operating System:
Platform: linux
Arch: x64
Version: #1 SMP Fri Apr 2 22:23:49 UTC 2021
Binaries:
Node: 18.8.0
npm: 9.2.0
Yarn: 1.22.19
pnpm: N/A
Relevant packages:
next: 13.0.8-canary.0
eslint-config-next: 13.0.6
react: 18.2.0
react-dom: 18.2.0
I fixed the problem for me by adding a proper HTML structure to my RootLayout, like this:
Before (app/layout.tsx):
import "../styles/globals.scss";
import Nav from "./Nav";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<>
<Nav />
<main>{children}</main>
</>
);
}
After(app/layout.tsx):
import "../styles/globals.scss";
import Nav from "./Nav";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html>
<head></head>
<body>
<header>
<Nav />
</header>
<main>{children}</main>
</body>
</html>
);
}
Not fixed in 13.0.7
@asheikho99 I tried your reproduction on a windows VM it works for me. I feel it's another issue with windows specific based on the reports after reopening. I'd like to close this for now since it's fixed for the original issue. We can track the windows one in the new issue.
For the record, this is mostly fixed for me (I haven't thoroughly tested it yet) in canary version 13.0.8-canary.0
. But I'm using it on a Mac M1.
@asheikho99 I tried your reproduction on a windows VM it works for me. I feel it's another issue with windows specific based on the reports after reopening. I'd like to close this for now since it's fixed for the original issue. We can track the windows one in the new issue.
@huozhi, I used Linux under WSL and it doesn't work for me. So not just only Windows specific? Can you at least link the new issue so others can follow the core issue of it not refreshing/compiling classes?
I follow all the thread and it didn't work for me.
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 22.1.0: Sun Oct 9 20:15:09 PDT 2022; root:xnu-8792.41.9~2/RELEASE_ARM64_T6000
Binaries:
Node: 18.9.0
npm: 8.19.1
Yarn: N/A
pnpm: 7.18.2
Relevant packages:
next: 13.0.8-canary.0
eslint-config-next: 13.0.4
react: 18.2.0
react-dom: 18.2.0
I switch to 13.0.8-canary.0 but hot-reloading tailwind style doesn't work.
I follow all this issues and add
content: [
//...
'!./node_modules',
],
But this change nothing.
This is a reproducible example : https://github.com/Melvynx/test-next-v13-tailwind-hot-reload
I hope it's just me ! Thanks you for your answer.
PS : module scss doesn't reload to, i need a hard refresh
Also, on next 13.0.8-canary.4
tailwind does not work at all, and no CSS is loaded. I will try 13.0.8-canary.0
and update this comment if I get something close to working
Update: 22-12-2022
On canary 13.0.8-canary.5
tailwind is still broken, and no CSS is loaded
On version 13.1.0 TailwindCSS appears to still be broken when using with the app directory. The last working version for me is 13.0.6
i get a hydration error on version 13.1.0
I can also confirm 13.1 not working but rolling back the version fixes it
Same here. On version 13.1.0 Tailwindcss not working on app directory. I tried every single solution and still not working.
Same here - version 13.0.6 still works. Version 13.0.7 is where it breaks and 13.1 does not fix it. Seems like turbopack and swc_core was updated for that 13.0.7 version. That may be the reason
Same here in Next v13.1.1
Same here - version 13.0.6 still works. Version 13.0.7 is where it breaks and 13.1 does not fix it. Seems like turbopack and swc_core was updated for that 13.0.7 version. That may be the reason
Thank you for this information. I downgraded to version 13.0.6 and the problem got solved
I don't remember who said it anymore, but it worked after I put it on version 13.0.6
Windows 10, it didn't work for me either on version 13.1.1. I tried downgrading to 13.0.6, no success. Then I tried 13.0.4 and it worked.
I'm on fedora linux
13.1.1 not wroking for me .
Windows 10, didn't work for me either on version 13.1.1.
Same issue.
Downgraded from version 13.1.1 to 13.0.4 and it works now.
Same issue for me on v13.1.
Since this issue is closed, what’s happening to the feedback here?
I don't understand either, it's clearly still not fixed in the recent versions based on user feedback. Doesn't work past 13.0.4 for me
For me it is working on 13.1.1. Make sure you are using the exact version "next": "13.1.1"
instead of "next": "^13.1.1"
.
For me it is working on 13.1.1. Make sure you are using the exact version
"next": "13.1.1"
instead of"next": "^13.1.1"
.
Still not working probably my environment then.
It is still not working on 13.1.1
.
experimental: {
appDir: true,
}
Also, I found out enable appDir
does affect TailwindCSS hot-reload of classes in pages folder.
Still same issue for me V13.1.1
Putting in "!./node_modules",
inside tailwind config content looks like fixed it for me:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx}",
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
"!./node_modules",
],
theme: {
extend: {},
},
plugins: [],
}
@reginpv this worked! I did a brand new build of next.js 13 with app directory using
yarn create next-app --experimental-app
After that, I installed Tailwindcss:
yarn add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Added the Tailwind directives to globals.css:
@tailwind base;
@tailwind components;
@tailwind utilities;
And lastly, modified the tailwind.config.js file:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./app/**/*.{js,ts,jsx,tsx}',
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
'!./node_modules',
],
theme: {
extend: {},
},
plugins: [],
};
I previously had done this but it didn't work when I did everything manually and started with just yarn add next-app
. Weirdly, it works when I did it this way starting with yarn add next-app --experimental-app
@andresev exactly how I did it!
After trying for a while with all the suggestions, adding the following to your root layout file works:
import "../styles/dist.css";
import "tailwindcss/tailwind.css"; <-- add this
It works with 13.1.1
as well.
I've tried every mentioned solution with no luck.
Downgrading to 13.0.4 seems to work for me. Hopefully this gets fixed soon.
Edit: I'm on macOS 13.0.1 (22A400) and work in safari.
@leerob why is this issue closed? There are many reports of it still happening
I managed to fix it but I'm not sure how. I changed my root layout according to https://github.com/vercel/next.js/issues/43878#issuecomment-1356861154 but removing parts of it now and it still work. Not sure what exactly fixed it.
@PatrikTheDev do you have a reproduction using the latest canary?
same issue. 13.1.1, WSL, Tailwind + DaisyUI
Verify canary release
Provide environment information
❯ npx next info
Which area(s) of Next.js are affected? (leave empty if unsure)
No response
Link to the code that reproduces this issue
https://github.com/vercel/app-playground
To Reproduce
/streaming
Product.tsx
and edit a class with a width classw-*
(go to line 75)w-1/3
forw-6/12
save and wait for hot-reload (don't manually refresh the page)w-10/12
, wait for hot-reload. Same result as above.w-6/12
and manually reload, you will see your class now (and it seems to be caching this class now)w-6/12
won't fail anymore because it seems to be cached now somehowDescribe the Bug
Hot reloading of Tailwind CSS when you change classes in your code doesn't work. Only works after you apply a new class and manually reload the page.
Bug in action:
Expected Behavior
Swapping Tailwind classes from elements should work when hot-reloading.
Which browser are you using? (if relevant)
Chrome 108.0.5359.98 (Official Build) (x86_64)
How are you deploying your application? (if relevant)
Locally (npm run dev)