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)

Most upvoted comments

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.

switz on Jan 14, 2022

I have added my own reproduction demo to the reproduction description

snax4a on Jan 14, 2022

We’re also getting a similar error after updating to 12.0.8

The error is like following

TypeError: Cannot read properties of undefined (reading 'baseApiParams')
    at _callee$ (webpack-internal:///./generated/auth/Api.ts:289:85)
    at tryCatch (webpack-internal:///./node_modules/next/dist/compiled/regenerator-runtime/runtime.js:45:40)
    at Generator.invoke [as _invoke] (webpack-internal:///./node_modules/next/dist/compiled/regenerator-runtime/runtime.js:274:22)
    at Generator.prototype.<computed> [as next] (webpack-internal:///./node_modules/next/dist/compiled/regenerator-runtime/runtime.js:97:21)
    at asyncGeneratorStep (webpack-internal:///./generated/auth/Api.ts:27:28)
    at _next (webpack-internal:///./generated/auth/Api.ts:45:17)
    at eval (webpack-internal:///./generated/auth/Api.ts:50:13)
    at new Promise (<anonymous>)
    at eval (webpack-internal:///./generated/auth/Api.ts:42:16)
    at Api.eval [as request] (webpack-internal:///./generated/auth/Api.ts:377:30)
    at sessionAuthenticateCreate (webpack-internal:///./generated/auth/Api.ts:489:30)
    at _callee$ (webpack-internal:///./utils.ts:157:36)
    at tryCatch (webpack-internal:///./node_modules/next/dist/compiled/regenerator-runtime/runtime.js:45:40)
    at Generator.invoke [as _invoke] (webpack-internal:///./node_modules/next/dist/compiled/regenerator-runtime/runtime.js:274:22)
    at Generator.prototype.<computed> [as next] (webpack-internal:///./node_modules/next/dist/compiled/regenerator-runtime/runtime.js:97:21)
    at asyncGeneratorStep (webpack-internal:///./utils.ts:45:28)
    at _next (webpack-internal:///./utils.ts:63:17)
    at eval (webpack-internal:///./utils.ts:68:13)
    at new Promise (<anonymous>)
    at Object.eval [as mutationFn] (webpack-internal:///./utils.ts:60:16)
    at Object.fn (webpack-internal:///./node_modules/react-query/es/core/mutation.js:142:31)
    at run (webpack-internal:///./node_modules/react-query/es/core/retryer.js:105:31)
    at new Retryer (webpack-internal:///./node_modules/react-query/es/core/retryer.js:166:3)
    at Mutation.executeMutation (webpack-internal:///./node_modules/react-query/es/core/mutation.js:136:20)
    at eval (webpack-internal:///./node_modules/react-query/es/core/mutation.js:96:20)

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 the this keyword inside the class methods.

Could this be related to Webpackor swc?

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!

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:

export class BaseAPI {

    private middleware: Middleware[];

    constructor(protected configuration = new Configuration()) {
        this.middleware = configuration.middleware;
    }
   ...
}

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').

ribeaud on Jan 17, 2022

We’re also getting a similar error after updating to 12.0.8

The error is like following

TypeError: Cannot read properties of undefined (reading 'baseApiParams')
    at _callee$ (webpack-internal:///./generated/auth/Api.ts:289:85)
    at tryCatch (webpack-internal:///./node_modules/next/dist/compiled/regenerator-runtime/runtime.js:45:40)
    at Generator.invoke [as _invoke] (webpack-internal:///./node_modules/next/dist/compiled/regenerator-runtime/runtime.js:274:22)
    at Generator.prototype.<computed> [as next] (webpack-internal:///./node_modules/next/dist/compiled/regenerator-runtime/runtime.js:97:21)
    at asyncGeneratorStep (webpack-internal:///./generated/auth/Api.ts:27:28)
    at _next (webpack-internal:///./generated/auth/Api.ts:45:17)
    at eval (webpack-internal:///./generated/auth/Api.ts:50:13)
    at new Promise (<anonymous>)
    at eval (webpack-internal:///./generated/auth/Api.ts:42:16)
    at Api.eval [as request] (webpack-internal:///./generated/auth/Api.ts:377:30)
    at sessionAuthenticateCreate (webpack-internal:///./generated/auth/Api.ts:489:30)
    at _callee$ (webpack-internal:///./utils.ts:157:36)
    at tryCatch (webpack-internal:///./node_modules/next/dist/compiled/regenerator-runtime/runtime.js:45:40)
    at Generator.invoke [as _invoke] (webpack-internal:///./node_modules/next/dist/compiled/regenerator-runtime/runtime.js:274:22)
    at Generator.prototype.<computed> [as next] (webpack-internal:///./node_modules/next/dist/compiled/regenerator-runtime/runtime.js:97:21)
    at asyncGeneratorStep (webpack-internal:///./utils.ts:45:28)
    at _next (webpack-internal:///./utils.ts:63:17)
    at eval (webpack-internal:///./utils.ts:68:13)
    at new Promise (<anonymous>)
    at Object.eval [as mutationFn] (webpack-internal:///./utils.ts:60:16)
    at Object.fn (webpack-internal:///./node_modules/react-query/es/core/mutation.js:142:31)
    at run (webpack-internal:///./node_modules/react-query/es/core/retryer.js:105:31)
    at new Retryer (webpack-internal:///./node_modules/react-query/es/core/retryer.js:166:3)
    at Mutation.executeMutation (webpack-internal:///./node_modules/react-query/es/core/mutation.js:136:20)
    at eval (webpack-internal:///./node_modules/react-query/es/core/mutation.js:96:20)

Could this be related to Webpackor swc?

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!

Elia-Darwish on Jan 14, 2022

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:

import { NextRequest, NextResponse } from 'next/server'

export default function middleware(req: NextRequest) {
  const { pathname } = req.nextUrl

  if (pathname === '/') {
    return NextResponse.redirect('/dashboard')
  } else {
    return NextResponse.next()
  }
}

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:

const nextTranslate = require('next-translate')

/** @type {import('next').NextConfig} */
const config = {
  reactStrictMode: true,
  i18n: {
    locales: ['pl', 'en'],
    defaultLocale: 'pl',
  },
}

module.exports = nextTranslate(config)

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.