{"record":{"id":"a40aa8a8b1dc2587","repo":"gatsbyjs/gatsby","slug":"expected-head-export-to-be-a-function-got-typ","errorCode":null,"errorMessage":"Expected \"Head\" export to be a function got \"${typeof head}\".","messagePattern":"Expected \"Head\" export to be a function got \"(.+?)\"\\.","errorType":"validation","errorClass":null,"httpStatus":null,"severity":"error","filePath":"packages/gatsby/cache-dir/head/utils.js","lineNumber":29,"sourceCode":" */\nexport function filterHeadProps(input) {\n return {\n location: {\n pathname: input.location.pathname,\n },\n params: input.params,\n data: input.data || {},\n serverData: input.serverData,\n pageContext: input.pageContext,\n }\n}\n\n/**\n * Throw error if Head export is not a valid function\n */\nexport function headExportValidator(head) {\n if (typeof head !== `function`)\n throw new Error(\n `Expected \"Head\" export to be a function got \"${typeof head}\".`\n )\n}\n\n/**\n * Warn once for same messsage\n */\nlet warnOnce = _ => {}\nif (process.env.NODE_ENV !== `production`) {\n const warnings = new Set()\n warnOnce = msg => {\n if (!warnings.has(msg)) {\n console.warn(msg)\n }\n warnings.add(msg)\n }\n}\n","sourceCodeStart":11,"sourceCodeEnd":47,"githubUrl":"https://github.com/gatsbyjs/gatsby/blob/8b06340921ffdf23125a365b9c9923690cb62ce6/packages/gatsby/cache-dir/head/utils.js#L11-L47","documentation":"Thrown by headExportValidator in the Head API utility when the exported 'Head' from a page is not a function. Gatsby's Head API expects a React function component exported as `Head` that returns elements to inject into the document . If the export is an object, string, class, or any non-function type, validation fails.","triggerScenarios":"A page or template file exports `Head` as something other than a function — e.g. `export const Head = ...` (JSX element instead of a component), `export const Head = { title: 'x' }` (object), or the Head export is shadowed/overwritten by another named export.","commonSituations":"Developer writes `export const Head = Home` instead of `export const Head = () => Home`, copies a Head export from a page that used a variable, or accidentally exports a constant with the same name.","solutions":["Ensure the Head export is an arrow function or function declaration: `export const Head = () => ...`.","Check for duplicate `Head` named exports in the same file that shadow each other.","If Head receives props, make sure it's defined as a function that accepts props: `export const Head = ({ data }) => {data.title}`.","Run TypeScript or ESLint checks to catch non-function exports of Head."],"exampleFix":"// before — Head is a JSX element, not a function\nexport const Head = My Page\n\n// after — Head is a function component\nexport const Head = () => My Page","handlingStrategy":"type-guard","validationCode":null,"typeGuard":"// Type guard for Head exports (TypeScript)\nfunction isValidHeadExport(head: unknown): head is React.FC {\n return typeof head === 'function'\n}\n\n// Usage in a test or build check:\nimport * as Page from './src/pages/index'\nif (Page.Head !== undefined && !isValidHeadExport(Page.Head)) {\n throw new Error('Head export must be a function')\n}","tryCatchPattern":null,"preventionTips":["Always define Head as an arrow function or function declaration, never a bare JSX element.","Add an ESLint rule or TypeScript check that Head exports are typed as React.FC or () => JSX.Element.","Use code review to catch accidental `export const Head = ` patterns.","Test Head exports in isolation during development."],"tags":["head-api","react","seo","validation","export"],"backgroundTag":null,"analyzedSha":"8b06340921ffdf23125a365b9c9923690cb62ce6","analyzedAt":"2026-08-13T02:36:21.405Z","schemaVersion":2},"datasetVersion":"2026-08-13T04:17:16.726Z"}