{"record":{"id":"76595f1e2ba3ac61","repo":"gatsbyjs/gatsby","slug":"couldn-t-find-layout-component-at-gatsby-layout","errorCode":null,"errorMessage":"Couldn't find layout component at \"${GATSBY_LAYOUT_COMPONENT_PATH}.\n\nPlease create layout component in that location or specify path to layout component in gatsby-config.js","messagePattern":"Couldn't find layout component at \"(.+?)\\.\n\nPlease create layout component in that location or specify path to layout component in gatsby-config\\.js","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"packages/gatsby-plugin-layout/src/wrap-page.js","lineNumber":9,"sourceCode":"const React = require(`react`)\n\nconst preferDefault = m => (m && m.default) || m\nlet Layout\ntry {\n  Layout = preferDefault(require(GATSBY_LAYOUT_COMPONENT_PATH))\n} catch (e) {\n  if (e.toString().indexOf(`Error: Cannot find module`) !== -1) {\n    throw new Error(\n      `Couldn't find layout component at \"${GATSBY_LAYOUT_COMPONENT_PATH}.\\n\\n` +\n        `Please create layout component in that location or specify path to layout component in gatsby-config.js`\n    )\n  } else {\n    // Logging the error for debugging older browsers as there is no way\n    // to wrap the thrown error in a try/catch.\n    console.error(e)\n    throw e\n  }\n}\n\n// eslint-disable-next-line react/prop-types,react/display-name\nmodule.exports = ({ element, props }) => <Layout {...props}>{element}</Layout>\n","sourceCodeStart":1,"sourceCodeEnd":23,"githubUrl":"https://github.com/gatsbyjs/gatsby/blob/8b06340921ffdf23125a365b9c9923690cb62ce6/packages/gatsby-plugin-layout/src/wrap-page.js#L1-L23","documentation":"Thrown by gatsby-plugin-layout's wrap-page.js when requiring GATSBY_LAYOUT_COMPONENT_PATH raises 'Cannot find module'. The plugin defines this webpack global during onCreateWebpackConfig to the resolved layout path; if no file exists there, the synchronous require fails and the wrapper converts it to an actionable message.","triggerScenarios":"Configuring gatsby-plugin-layout (or relying on its default src/layouts/index) but the resolved component file does not exist on disk; the component option points to a missing path; src/layouts/index.[js|jsx] was never created.","commonSituations":"Defaulting to src/layouts/index but never creating it; renaming/moving the layout file without updating the plugin's component option; using a starter that expected a layout file you deleted; build runs in an environment where the path case differs (case-sensitive FS).","solutions":["Create the layout file at src/layouts/index.js (or .jsx) exporting a default React component.","Or set the plugin's `component` option in gatsby-config.js to the actual layout file path.","Verify the path exists with the exact case on case-sensitive filesystems."],"exampleFix":"// gatsby-config.js — before\n{ resolve: 'gatsby-plugin-layout', options: { component: 'src/layouts/default' } }\n// after\n{ resolve: 'gatsby-plugin-layout', options: { component: path.resolve('src/layouts/index.js') } }\n// and ensure src/layouts/index.js exports a default component","handlingStrategy":"validation","validationCode":"const fs = require('fs')\nif (!fs.existsSync(layoutComponentPath)) {\n  console.error(`Layout component missing at ${layoutComponentPath}`)\n}","typeGuard":"const layoutFileExists = (p: string): boolean => { try { return fs.existsSync(p) } catch { return false } }","tryCatchPattern":null,"preventionTips":["Create src/layouts/index.js before enabling gatsby-plugin-layout.","Set the `component` option to the actual file path.","Verify path case on case-sensitive filesystems."],"tags":["gatsby-plugin-layout","layout","webpack","missing-file"],"backgroundTag":null,"analyzedSha":"8b06340921ffdf23125a365b9c9923690cb62ce6","analyzedAt":"2026-08-13T02:36:21.405Z","schemaVersion":2},"datasetVersion":"2026-08-13T04:17:16.726Z"}