Skip to content
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

Tailwind breaks fast reload *sometimes*, causing component reload #74484

Open
maxiedaniels opened this issue Jan 3, 2025 · 0 comments
Open
Labels
bug Issue was opened via the bug report template. Developer Experience Issues related to Next.js logs, Error overlay, etc.

Comments

@maxiedaniels
Copy link

maxiedaniels commented Jan 3, 2025

Link to the code that reproduces this issue

https://github.com/maxiedaniels/fast-refresh-bug

To Reproduce

  • Start using npm run dev
  • Press 'Change URL' to change the state value
  • Change some text in the paragraphs and save the file
  • This will cause TestComponent to reinitialize entirely, even though it shouldn't

Current vs. Expected behavior

Fast refresh should maintain the useState value if adjusting the paragraph text. It works great if Tailwind isn't installed.
If Tailwind is installed, it will sometimes reload TestComponent.

Some notes:

  • When it reloads TestComponent, there is no error in console - it says Fast Refresh rebuilding, but nothing about a full reload.
  • If I make the page.tsx a client component ('use client'), it's no longer resets the component on fast refresh
  • I initially tried to show this bug without installing tailwind, but couldn't reproduce it. Once i installed tailwind, the bug started happening again.
  • I tried disabling postcss and using npx tailwindcss -i ./app/main.css -o ./app/output.css --watch instead, and it seems this fixes the issue. So, i'm unclear on if the issue relates to postcss or if it's how postcss interacts with tailwind?

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.6.0: Thu Sep 12 23:35:29 PDT 2024; root:xnu-10063.141.1.701.1~1/RELEASE_ARM64_T6000
  Available memory (MB): 65536
  Available CPU cores: 10
Binaries:
  Node: 18.19.1
  npm: 10.2.4
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.2.22 // An outdated version detected (latest is 15.1.3), upgrade is highly recommended!
  eslint-config-next: N/A
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.3.3
Next.js Config:
  output: N/A
 ⚠ An outdated version detected (latest is 15.1.3), upgrade is highly recommended!
   Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.
   Read more - https://nextjs.org/docs/messages/opening-an-issue

Which area(s) are affected? (Select all that apply)

Developer Experience

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

No response

@maxiedaniels maxiedaniels added the bug Issue was opened via the bug report template. label Jan 3, 2025
@github-actions github-actions bot added the Developer Experience Issues related to Next.js logs, Error overlay, etc. label Jan 3, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Issue was opened via the bug report template. Developer Experience Issues related to Next.js logs, Error overlay, etc.
Projects
None yet
Development

No branches or pull requests

1 participant