Next.js with webpack 5 hangs on first compile (.next folder is empty)

[vvo]

Hey there, using a brand new create-next-app, using webpack 5, all dependencies up to date, following the tailwindcss-jit README then on first load (when .next folder is empty) the build never finishes.

You have to CTRL+C and then start again for it to work.

Example repo: https://github.com/vvo/tailwindcss-jit-hangs-webpack5-next.js

git clone git@github.com:vvo/tailwindcss-jit-hangs-webpack5-next.js.git
cd tailwindcss-jit-hangs-webpack5-next
yarn && yarn dev

Now try to load http://localhost:3000 and it will hang forever.
If you restart the server it will work.

To reproduce the hang, rm -rf .next.

Disabling webpack 5 solves this issue, using webpack 5 using regular tailwindcss works.

PS: On my real-world project, the build never finishes at all, first load or second load, I could not reproduce this behavior though 🤷

[utkarshkukreti]

Can confirm the dev build never finishes on my project with Next.js + webpack 5, no matter how many times I restart the server.

With DEBUG=1, I can see that the JIT compilation is working:

Source path: .../index.css
Setting up new context...
Reading changed files: 0.605ms
Generate rules: 6.206ms
Build stylesheet: 0.255ms
Changed files:  4
Potential classes:  113
Active contexts:  1
Content match entries 38
JIT TOTAL: 185.58ms

Source path: .../index.css
Reading changed files: 0.004ms
Generate rules: 0.108ms
Build stylesheet: 0.003ms
Changed files:  0
Potential classes:  1
Active contexts:  1
Content match entries 38
JIT TOTAL: 6.254ms

[adamwathan]

I suspect is this because NODE_ENV is set to development. Either set it to production or set TAILWIND_MODE=build. We run a bunch of watchers in the background for watching template changes and by default we set those up if NODE_ENV is development or TAILWIND_MODE is watch.

[utkarshkukreti]

That was actually the first thing I tried, but it didn't work. I patched this package to confirm that TAILWIND_MODE is being correctly set:

Btw, next build runs fine (and fast!). The problem is only in next dev.

[vvo]

@adamwathan NODE_ENV is development on my side yes because I use next dev.

The bug shows when next dev is used.
The bug is not present when not using webpack 5.

[joneath]

I am also seeing next hang when using webpack 5. Dropping to webpack 4 fixes the problem but it would be great to have both the tailwind JIT and webpack 5 filesystem caching running together.

[bradlc]

I have opened an issue over on vercel/next.js for this, and it looks like there's already a pull request over on webpack/webpack to address the issue 🙌 Hopefully it won't be too long before a fix lands in Next.js, but for now you can either disable webpack 5, or use Next.js version 10.0.8. Will keep this open for now and will try to keep you updated 👍

[utkarshkukreti]

@bradlc thanks for looking into this! I tried downgrading next.js: 10.0.7 works fine, but for some reason 10.0.8 hangs for me just like 10.0.9. Anyways, since it works with 10.0.7, the problem is not in this package.

[bradlc]

The latest canary version of next (10.0.10-canary.7) resolves this issue 🙌 Thanks to @sokra for the fix!

[utkarshkukreti]

Thanks @sokra @bradlc, I can confirm @tailwindcss/jit works with 10.0.10-canary.7 with webpack 5 in dev mode!

[adamwathan]

Awesome, going to close then — thanks @sokra!