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

[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.

[balazsorban44]

Yeah, still no problem on my side. 👀

Could you link to your repository? Create a minimal reproduction?

[balazsorban44]

I don't have a TMDB API key, but for the sake of pinning down where the problem might be, it is favorable if you could provide an isolated/minimal reproduction anyway.

[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.

[switz]

@henriqemalheiros nice work! this has been really hurting my productivity, thanks for coming up with a reproduction.

[lao9s]

Hi,
I have the same issue. To reproduce it: import a function in react component then the same function import in your _middleware.js. Then, if you have running dev server, stop it and start it: npm run dev, whait ~15 secconds then try to do changes on your component, will perform full reload.

As a temporary solution is to have different functions with the same logic and then import them separately into both files(your react component and _middleware.js)

Does anyone know how to solve this to use the same function in both places?

[switz]

This is pretty frustrating and severely hindering the development experience. Every time I update code it does a full refresh to a blank page and I have to refresh twice to get it to render.

I have imports in my _middleware – there's not really much I can do to get around that. Can I disable re-compilation on a particular nextjs path? That file isn't changing at all, it should be compiled once until any changes are made.

[tomduncalf]

Also seeing frequent reloads with 12.0.7 when working due to the middleware recompiling.

With canary it is perhaps a little less frequent, but instead of just a reload I first get this dialog - to be honest, it was better before, as I didn't have to click a button to reload also.

This is just doing/undoing the same change to a styled component over and over which works like 3 in 4 times, and does a full reload 1 in 4. I see wait - compiling /_middleware... in the console despite not changing the middleware.

My middleware is just the basic auth example and is totally self contained, except for importing TS types: import { NextRequest, NextResponse } from "next/server"; so it's not related to the shared imports some others have mentioned.

I can confirm that removing middleware.ts fixes this, but doing an early return from the middleware in dev mode does not help.

My project is too large and complex to share as a repro, but if no one else has created one I can try and create one.

[switz]

After upgrading to canary I see the dialog as well, but with a different error message. I didn't see anything related to on-demand-entries before upgrading to canary. Hoping this is helpful:

[WoutGroenendijk]

I ran into the same issue after upgrading to next 12.0.8, this was caused by my custom imports in the _middleware. After removing the imports and moving them inside the _middleware file it all worked fine.

[tomduncalf]

@WoutGroenendijk you must still have import { NextRequest, NextResponse } from "next/server"; though, right? For me this happens just with that as the only import

[WoutGroenendijk]

@tomduncalf Yes I still got import { NextRequest, NextResponse } from "next/server"; I just moved my custom imports of path's and constants inside my middleware file, after that it started to work fine.

[henriqemalheiros]

@WoutGroenendijk you must still have import { NextRequest, NextResponse } from "next/server"; though, right? For me this happens just with that as the only import

@tomduncalf is there any chance you are importing NextRequest or NextResponse in other parts of the app, like an API route? I didn't check for imports in places other than React components and I don't use TypeScript, but it makes sense for the problem to occur in your use case as well.

---

@tomduncalf Yes I still got import { NextRequest, NextResponse } from "next/server"; I just moved my custom imports of path's and constants inside my middleware file, after that it started to work fine.

@WoutGroenendijk that's what I did as well:

import { API_URL } from '../lib/constants'

became

const API_URL = process.env.NEXT_PUBLIC_API_URL ?? ''

It solved the problem, but that makes the app harder to maintain and it is a change impossible to be made when importing other things, like a dependency (lodash, for example).

[tomduncalf]

Good question @henriqemalheiros, I’m not sure why I’d be importing them elsewhere but it’s possible, I’ll check. Hopefully this issue can be resolved soon anyway, feels like going back to the dark ages with full page refresh 😂

[switz]

Still seeing this issue on 12.0.9

[bmichotte]

Same here

[klapec]

Yup, definitely not fixed on 12.0.9.
Here's the stacktrace that I'm getting:

TypeError: Cannot read properties of undefined (reading 'call')
    at Object.options.factory (http://localhost:3000/_next/static/chunks/webpack.js?ts=1643268216530:685:31)
    at __webpack_require__ (http://localhost:3000/_next/static/chunks/webpack.js?ts=1643268216530:37:33)
    at fn (http://localhost:3000/_next/static/chunks/webpack.js?ts=1643268216530:354:21)
    at eval (webpack-internal:///./app.config.ts:30:68)

As soon as I remove any module imports - the problem is gone.

[simontaisne]

Same here on 12.0.9 and without any import outside of next/server :(

TypeError: Cannot read properties of undefined (reading 'call')
    at Object.options.factory (http://localhost:3000/_next/static/chunks/webpack.js?ts=1643273407380:690:31)
    at __webpack_require__ (http://localhost:3000/_next/static/chunks/webpack.js?ts=1643273407380:37:33)
    at fn (http://localhost:3000/_next/static/chunks/webpack.js?ts=1643273407380:359:21)
    at eval (webpack-internal:///./src/hooks/useApollo.ts:15:40)

[bmichotte]

Hello @balazsorban44, I just created a quick reproduction repository : https://github.com/bmichotte/next-issue-31827

With that project cloned, you have to

1. yarn install
2. yarn dev
3. open http://localhost:3000/ (and enjoy an Hello world :P)
4. wait a few seconds, then uncomment the console.log in the api/v1/hello.ts file
5. save that file
6. reproduce 4-5 with commenting/uncommenting the console.log, you should see the full reload

[iksent]

Hi, this has been fixed on latest (as of writing 12.0.9) please upgrade and give it a try!

Just tried and now we need to close this annoying notice "About to perform a pull refresh" in addition to page refreshing 😆

[seonghyeonkimm]

next: 12.0.9
node: 16.13.0

Everytime I edit any files in my project, I also run into this warning dialog. And I think it is related to @sentry/nextjs withSentryConfig call in next.config.js.

After removing withSentryConfig, I get the same warning dialog with different message.

[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!

[ijjk]

Hi, this has been updated in v12.0.11-canary.1 of Next.js, please update and give it a try!

[bmichotte]

@ijjk I can confirm that I don't see the complete refresh in the two projects I tested with that version !

[switz]

Can also confirm this is fixed. Thank you so so so much!!

[GandharvJaggi]

HI, we are using a custom server.js . Upgrading to v12.0.11-canary.1 did not fix the problem.

EDIT: we are not using any kind of middleware.

[ijjk]

@GandharvJaggi if you are not using middleware then this sounds unrelated to your issue, can you open a separate issue with a reproduction to allow investigation?

[pqt]

@jescalan & @ijjk since serving the public is an often thankless task, I just want to say thank you so much for this, it has really been a thorn in the side and this is probably the highlight to the day.

Just wanted to share that, pass it along to anyone involved, pats on the back for all.

[sebastienbarre]

I tried v12.0.11-canary.10 and I still get a lot of those but in the context of using MDX files. Would you mind considering an option to disable this big alert box, and reload automatically? Or is there an easy to do it already?

Error: Aborted because ./pages/posts/my-mdx-page.mdx is not accepted
Update propagation: ./pages/posts/my-mdx-page.mdx -> ./node_modules/next/dist/build/webpack/loaders/next-client-pages-loader.js?page=%2Fposts%2Fmy-mdx-page&absolutePagePath=...posts%2Fmy-mdx-page.mdx!
    at applyHandler (http://localhost:3000/_next/static/chunks/webpack.js?ts=1644440995401:852:31)
    at http://localhost:3000/_next/static/chunks/webpack.js?ts=1644440995401:536:21
    at Array.map (<anonymous>)

When starting in dev mode, I noticed this message relate to fast refresh and a "custom loader", though I'm not sure what it is:

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - automatically enabled Fast Refresh for 1 custom loader

Thank you

[ijjk]

@sebastienbarre could you open a fresh issue with a reproduction so we can investigate this case? It seems different from the original issue here.

[sebastienbarre]

Thanks for your time @ijjk. I created #34212, with a video capture and a repo.

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.