preactjs/prefresh

Prefresh not updating with lazy/Suspense/react-router/Vite

itsgiacoliketaco opened this issue · 2 comments

itsgiacoliketaco commented

Hi there,

I believe I've come across a bug where prefresh fails (no error thrown, but the component isn't updated) with the following setup:

  • Using Vite (with the official @preact/preset-vite config)
  • Using react-router
  • Using lazy/Suspense for code splitting on route components.

The problem appears to be related to lazy, and may or may not also be related to react-router and/or Vite. I have tried to create a minimal reproduction here: https://stackblitz.com/edit/vitejs-vite-rxlkuc?file=src%2Ftest-2.tsx&terminal=dev

Steps to reproduce:

  1. When the StackBlitz runs, you should see the / route, which says "Index" and has four links.
  2. Click "Test 2". Now you should see a "Test 2" heading, indicating that the /test-2 route is being rendered.
  3. Edit src/test-2.tsx (e.g., change "Test 2" -> "Test 2!!!" or something).
  4. Save.
  5. Prefresh works as expected! The change should be reflected.
  6. Click "Test 1". Now you should see a "Test 1" heading, indicating that we have navigated to /test-1 and away from /test-2.
  7. (Don't edit app.tsx at this stage or do anything to trigger a reload.)
  8. Click "Test 2" again. You should see a "Test 2" heading again (or whatever you changed it to).
  9. Edit src/test-2.tsx again.
  10. Save.
  11. Prefresh no longer works as expected: no changes to src/test-2.tsx are reflected.

Please let me know if I can clarify anything. Thanks in advance for your help!

itsgiacoliketaco commented

Thought I should add:

  • This setup uses preact/compat (for react-router), so it could be related to #366
  • This issue has some similarity to #358, but it is not identical: prefresh updates the "Test 2" page multiple times—it only stops working when you navigate away from the page and then navigate back.
itsgiacoliketaco commented

Thank you for addressing this so quickly!