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

[JClackett]

Link to the code that reproduces this issue

https://github.com/JClackett/next-server-actions

To Reproduce

Getting this consistently in production only and only for certain users

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

message: Cannot read properties of undefined (reading 'call'),
name: TypeError,
stack: TypeError: Cannot read properties of undefined (reading 'call') at l
(<url>/_next/static/chunks/webpack-0062ff542f3d788d.js?

I posted an issue a while back and am still struggling to get a repro, but it's consistently happening. I can see its happening on certain actions but when I test those in production it doesnt error, so im assuming its something to do with a user's browser maybe?

#67208

Looking into the sources there's one webpack file generated and there are 2 references to .call

try {
            f[e].call(n.exports, n, n.exports, l),
            r = !1
        } finally {
            r && delete d[e]
        }

and

   l.o = function(e, t) {
        return Object.prototype.hasOwnProperty.call(e, t)
    },

I can see from the session replays that the server action isnt even being called, it throws an error on the client straight away as soon as the form is submitted.

Current vs. Expected behavior

Server actions dont throw exceptions

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.6.0: Mon Jul 29 21:14:30 PDT 2024; root:xnu-10063.141.2~1/RELEASE_ARM64_T6000
  Available memory (MB): 32768
  Available CPU cores: 8
Binaries:
  Node: 18.20.4
  npm: 10.7.0
  Yarn: 1.22.19
  pnpm: 8.15.7
Relevant Packages:
  next: 14.2.14 // Latest available version is detected (14.2.14).
  eslint-config-next: N/A
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.6.2
Next.js Config:
  output: N/A

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

Navigation, Runtime, Webpack

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

Vercel (Deployed)

Additional context

Deployed on vercel, production only.

[samcx]

@JClackett Thank you for submitting an issue!

I was not able to replicate the issue when deployed on Vercel.

so im assuming its something to do with a user's browser maybe?

.call() is supported by many browsers, so not sure if that is the case.

Is the supposed to replicate the error all the time?

[JClackett]

@samcx Not all the time no, it seems to happen very sporadically for me.

yeah but what is .call() being called on in this webpack file?

for example, in:

f[e].call(n.exports, n, n.exports, l),

f[e] could be returning undefined.

[samcx]

@JClackett Can you share a screenshot (or recording) when you receive this error? Not able to replicate it even sporadically.

[GuillaumeHalb]

I used to get the same error randomly when using redirect in a server action. I have never been able to reproduce 100%.
I'm now using 14.2.5 and I'm not sure I had this error since.

In my case, it's in a form. I store data in DB and then redirect to form next page B, then it sometimes throw, and when it does I need to refresh the page A, and click again to go to next form page B.

EDIT:
Still get it in 14.2.5:

TypeError: Cannot read properties of undefined (reading 'call')
    at Object.t [as require] (/app/.next/server/webpack-runtime.js:1:143)
    at require (/app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:16:18490)
    at eL (/app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:144597)
    at /app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:146830
    at /app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:146924
    at Array._fromJSON (/app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:147608)
    at JSON.parse (<anonymous>)
    at eU (/app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:145478)
    at eN.then (/app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:145163) {
  digest: '1561086412'
}

[Rikard-Johansson97]

I used to get the same error randomly when using redirect in a server action. I have never been able to reproduce 100%.

I'm now using 14.2.5 and I'm not sure I had this error since.

In my case, it's in a form. I store data in DB and then redirect to form next page B, then it sometimes throw, and when it does I need to refresh the page A, and click again to go to next form page B.

Same for me. It's very random...

[JClackett]

still getting this often

[MattisAbrahamsson]

I also get this issue a lot in Sentry, I have never been able to reproduce it myself. Running Next.js 14.2.15

[dariodjuric]

I have seen this too with server actions (just regular server actions invoked as a result of a user action). And it seems to be correlated with a new deployment to Vercel. Every time a new deployment happens, a few of these pop up in Sentry.

[samcx]

@JClackett Do you have Skew Protection enabled on Vercel (could be related to when a new Deployment is created) by any chance?

[JClackett]

@samcx Yeah skew protection is enabled but its only for 12 hours right, which in the scheme of user sessions is nothing, and especially that they only get new versions if they navigate to another route on the old version right? They could leave a tab open over night come back to work, submit an action, and it's already out of date - so it's kind of not very useful sometimes. I guess I can only deploy during the day and hope that everyone clicks a link and gets the latest version, but that seems pretty loose as a general strategy.

Is there no way to route actions to the new deployment or something, to force users onto the new version. I dont even have that many monthly users relative to big companies (5k) and seeing this in Sentry very often - can't imagine what it's like with 100k users? is this just a limitation of server actions? can they not be tagged somehow so they have the same ID across deploys given certain criteria (similar to api routes' url)? I get that this could happen if I defined a regular API route, but at least the path is static, and I can handle backwards compatibility, so it should never error given I handle this properly - but in server actions it just blows up and I have 0 control. Looking for advice here as it's super confusing.

[dariodjuric]

To help you pinpoint this issue, this this is the part of the source code where this happens. It's on line 17. As others have reported, it happens just before invoking the server action. I have seen this with users that had the page open for a while (like a week), and there were deployments in the meantime.

function __webpack_require__(moduleId) {
    // Check if module is in cache
    var cachedModule = __webpack_module_cache__[moduleId];
    if (cachedModule !== undefined) {
        return cachedModule.exports;
    }
    // Create a new module (and put it into the cache)
    var module = __webpack_module_cache__[moduleId] = {
        id: moduleId,
        loaded: false,
        exports: {}
    };

    // Execute the module function
    var threw = true;
    try {
        __webpack_modules__[moduleId].call(module.exports, module, module.exports, __webpack_require__);
        threw = false;
    } finally {
        if(threw) delete __webpack_module_cache__[moduleId];
    }

    // Flag the module as loaded
    module.loaded = true;

    // Return the exports of the module
    return module.exports;
}

// expose the modules object (__webpack_modules__)
__webpack_require__.m = __webpack_modules__;