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 DevLoader.loadComponent during development when the requested component chunk name does not exist in asyncRequires (the webpack-generated require map for 'components' or 'head'). In dev mode, Gatsby uses a synchronous chunk map; if the chunkName from a route's component path has no corresponding entry, the route cannot be loaded.

Source

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

        ...newPageData.result,
      },
      page: {
        ...cachedPage.payload.page,
        getServerDataError: newPageData.getServerDataError,
        staticQueryResults: newPageData.staticQueryResults,
      },
    },
  }
}

class DevLoader extends BaseLoader {
  constructor(asyncRequires, matchPaths) {
    const loadComponent = (chunkName, exportType = `components`) => {
      if (!this.asyncRequires[exportType][chunkName]) {
        if (exportType === `head`) {
          return null
        }
        throw new Error(
          `We couldn't find the correct component chunk with the name "${chunkName}"`
        )
      }

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

    const socket = getSocket()

    this.notFoundPagePathsInCaches = new Set()

    if (socket) {

View on GitHub (pinned to 8b06340921)

Solutions

Restart `gatsby develop` to rebuild the webpack chunk map from scratch.
Check gatsby-node.js createPage calls: verify every component path string points to an existing file.
Run `gatsby clean` to remove the .cache directory, then restart the dev server.
If a plugin injects the route, verify the plugin's API version and its expected component path format.

Example fix

// before — component path typo in gatsby-node.js
createPage({
  path: '/about',
  component: require.resolve('./src/templates/Abuot.tsx'), // typo
})

// after
createPage({
  path: '/about',
  component: require.resolve('./src/templates/About.tsx'),
})

Defensive patterns

Strategy: validation

Validate before calling

// Validate all createPage component paths resolve at build start
const fs = require('fs')
const path = require('path')

// In gatsby-node.js, during createPagesStatefully or a custom check:
function validateComponentPath(componentPath) {
  if (!fs.existsSync(path.resolve(componentPath))) {
    throw new Error(`createPage component does not exist: ${componentPath}`)
  }
}

Prevention

Always use require.resolve() for component paths in createPage to catch typos at build time.
Restart `gatsby develop` after structural changes to gatsby-node.js.
Run `gatsby clean` when the dev server behaves unexpectedly.
Keep page templates under a consistent directory (e.g. src/templates/) to avoid path confusion.

When it happens

Trigger: Navigating to a page whose component chunk name is not present in the dev-mode asyncRequires map. This typically happens when the dev server's in-memory webpack build is stale, a page was added but the dev server wasn't restarted, or a gatsby-node.js createPage call references a component path that doesn't resolve to a valid chunk.

Common situations: Editing gatsby-node.js to add/remove pages without restarting 'gatsby develop', referencing a component path in createPage that has a typo or doesn't exist, HMR leaving the chunk map in an inconsistent state, or a plugin that manipulates routing injecting an unknown chunk name.

Related errors

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