next.js: Fast refresh errors in next 12.0.8
Run next info
(available from version 12.0.8 and up)
Operating System:
Platform: darwin
Arch: x64
Version: Darwin Kernel Version 21.2.0: Sun Nov 28 20:28:54 PST 2021; root:xnu-8019.61.5~1/RELEASE_X86_64
Binaries:
Node: 14.17.6
npm: 6.14.15
Yarn: 1.22.17
pnpm: N/A
Relevant packages:
next: 12.0.8
react: 17.0.2
react-dom: 17.0.2
What version of Next.js are you using?
12.0.8
What version of Node.js are you using?
14.17.6
What browser are you using?
Microsoft Edge dev
What operating system are you using?
macOS Monterey v12.1
How are you deploying your application?
Vercel
Describe the Bug
After updating to next 12.0.8 im getting fast refresh error.
When editing my app with the dev server running I am randomly getting this error. It’s not happening every time I edit a file and its not related to one file:
"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."
Expected Behavior
Fast refresh works correctly and no error is present
To Reproduce
I created minimal reproduce repository here: https://github.com/snax4a/middleware-issue-demo Just try to edit some file / add comments multiple times and hit save
The issue is related to middleware used in the project. When I remove middleware there is no error
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Comments: 16 (4 by maintainers)
We’ve been tracking this issue in #31827 – it has to do with importing files into middleware. There’s a reproduction repo in that thread.
I have added my own reproduction demo to the reproduction description
This post rings a bell: we are using openapi-generator-cli to generate the client side files. One generated class is
runtime.ts
which roughly looks as following:After after updated to 12.0.8 (it used to work like a charm beforehand), we’re now seeing this output in the console:
Cannot read properties of undefined (reading 'middleware')
.We’re also getting a similar error after updating to
12.0.8
The error is like following
This is being thrown inside a TypeScript class that is generated using this library
swagger-typescript-api
And it seems so far to be thrown when trying to access properties using thethis
keyword inside the class methods.Could this be related to
Webpack
orswc
?It is a bit hard to replicate since the tool is generating the Code from an API of one of our projects, but I’ll try to put something together 🤞
Hope this helps a little until then!
I think I found what may be causing this issue.
In my project i am using middleware for all my pages. Middleware code is following:
It’s just a simple redirect to /dashboard page.
After removing this middleware I can no longer reproduce the fast refresh issue.
Crucial thing is that in the previous next.js versions 12.0.7 and lower this middleware was not working on Vercel, on the dev server it worked perfectly but on Vercel there was no redirection.
I have investigated and noticed that the problem was because i was using next-translate package and i was wrapping my next.config with nextTranslate() function.
This is how my next.config.js look:
When I removed nextTranslate from the config, the middleware on vercel started working on next v12.0.7
I was about to report this issue but then I saw next v12.0.8 version and saw that issue with middleware was fixed in this release.
In my opinion, next.js is having some config problems when wrapped with other packages.
I’ve the same issue but the message is
originalFactory is undefined