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.

Sign up for GitHub

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

Jump to bottom

Hot reloading breaks after one minute with the Next.js starter #131

Closed
symmb opened this issue Jul 18, 2022 · 16 comments · Fixed by vercel/next.js#39845
Closed

Hot reloading breaks after one minute with the Next.js starter #131

symmb opened this issue Jul 18, 2022 · 16 comments · Fixed by vercel/next.js#39845
Assignees
@mfix-stripe
Labels
bug Something isn't working good first issue Good for newcomers help wanted Extra attention is needed next.js

Comments

@symmb
Copy link

symmb commented Jul 18, 2022 •
edited

What happened?

Whenever I run npm run dev and leave the page untouched in the browser and editor for about a minute, hot reloading doesn't have an effect anymore. The Next.js reload indicator in the lower right corner still shows up but the page does not update when I change something in my sources. Refreshing the page or performing any sort of page navigation (without a full reload) fixes hot reloading until it breaks again after one minute.

To reproduce

  1. Clone the Next.js starter project and install dependencies using npm install
  2. Start npm run dev
  3. Load the page in a browser
  4. Wait for one minute
  5. Change something in a page file
  6. The Next.js reloading indicator shows up but the page is not updated

Version

0.1.4

Additional context

The exact commit of the starter repository used is cf36368f405a41499aded8b61b136c0bda44c0e3.

This problem doesn't occur with a Next.js starter project without Markdoc, so it doesn't seem to be a Next.js issue.

I'm also not seeing any errors or warnings in the browser console or network tab.
@symmb symmb added the bug Something isn't working label Jul 18, 2022
@mfix-stripe
Copy link
Contributor

@symmb this operating system and browser are you using?

@symmb
Copy link
Author

symmb commented Jul 19, 2022

I'm on openSUSE Leap 15.3 and I've tested it on both Google Chrome (Version 103.0.5060.114) and Firefox (91.10.0esr).

@mfix-stripe mfix-stripe self-assigned this Jul 19, 2022
@jensneuse
Copy link

same problem for me on macos 12.4 with Chrome Version 103.0.5060.114 (Official Build) (arm64)

@mfix-stripe mfix-stripe added good first issue Good for newcomers help wanted Extra attention is needed and removed os:linux labels Jul 22, 2022
@leerob
Copy link

leerob commented Jul 22, 2022

Sorry about this experience – @mfix-stripe let me know if you need any support from the Next.js side.

@mfix-stripe
Copy link
Contributor

mfix-stripe commented Jul 22, 2022 •
edited

Sorry about this experience – @mfix-stripe let me know if you need any support from the Next.js side.

Ayy, thanks for offering @leerob! I don't think anything special is going on in our plugin that could cause this to happen, so feels like a Next.js specific bug to me. Especially since our plugin mimics the MDX plugin almost identically: https://github.com/vercel/next.js/blob/canary/packages/next-mdx/index.js

Would happily accept your help!

Cc'ing @ijjk in case something jumps out at him (since he just took a look at our plugin this week).

@ijjk
Copy link

ijjk commented Jul 23, 2022

Taking an initial look I'm not able to reproduce the HMR failing after a certain amount of time, it may be related to certain files being edited. To ensure webpack is tracking any files referenced the different loader dependencies can be added for example here's how it is managed in the postcss loader https://github.com/vercel/next.js/blob/8b721227cf82a0af3be07663dc8d218430c80514/packages/next/build/webpack/loaders/postcss-loader/src/index.js#L89-L103

@mfix-stripe
Copy link
Contributor

Thanks for taking a look @ijjk. We do currently add a context dependency to the entire markdoc/ dir (https://github.com/markdoc/next.js/blob/09712e2bd2add910e4de38ee19da4a8288ad289d/src/loader.js#L198), and @symmb mentioned the HMR stops working for the pages/ dir, so I don't think that is the issue.

I am actually fairly certain this is the problem: vercel/next.js#19230 and vercel/next.js#12149

We used to force a page refresh on save in @markdoc/next.js, but we felt like that was unidiomatic and flakey, plus the same code could be run in user-land.

@ijjk do you have any suggested work arounds for this?

@mfix-stripe
Copy link
Contributor

@ijjk any thoughts on the above? Is there a idiomatic way to force getStaticProps to re-run on save?

@ijjk
Copy link

ijjk commented Aug 3, 2022

Hmm we do have a test for server import changes triggering the data to be refreshed client-side without reloading here, if we could track down a test case for this we could investigate patching this easier.

@mfix-stripe
Copy link
Contributor

@ijjk super strange, but I was actually able to reproduce this issue with our starter repo: https://github.com/markdoc/markdoc-starter

If you boot up the repo, HMR/Fast Refresh works great. But if you wait a few minutes and try to make edits, it no longer works.

Is this enough of a repro for you? I can try to write a test for this, but not sure how I would at the moment

@ijjk
Copy link

ijjk commented Aug 22, 2022

Are you able to reproduce this on the bare Next.js starter from pnpm create next-app or is this only occurring with markdoc configured?

@mfix-stripe
Copy link
Contributor

@ijjk it happens with the plain Next.js starter too. Here is a repo that reproduces the issue: https://github.com/mfix-stripe/nextjs-hmr-repro

If you wait a minute or 2 and then try and edit the x string in data/server.js, the page will not HMR. If you refresh the page, HMR starts working again.

@ijjk ijjk mentioned this issue Aug 23, 2022
Merged
3 tasks
@ijjk
Copy link

ijjk commented Aug 23, 2022

Ah I see, thanks for narrowing in on that! I was able to track this down to an issue with our entries handling and opened a fix/regression test for this in vercel/next.js#39845

kodiakhq bot pushed a commit to vercel/next.js that referenced this issue Aug 23, 2022
@ijjk
Fix disposing active entries in dev compilers (#39845)
611e13f 
As noticed in markdoc/markdoc#131 it seems we are incorrectly disposing active entries causing HMR to fail after the configured `maxInactiveAge`. To fix this instead of only updating lastActiveTime for one compiler type's entry we update all active compiler types for the active entry. 

This also updates an existing test to catch this by waiting the `maxInactiveAge` before attempting a change that should trigger HMR. 

## Bug

- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [x] Errors have helpful link attached, see `contributing.md`

Fixes: markdoc/markdoc#131
@ijjk
Copy link

ijjk commented Aug 23, 2022

Hi, this should now be fixed in v12.2.6-canary.2 of Next.js, please update and give it a try!

@mfix-stripe
Copy link
Contributor

Thanks @ijjk! I just tested this with v12.2.6-canary.2, and that fixed the problem. Closing 👍

@symmb
Copy link
Author

symmb commented Aug 29, 2022

Can confirm it works with the latest Next.js canary + Markdoc. Thanks to everyone involved!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@mfix-stripe mfix-stripe

Labels
bug Something isn't working good first issue Good for newcomers help wanted Extra attention is needed next.js
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix disposing active entries in dev compilers ijjk/next.js
5 participants
@leerob @jensneuse @ijjk @mfix-stripe @symmb