Fast refresh not working properly due to page reload when compiling middleware

[timfuhrmann]

What version of Next.js are you using?

12.0.4

What version of Node.js are you using?

16.13.0

What browser are you using?

Chrome, Safari, Edge

What operating system are you using?

macOS

How are you deploying your application?

next dev

Describe the Bug

Since I don't know the technological background or necessity of the page reload for middleware, I'm not sure if that's something that you have to live with when working with middleware - but any change, like edits made to react components, often trigger a page reload due to the middleware being compiled:

wait - compiling /_middleware (middleware only)...

This becomes especially frustrating when working with getStaticProps.

Expected Behavior

No page reload when applying changes ("Fast Refresh").

To Reproduce

Basic middleware implementation.

[exneval]

I was able to reproduce this, Developer Experience when using middleware is bad, the fast refresh won't work properly (editing a simple changes will get a full reload), hope this can get further investigation

[dlindenkreuz]

Possibly related: #30791

[iksent]

I thought #31548 would fix this issue, but I am experiencing the same at the latest v.12.0.7

[havran]

Same problem here.

[balazsorban44]

This has been fixed, please upgrade npm i next@latest.

[iksent]

@balazsorban44, which version resolves this issue? next@latest is v12.0.7, and it wasn't fixed there.

[balazsorban44]

🤔 I just tried it locally. Maybe I'm missing something?

[balazsorban44]

Sorry. Could you try canary?

[balazsorban44]

If anyone else still having issues, please open a separate bug report with a reproduction.

[timfuhrmann]

Sorry, just tried canary again and it doesn't seem to be fixed, there still is a reload which I didn't realize because I worked on a project without getStaticProps.

[timfuhrmann]

To reproduce, add some JSX and save your project, repeat 4 - 5 times and you should get a reload.