Fixing TypeError: Cannot read properties of undefined (reading 'call') in Next.js webpack-runtime.js

Open Source
, , , ,
1

Since clearing Vercel’s cache (via redeploy or purge), trying a different browser, and presumably doing browser cache clears/incognito tests didn’t resolve it, this points away from simple client-side caching and toward a more persistent mismatch or build/deployment issue.

This exact error (TypeError: Cannot read properties of undefined (reading 'call') in webpack-runtime.js or similar webpack chunks) is a well-known Next.js production-only problem. It occurs when Webpack’s module loader encounters an undefined module factory function — almost always due to the browser loading mismatched/out-of-sync JavaScript chunks after a deployment or build change.

Why it survives cache clears & new browsers

  • Vercel edge/CDN propagation delays — Even after a redeploy, some chunks might still serve old versions briefly (or for certain regions like TZ/EAT).
  • Service workers or PWA remnants — If your app ever had a service worker (even from a template like create-next-app with PWA support), it can persist across browsers/devices until fully unregistered.
  • Build ID / chunk hash mismatch — Next.js generates new hashes on each build. If any client loads a page with old <script> tags pointing to stale chunks, it fails exactly like this.
  • Rare but reported: Monorepo setups (Turborepo/Nx), edge runtime conflicts, or certain webpack optimizations can cause it, but usually it’s still caching-related.

Next troubleshooting & fix steps (escalating order)

  1. Force a completely fresh build + deploy with new assets

    • Make a trivial change (e.g., add/remove a space in any file, or bump a version in package.json).
    • Commit & push → trigger a new Vercel deploy.
    • Immediately after deploy succeeds, open your site in incognito/private mode (or a browser you’ve never used for the site).
    • If still broken → proceed.

  2. Manually purge Vercel cache more aggressively

    • In Vercel dashboard → your project → Deployments → find latest → Redeploy (forces fresh assets).
    • Or use Vercel’s “Purge Cache” if available in advanced settings.
    • Wait 1-2 min, then test in incognito.

  3. Fully nuke any service workers (even hidden ones)
    Open your site → DevTools (F12) → Application tab:

    • Service Workers → Unregister everything listed (even if “stopped”).
    • Clear site data (check all boxes: IndexedDB, Cache Storage, etc.).
    • Do this in both normal and incognito windows.
    • Hard reload (Ctrl+Shift+R or Cmd+Shift+R).
      Many reports (including recent 2024–2025 GitHub issues) resolve exactly here, even after “clear cache” feels done.

  4. Check for edge runtime or monorepo issues

    • In next.config.js, look for experimental: { runtime: 'edge' } or per-page 'edge' runtime exports.
      If present → temporarily remove/switch to 'nodejs' and redeploy (edge runtime has known webpack mismatches in some setups).
    • If you’re in a monorepo (Turborepo/Nx/pnpm workspace), this error appears more often — try building/deploying the Next.js app standalone to isolate.

  5. Inspect the actual loaded chunks

    • Open site → DevTools → Network tab → filter by “js” or “webpack”.
    • Look at loaded files like /_next/static/chunks/webpack-*.js or main chunks.
    • Compare timestamps/ETags with what Vercel shows in deployment artifacts.
    • If they look old → definite stale asset problem.

  6. Temporary workaround: Force no-cache on scripts (for testing)
    Add this to your custom _document.js or via headers() in next.config.js (not ideal long-term, but confirms if it’s stale JS):

// In next.config.js 
module.exports = {
  async headers() {
    return [
      {
        source: '/_next/static/(.*)',
        headers: [
          { key: 'Cache-Control', value: 'no-store, max-age=0' },
        ],
      },
    ];
  },
};

Redeploy and test.

If after steps 1–3 it’s still happening consistently (even in fresh incognito on multiple devices/networks), share these to narrow it further:

  • Your Next.js version (npx next --version or from package.json)
  • App Router vs Pages Router?
  • Any custom next.config.js (especially webpack, experimental, or runtime settings)?
  • Does it fail on initial load, or only after navigation/refresh?
  • The full error in browser console (any other lines before/after the require one)?
  • Your Vercel project URL (if public) or a minimal repro repo?

In most cases like yours (post-cache-clear persistence), step 3 (service worker nuke) or a forced redeploy with trivial change fixes it within minutes. Let me know what happens after trying those!

Error Log:

⨯ TypeError: Cannot read properties of undefined (reading ‘call’)
    at Object.t [as require] (.next/server/webpack-runtime.js:1:190) { digest: ‘1673902388’ }
Uncaught (in promise) Error: func sseError not found at Object.
5

Can you share what version of Next.js you’re on? Next 16 uses Turbopack instead of Webpack so you shouldn’t be getting errors like this on up to date versions

6

I fixed it with sse-error-extension-conflict