[NextJS 14.1.0] TypeError: Cannot read properties of undefined (reading 'call')

[dashawk]

Link to the code that reproduces this issue

https://github.com/dashawk/nextjs-14-bugger

To Reproduce

• Clone the provided repository
• Run yarn install && yarn dev
• Browse to http://localhost:3000

Current vs. Expected behavior

After doing all the reproduction steps, you will see the error. As you can see, I have already applied the suggested fix for canary@14.1.1-canary.51

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Pro
Binaries:
  Node: 20.11.0
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.1.0
  eslint-config-next: 14.1.0
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

App Router, Data fetching (gS(S)P, getInitialProps), Dynamic imports (next/dynamic), Metadata (metadata, generateMetadata, next/head), Middleware / Edge (API routes, runtime), Module resolution (CJS / ESM, module resolving), Routing (next/router, next/navigation, next/link)

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

I have encountered this issue only in NextJS@14.1.0 which is giving me a headache.

_

Upgrading might not be a very good habit.

_

[icyJoseph]

Hi,

I can't really reproduce... https://stackblitz.com/edit/github-zj7avh?file=src%2Fapp%2Fpage.tsx

I wonder if the problem is within your OS or Node.js version?

If you run node -e "console.log(process.arch)" does that match your OS architecture?

[dashawk]

It does match my OS

Is it possible that this is just a cache issue?

[icyJoseph]

Alright, could you try with a Node version in the 18 range? Say 18.18.0?

Clean up all of the node_modules and lock file too.

[dashawk]

Here is what I did just now.

I still use the node version v20.11.0

Step I did try

# Clean up the cache
npm cache clean --force

# Delete yarn.lock
rm yarn.lock

# Run dev again
yarn dev

I did not see the TypeError anymore. For some reason it fixes the issue. I cannot determine what caused the issue though.

[dashawk]

Here is what I did just now.

I still use the node version v20.11.0

Step I did try

# Clean up the cache
npm cache clean --force

# Delete yarn.lock
rm yarn.lock

# Run dev again
yarn dev

I did not see the TypeError anymore. For some reason it fixes the issue. I cannot determine what caused the issue though.

Though this steps did not fix my other project with the same setup.

Here is the other project that I am talking about. https://github.com/dashawk/swertres-app

I have tried

I have already tried clearing out the node_modules and the lock files and did a new yarn install using node v18.17.0 but it is still the same thing happening.

[narasimhajupally]

facing the same issue during HMR and navigation when using npm run dev doing ctrl+shift+r (hard reload) removes the error and renders the page correctly but again when a file is changed and HMR is triggered resulting in the same error. using node lts : 20.11.1

[narasimhajupally]

ok when I killed npm run dev and reloaded the localhost the page was still rendered. From the network tab, I got to know the page was being fetched from a service worker so I unregistered it and the problem is gone

[dashawk]

ok when I killed npm run dev and reloaded the localhost the page was still rendered. From the network tab, I got to know the page was being fetched from a service worker so I unregistered it and the problem is gone

Is there a way that we can disable this feature? It is probably like a caching issue.

[narasimhajupally]

I think the service worker gets registered when you do npm run start and open localhost:3000. So, for previewing the prod build run on a different port or open in incognito, guessing.

[fstovarr]

I am getting TypeError: Cannot read properties of undefined (reading 'call') after introducing a very basic middleware. It works well on my local but the error appears after deploying to a preview env in Vercel.

[GET] [middleware: "src/middleware"] /exhibitions/{***}/{***} reason=EDGE_FUNCTION_INVOCATION_FAILED, status=500, user_error=true

TypeError: Cannot read properties of undefined (reading 'call')

It happens on Nextj14. Current version: 14.2.2

My middleware:

import {NextResponse} from 'next/server'

export function middleware() {
  return NextResponse.next()
}

export const config = {
  matcher: '/exhibitions/:path+',
}

[huilensolis]

I'm facing the same error with the app router.

I'm calling a function from a client component, then redirecting to a route which is intercepted by a middleware.ts. I have used many server actions in my application that work fine, but this one doesn't, and idk why.

in development mode, I get:

⨯ TypeError: __webpack_modules__[moduleId] is not a function
    at Object.__webpack_require__ [as require] (/.next/server/webpack-runtime.js:33:42)

and in production mode, I get:

TypeError: Cannot read properties of undefined (reading 'call')
    at Object.t [as require] (/home/huilensolis/dev/projects/Pictura/.next/server/webpack-runtime.js:1:143)
    at /home/huilensolis/dev/projects/Pictura/node_modules/.pnpm/next@14.0.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:15:473
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async rc (/home/huilensolis/dev/projects/Pictura/node_modules/.pnpm/next@14.0.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:14:5243)
    at async rj (/home/huilensolis/dev/projects/Pictura/node_modules/.pnpm/next@14.0.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:15:22333)
    at async doRender (/home/huilensolis/dev/projects/Pictura/node_modules/.pnpm/next@14.0.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/base-server.js:1406:30)
    at async cacheEntry.responseCache.get.routeKind (/home/huilensolis/dev/projects/Pictura/node_modules/.pnpm/next@14.0.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/base-server.js:1567:28)
    at async NextNodeServer.renderToResponseWithComponentsImpl (/home/huilensolis/dev/projects/Pictura/node_modules/.pnpm/next@14.0.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/base-server.js:1475:28)
    at async NextNodeServer.renderPageComponent (/home/huilensolis/dev/projects/Pictura/node_modules/.pnpm/next@14.0.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/base-server.js:1852:24)
    at async NextNodeServer.renderToResponseImpl (/home/huilensolis/dev/projects/Pictura/node_modules/.pnpm/next@14.0.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/server/base-server.js:1890:32)

my node version:

> node -v
v18.18.0

my node architecture:

> node -e "console.log(process.arch)"
x64

my os architecture:

Linux 6.8.2-arch2- x86_64 GNU/Linux

[dashawk]

This issue still seems to be on going until now.

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

[murphpdx]

We're facing the same issue in production. We are hosted on vercel. I believe it's building with Node version 20.11.0 and Detected Next.js version: 14.0.3.

This error is happening pretty often and slowing down our page load.

I attempted running the app in production with node version 18 and I'm still seeing the error.

[JClackett]

Having this a lot in production as well, 14.2.3, node 20.

Cannot read properties of undefined (reading 'call')

Chrome 126.0.0 Windows >=10

Server action to login in a user, basic form that takes email and password