v4 blows up Next.js with custom distDir
#15050
Labels
Comments
1 task
|
@vladmoroz Thanks for reporting this. I was able to reproduce this very annoying issue and have fix it in #15053. We'll get this out to you soon! One note from your repro is that you still want to include the custom |
|
Hey, thanks for such a quick fix. |
philipp-spiess
added a commit
that referenced
this issue
Nov 21, 2024
Closes #15050 In Tailwind CSS v4 Alpha 31 we changed how we scan template files. This changes included a new folder-dependency that is emitted for the `base` directory, so we can listen for new files being added as part of the postcss dependency. In our testing, this worked fine with the Next.js integration meaning a new file in the project root would be picked up by Oxide and we could update the CSS files accordingly. This change is now, however, causing an issue. With Next.js 15 **and with a custom `distDir` configured**, the postcss build, that will write into the `distDir`, will cause another postcss run to be triggered, starting an endless loop (regardless of wether or not the `distDir` was also part of your gitignore list). This PR now changes the postcss client to not emit the base directory as a dependency to revert this changes. This does mean that new files and folders created _directly in the project root_ will require a restart of the Next.js server again (just like it did in Alpha 31 and before) for now. ## Test Plan Next 15 does not seem to run in our current integration test setup (for some reason the server does not close correctly and it will fail on the cleanup step), so this change was tested manually: - First, clone the [templates repo](https://github.com/philipp-spiess/tailwindcss-playgrounds) I use for third party frameworks - Then, do a full build in the parent repo `tailwindcss` via `pnpm build` - Now, install the local tarballs in the `tailwindcss-playgrounds` repo via `pnpm install` With this setup I have tested changes to a template file (that causes new utilities to be added) and the CSS file (that will rebuild properly) across both `pnpm dev` and `pnpm dev --turbo`. Furthermore integration tests assert it still works in Next 14 like it did before: https://github.com/user-attachments/assets/b0ccb3dd-d090-4e4c-97c5-74129a2789be One thing to make sure of is to include the new `distDir` into the `.gitignore` file as well, otherwise we will scrape it for changes which inherently causes an endless loop issue again. --------- Co-authored-by: Adam Wathan <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
HMR blows up the server when using v4 in a project with a custom
distDirin the Next.js configWhat version of Tailwind CSS are you using?
This wasn't an issue in
"4.0.0-alpha.30", started happening in"4.0.0-alpha.31"What build tool (or framework if it abstracts the build tool) are you using?
Next.js 15
What version of Node.js are you using?
Node.js 20
Reproduction URL
https://codesandbox.io/p/devbox/tphzmv?file=%2Fnext.config.js%3A4%2C3
Screen.Recording.2024-11-20.at.09.53.35.mp4
The text was updated successfully, but these errors were encountered: