Next - Webpack5 JIT not rendering new values

[rebelchris]

What version of Tailwind CSS are you using?

3.0.11

What build tool (or framework if it abstracts the build tool) are you using?

Next.js + Webpack on a monorepo

What version of Node.js are you using?

Next: 11.1.3. -> Webpack 5 mode Node: 14.16.1

What browser are you using? Chrome

What operating system are you using? MacOS

Reproduction URL

https://github.com/dailydotdev/apps -> You can choose the GitPod version from this repo.

Describe your issue

When we switched to webpack 5 we started seeing "new classes" and "arbitrary" values not reflecting on reload.

Example: Open > packages/shared/src/components/MainLayout.tsx and add an arbitrary value like h-[15px] on the header. (line 130).

You will see the classname gets added, but the styles don't reflect this value. The same happens when you use classes that we haven't used before in the project. (Like h-96 for instance)

What does work Often it does work when we stop the server and restart it. This is not solid.

A full fix that works:

• Stop server
• Remove .next cache
• Restart server

Also when reverting back to webpack 4 it has zero issues to render these values.

Other impact This often also impacts builds that might miss these values for some reason, haven't been able to re-create a stable reproduction of this yet.

[kikorp78]

Full fix is not working for me. Changing the class to another custom-defined class in tailwind.config.js doesn't work at all even when .next folder is removed.

[thecrypticace]

To confirm with Tailwind CSS v3.0.24 on webpack 4 you're not seeing issues at all? It seems to me that there could be a problem with webpack tell us that the files have changed for some reason.

[rebelchris]

@thecrypticace Correct, on webpack 4 with Tailwind 3 we had zero issues with this. Only since the webpack 5 migration did we introduce this behaviour.

@kikorp78 Sorry, it might be not working because of the gitpod, that scenario works offline. (But regardless it showcases the issue at hand still)

[thecrypticace]

Okay, thanks for confirming. It'll take some sleuthing then to see if we can figure out what's up. I suspect it has something to do with symlinked packages (b/c of Lerna) + webpack 5 but I'm not entirely certain.

[rebelchris]

@thecrypticace Was wondering if you had some change to try some of the stuff? If not perhaps moving away from Lerna (to turborepo for instance) would make a difference? (At least as a suspicion)

[thecrypticace]

Not yet. Gonna set aside some time this week to look further into this. Won't be until late Monday or Tuesday though. I suspect any workspace like thing is going to have this problem in webpack 5 if they use symlinks. Not confirmed or anything just a hunch.

[thecrypticace]

@rebelchris just an update — haven't forgotten. Been looking through a few JIT watching bugs including this one. Will update when I know more.

[dgurns]

Also running into the same error here. Seems to be flakey; occasionally after making arbitrary styles with the dev server running, they will appear, but then after a server stop/start will not have any effect again.

In production build the same issue happens and arbitrary values have no effect.

Crazy theory -- could it have anything to do with creating arbitrary values within template strings?

<div className={`flex flex-row aspect-[${ratio}]`} />

For reference, here are my versions:

        "dependencies": {
		"next": "^12.1.6",
		"react": "18.1.0",
		"react-dom": "18.1.0",
	},
       "devDependencies": {
		"@tailwindcss/forms": "^0.5.1",
		"autoprefixer": "^10.4.7",
		"eslint": "8.14.0",
		"eslint-config-next": "12.1.6",
		"postcss": "^8.4.13",
		"tailwindcss": "^3.0.24",
		"typescript": "4.6.4"
	}

[drewlustro]

@dgurns – It's well-documented that interpolated strings in tailwind classes do not work.

[dgurns]

Thank you, sorry I had missed that.

[drewlustro]

Lol- I do the same all the time

[thecrypticace]

@rebelchris it's been a bit but I just had an aha moment based on some other discussions I'd had and I figured out a workaround for you! It's 100% because of symlinks and webpack 5 no longer watching the symlinked path but only the real filesystem path. If you edit your config to resolve the symlink path the issue disappears! :)

We've recently considered implementing something like this internally but haven't done it yet. In the meantime doing this should fix your problem:

const fs = require('fs')
const path = require('path')

module.exports = {
  content: [
    // … other stuff
    path.join(fs.realpathSync('./node_modules/@dailydotdev/shared/src'), '**/*.{js,ts,jsx,tsx}'),
  ],
};

Hopefully that helps! And thank you for your patience on this ✨

[rebelchris]

@thecrypticace Thanks so much for getting back to me. I tried it out and it works! 🙏