We couldn't find the correct component chunk with the name "

Error message

We couldn't find the correct component chunk with the name "${chunkName}"

What it means

Thrown by ProdLoader.loadComponent in the production browser bundle when the requested component chunk name does not exist in the webpack asyncRequires map. This mirrors the dev-loader error (104) but occurs in production after the bundle loads, meaning the route references a chunk that was not included in the build.

Source

Thrown at packages/gatsby/cache-dir/loader.js:849

      }
    )
  }
}

const createComponentUrls = componentChunkName =>
  (window.___chunkMapping[componentChunkName] || []).map(
    chunk => __PATH_PREFIX__ + chunk
  )

export class ProdLoader extends BaseLoader {
  constructor(asyncRequires, matchPaths, pageData) {
    const loadComponent = (chunkName, exportType = `components`) => {
      if (!global.hasPartialHydration) {
        exportType = `components`
      }

      if (!asyncRequires[exportType][chunkName]) {
        throw new Error(
          `We couldn't find the correct component chunk with the name "${chunkName}"`
        )
      }

      return (
        asyncRequires[exportType][chunkName]()
          // loader will handle the case when component is error
          .catch(err => err)
      )
    }

    super(loadComponent, matchPaths)

    if (pageData) {
      this.pageDataDb.set(findPath(pageData.path), {
        pagePath: pageData.path,
        payload: pageData,
        status: `success`,

View on GitHub (pinned to 8b06340921)

Solutions

Run `gatsby clean` before building to ensure .cache and public are fresh.
Verify the build completed without errors — check for chunk emission failures in build logs.
If switching partial hydration settings, clear CDN/browser caches and redeploy.
Inspect the page-data JSON for the failing path and confirm the componentChunkName exists in the webpack stats or the app chunk mapping.

Example fix

# before — stale cache after toggling partial hydration
gatsby build  # page-data references old chunk names

# after
gatsby clean && gatsby build
# then purge CDN cache before going live

Defensive patterns

Strategy: validation

Validate before calling

// Post-build validation: check all chunk names referenced in page-data exist
const fs = require('fs')
const path = require('path')

function validateChunks(publicDir) {
  const appJs = fs.readFileSync(path.join(publicDir, 'app-xxx.js'), 'utf8')
  // Cross-reference componentChunkName fields in page-data JSONs
  // against the chunk mapping in the built JS
  // (simplified — adapt to your build output)
  const pdDir = path.join(publicDir, 'page-data')
  // ...walk page-data, extract componentChunkName, verify in chunk mapping
}

Prevention

Run `gatsby clean` before every production build.
Purge CDN and browser caches when deploying builds with changed chunk hashes.
Don't toggle partial hydration flags between deployments without a clean rebuild.
Monitor build logs for chunk emission warnings or errors.

When it happens

Trigger: The production JS bundle tries to load a component chunk by name, but asyncRequires['components'][chunkName] is undefined. This happens when the page-data.json references a component chunk that wasn't generated — typically due to a build inconsistency, a stale page-data cache, or partial hydration mismatch when hasPartialHydration is toggled.

Common situations: Deploying a new build where page-data JSON from a previous build is still cached by the browser/CDN, switching partial hydration (ISR/DSG) flags between builds without clearing cache, a createPage call referencing a component that errored during build (chunk not emitted), or a mismatch between the page-data and the actual webpack output.

Related errors

AI-assisted analysis of gatsbyjs/gatsby@8b06340921 (2026-08-13). Data as JSON: /api/errors/64730081116ec91f. Report an issue: GitHub.