{"record":{"id":"fb01ae84976a6c67","repo":"gatsbyjs/gatsby","slug":"we-couldn-t-find-the-correct-component-chunk-with","errorCode":null,"errorMessage":"We couldn't find the correct component chunk with the name \"${chunkName}\"","messagePattern":"We couldn't find the correct component chunk with the name \"(.+?)\"","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"packages/gatsby/cache-dir/dev-loader.js","lineNumber":37,"sourceCode":"        ...newPageData.result,\n      },\n      page: {\n        ...cachedPage.payload.page,\n        getServerDataError: newPageData.getServerDataError,\n        staticQueryResults: newPageData.staticQueryResults,\n      },\n    },\n  }\n}\n\nclass DevLoader extends BaseLoader {\n  constructor(asyncRequires, matchPaths) {\n    const loadComponent = (chunkName, exportType = `components`) => {\n      if (!this.asyncRequires[exportType][chunkName]) {\n        if (exportType === `head`) {\n          return null\n        }\n        throw new Error(\n          `We couldn't find the correct component chunk with the name \"${chunkName}\"`\n        )\n      }\n\n      return (\n        this.asyncRequires[exportType][chunkName]()\n          // loader will handle the case when component is error\n          .catch(err => err)\n      )\n    }\n    super(loadComponent, matchPaths)\n    this.asyncRequires = asyncRequires\n\n    const socket = getSocket()\n\n    this.notFoundPagePathsInCaches = new Set()\n\n    if (socket) {","sourceCodeStart":19,"sourceCodeEnd":55,"githubUrl":"https://github.com/gatsbyjs/gatsby/blob/8b06340921ffdf23125a365b9c9923690cb62ce6/packages/gatsby/cache-dir/dev-loader.js#L19-L55","documentation":"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.","triggerScenarios":"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.","commonSituations":"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.","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."],"exampleFix":"// before — component path typo in gatsby-node.js\ncreatePage({\n  path: '/about',\n  component: require.resolve('./src/templates/Abuot.tsx'), // typo\n})\n\n// after\ncreatePage({\n  path: '/about',\n  component: require.resolve('./src/templates/About.tsx'),\n})","handlingStrategy":"validation","validationCode":"// Validate all createPage component paths resolve at build start\nconst fs = require('fs')\nconst path = require('path')\n\n// In gatsby-node.js, during createPagesStatefully or a custom check:\nfunction validateComponentPath(componentPath) {\n  if (!fs.existsSync(path.resolve(componentPath))) {\n    throw new Error(`createPage component does not exist: ${componentPath}`)\n  }\n}","typeGuard":null,"tryCatchPattern":null,"preventionTips":["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."],"tags":["dev-mode","webpack","chunk","routing","dev-loader"],"backgroundTag":null,"analyzedSha":"8b06340921ffdf23125a365b9c9923690cb62ce6","analyzedAt":"2026-08-13T02:36:21.405Z","schemaVersion":2},"datasetVersion":"2026-08-13T04:17:16.726Z"}