Astro — slot is undefined when rendering component

An Astro component throws "slot is not a function" or renders empty because the named slot was not passed or was misspelled in the parent template.

beginnerdebuggingastrocomponents

Symptoms

Error: Cannot read property "render" of undefined
A named slot renders nothing even though content was provided
The component works in one page but not another

Possible causes

The slot name in the component does not match the slot name passed by the parent
The parent uses default slot syntax but the component expects a named slot
The slot content is conditionally rendered and the condition is false

Diagnosis steps

Check the component slot definition

grep -n "slot" src( component.astro

Interpretation

Confirm the slot name matches what the parent passes.

Inspect the parent template

grep -n "slot=" src/pages/page.astro

Interpretation

Verify the slot attribute name and that content is inside the component tags.

Root cause

The slot name mismatch or missing slot content causes Astro to pass undefined to the component, which then fails when trying to render it.

Fix

Align the slot name between the component and parent, ensure slot content is non-empty, and use fallback content with <slot>default</slot> for optional slots.

Verify the fix

Render the page and confirm the slot content appears in the HTML output at the expected position.

Symptom walkthrough

An Astro component throws “slot is not a function” or renders empty because the named slot was not passed or was misspelled in the parent template. The error appears in production but may not surface in local development because the conditions that trigger it depend on the deployment environment or runtime configuration. Understanding the full symptom set helps distinguish this issue from similar errors.

Diagnosis in practice

Follow the diagnosis steps in the frontmatter to isolate the cause. Each step includes a command and an interpretation of the output. The goal is to narrow down whether the issue is in the configuration, the runtime, or the application code. Reproduce the error in a minimal setup before applying a fix.

Root cause

The slot name mismatch or missing slot content causes Astro to pass undefined to the component, which then fails when trying to render it.

Fix

Align the slot name between the component and parent, ensure slot content is non-empty, and use fallback content with default for optional slots. After applying the fix, monitor the system to confirm the error does not recur under load or in different environments.

Verification

Render the page and confirm the slot content appears in the HTML output at the expected position. If the verification passes, the fix is confirmed; if not, re-examine the diagnosis steps for missed contributing factors.

Diagnostic commands

Run these commands to reproduce and diagnose the issue:

grep -n "slot" src( component.astro
grep -n "slot=" src/pages/page.astro