11322

11322

Error message

${pluginName} created a page and didn't pass the path to the component.\n\nThe page object passed to createPage:\n${input}

What it means

Thrown by createPage when the page object has no `component` field (falsy). Code 11322. Every page must reference a component; omitting it panics with the offending input and the plugin name.

Source

Thrown at packages/gatsby/src/redux/actions/public.js:268

        report.panic({
          id: `11324`,
          context: {
            message: error,
          },
        })
      } else {
        if (!hasWarnedForPageComponentInvalidContext.has(page.component)) {
          report.warn(error)
          hasWarnedForPageComponentInvalidContext.add(page.component)
        }
      }
    }
  }

  // Check if a component is set.
  if (!page.component) {
    if (isNotTestEnv) {
      report.panic({
        id: `11322`,
        context: {
          input: page,
          pluginName: name,
        },
      })
    } else {
      // For test
      return `A component must be set when creating a page`
    }
  }

  const pageComponentPath = shadowCreatePagePath(page.component)
  if (pageComponentPath) {
    page.component = pageComponentPath
  }

  const { config, program } = store.getState()

View on GitHub (pinned to 8b06340921)

Solutions

Ensure every createPage call passes an absolute path string in `component`, typically `path.resolve(`./src/templates/post.js`)`.
Verify the variable holding the component path is assigned before createPage runs.
Use the printed `input` object in the panic to identify which page lacked a component.

Example fix

// before
createPage({ path: `/p/`, context: { id } /* component missing */ })
// after
const postTemplate = path.resolve(`./src/templates/post.js`)
createPage({ path: `/p/`, component: postTemplate, context: { id } })

Defensive patterns

Strategy: validation

Validate before calling

if (!page.component || typeof page.component !== 'string') {
  throw new Error('createPage requires a component path string')
}
actions.createPage(page)

Type guard

function hasComponent(p): p is { component: string } {
  return typeof p?.component === 'string' && p.component.length > 0
}

Prevention

Always pass an absolute component path (path.resolve).
Confirm the variable holding the template path is defined before createPage.
Cover createPage calls with tests asserting component is set.

When it happens

Trigger: A createPage call where `component` is undefined, null, or empty string; the !page.component check fires after the path/context checks.

Common situations: Dynamic import returning undefined assigned to component; typo (`Component` vs `component`); a templatePath variable that resolved to undefined; building pages conditionally and forgetting the component branch.

Related errors

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