facebook/docusaurus · error · Error

Invalid route config: path must be a string and component is

Error message

Invalid route config: path must be a string and component is required.\n${JSON.stringify(routeConfig)}

What it means

Thrown by `genChunkNames` route processing when a route's `path` is not a string or its `component` is missing. Every route must declare a string path and a React component; otherwise codegen cannot emit the routing modules. The full route object is JSON-serialized into the message for diagnosis.

Source

Thrown at packages/docusaurus/src/server/codegen/codegenRoutes.ts:217

  index: number,
  level: number,
): string {
  const {
    path: routePath,
    component,
    modules = {},
    context,
    routes: subroutes,
    priority,
    exact,
    metadata,
    props,
    plugin,
    ...attributes
  } = routeConfig;

  if (typeof routePath !== 'string' || !component) {
    throw new Error(
      `Invalid route config: path must be a string and component is required.
${JSON.stringify(routeConfig)}`,
    );
  }

  // Because 2 routes with the same path could lead to hash collisions
  // See https://github.com/facebook/docusaurus/issues/10718#issuecomment-2498516394
  function generateUniqueRouteKey(): {
    routeKey: string;
    routeHash: string;
  } {
    const hashes = [
      // // OG algo to keep former snapshots
      () => simpleHash(JSON.stringify(routeConfig), 3),
      // Other attempts, not ideal but good enough
      // Technically we could use Math.random() here but it's annoying for tests
      () => simpleHash(`${level}${index}`, 3),
      () => simpleHash(JSON.stringify(routeConfig), 4),

View on GitHub (pinned to 3f483e80e3)

Solutions

Inspect the serialized route object in the error message to find which plugin emitted it.
Ensure every route object has `component: '@theme/SomeComponent'` (or an alias) and a string `path`.
For sub-routes, confirm parent plugins propagate `component` correctly.
Add a unit test on your plugin's route output asserting `typeof path === 'string' && !!component`.

Example fix

// before (plugin routes)
export default {
  path: '/my-page',
  // component missing
  exact: true,
};
// after
export default {
  path: '/my-page',
  component: '@theme/MDXPage',
  exact: true,
};

Defensive patterns

Strategy: validation

Validate before calling

if (typeof routePath !== 'string' || !component) {
  throw new Error(`Route invalid: ${JSON.stringify(routeConfig)}`);
}

Type guard

function isValidRouteConfig(r: any): r is { path: string; component: string } {
  return typeof r?.path === 'string' && typeof r?.component === 'string' && !!r.component;
}

Prevention

Validate plugin route output in dev with the type guard above.
Add unit tests asserting every emitted route has `path` and `component`.
Type your plugin's route return as `RouteConfig` to catch missing fields at compile time.

When it happens

Trigger: A plugin's `routes` (or sub-`routes`) array contains an entry where `path` is undefined/non-string, or where `component` is omitted/falsy. Triggered during route codegen at build time.

Common situations: Custom plugin returning a route without `component`; versioned docs/plugin emitting a route with `path: undefined` after a refactor; typo in plugin route definition; spread/rest accidentally swallowing `component`.

Related errors

AI-assisted analysis of facebook/docusaurus@3f483e80e3 (2026-08-12). Data as JSON: /api/errors/e0109903e02f2945. Report an issue: GitHub.