krahets/hello-algo · error · Error

Starfield: No origin element found.

Error message

Starfield: No origin element found.

What it means

Thrown by setup() in the starfield module only when `config.auto` is truthy. In auto mode an origin element is required (the point stars emanate from); it is taken from `config.originElement` or `document.querySelector('.starfield-origin')`. If neither resolves, setup aborts before binding mouse handlers.

Source

Thrown at overrides/javascripts/starfield.js:117

    canvas.height = height;

    canvas.style.position = "absolute";
    canvas.style.top = "0";
    canvas.style.left = "0";
    canvas.style.width = "100%";
    canvas.style.height = "100%";
    canvas.style.zIndex = "-1";
    canvasRGB = parseRGBA(config.canvasColor);

    container.appendChild(canvas);

    ctx = canvas.getContext("2d");

    if (config.auto) {
      origin =
        config.originElement || document.querySelector(".starfield-origin");
      if (!origin) {
        throw new Error("Starfield: No origin element found.");
      }
      originX = getOriginX(origin, container);
      originY = getOriginY(origin, container);

      origin.addEventListener("mouseenter", mouseEnterHandler);
      origin.addEventListener("mouseleave", mouseLeaveHandler);

      window.addEventListener("resize", resizeHandler);
    } else {
      originX = config.originX !== null ? config.originX : width / 2;
      originY = config.originY !== null ? config.originY : height / 2;
    }

    for (let i = 0; i < config.numStars; i++) {
      const star = createRandomStar();
      stars.push(star);
    }

View on GitHub (pinned to 69932aed18)

Solutions

  1. Add an element with class `starfield-origin` where you want stars to emanate, or pass `{ originElement: myEl }`.
  2. If you do not need mouse-interactive origin, call setup without `auto: true` (it falls back to originX/originY or canvas center).
  3. Confirm the origin element is present at setup time (DOMContentLoaded / after SPA render).
  4. Double-check the `.starfield-origin` class spelling in the template.

Example fix

// before
starfield.setup({ auto: true });

// after
const origin = document.querySelector('.starfield-origin');
if (origin) starfield.setup({ auto: true, originElement: origin });
else starfield.setup({ auto: false }); // or supply originX/originY
Defensive patterns

Strategy: validation

Validate before calling

// In auto mode, ensure an origin element exists before setup.
const origin = document.querySelector('.starfield-origin');
if (origin) {
  starfield.setup({ auto: true, originElement: origin });
} else {
  starfield.setup({ auto: false }); // or pass originX/originY
}

Type guard

function starfieldOriginReady(config) {
  if (!config || !config.auto) return true;
  const el = config.originElement || document.querySelector('.starfield-origin');
  return el instanceof HTMLElement;
}

Try / catch

try {
  starfield.setup(userConfig);
} catch (e) {
  if (e instanceof Error && /No origin element found/.test(e.message)) {
    // fall back to non-auto mode
    starfield.setup({ ...userConfig, auto: false });
  } else throw e;
}

Prevention

When it happens

Trigger: Calling setup({ auto: true }) on a page lacking any `.starfield-origin` element and without `originElement` in config; auto mode enabled in theme config but the corresponding origin markup is conditional and absent; origin element removed by an SPA route change before setup; selector typo.

Common situations: MkDocs/Material override where the origin element is only rendered on certain pages (e.g. the home/hero section); enabling `auto` globally but some pages omit the hero; deferred script racing the DOM; CSS class renamed without updating the JS config.

Related errors


AI-assisted analysis of krahets/hello-algo@69932aed18 (2026-08-13). Data as JSON: /api/errors/672499ce7b47c94c. Report an issue: GitHub.