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

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.

[henriqemalheiros]

Hey! I was facing the same issue until I found the problem: something that is imported in the middleware and somewhere in the app. The import could be anything, including an external dependency. Here is the minimal reproduction: henriqemalheiros/middleware-fast-refresh.

To reproduce it, though, you need to wait ~20 seconds after the page is fully loaded or the last change was made. If you make a change before the ~20 seconds interval, the fast refresh works as expected. After that, any change to any part of the app triggers a full refresh.

There is a warning logged to the console, but it’s to fast to actually read it. In next@canary, the same warning is shown by the app before the full refresh so we can read it:

About to perform a full refresh

Fast Refresh will perform a full reload when you edit a file that is imported by modules outside of the React rendering tree. It is also possible the parent component of the component you edited is a class component, which disables Fast Refresh. Fast Refresh requires at least one parent function component in your React tree.

You can find more information in the related Webpack error below:

Cannot read properties of undefined (reading 'call')

You can read more about Fast Refresh in our documentation.

[jescalan]

Hi friends! Just want to say that we are aware of this issue on the next.js core team and are working towards getting a fix out. Really appreciate your patience here, and so sorry to everyone who this has inconvenienced!