What causes "useSlot must be used within SlotProvider" in iflytek/astron-agent?

Wrap the consuming subtree with (as done in DetailListPage).

iflytek/astron-agent · error · Error

useSlot must be used within SlotProvider

Error message

useSlot must be used within SlotProvider

What it means

`useSlot` reads a context created by SlotProvider (used for release-management detail pages). The context defaults to null and the hook throws 'useSlot must be used within SlotProvider' when null. It guarantees slot data (dynamic page slots) is always available to consumers.

Solutions

Wrap the consuming subtree with <SlotProvider> (as done in DetailListPage).
Ensure the provider is rendered on every route where slot children appear.
In tests, wrap the component under test with SlotProvider.
If optional use is intended, export a non-throwing hook returning context as possibly-null.

Example fix

// before
return <SlotConsumer />; // throws

// after
<SlotProvider value={slotValue}>
  <SlotConsumer />
</SlotProvider>

Defensive patterns

Strategy: try-catch

Validate before calling

const useSlotSafe = (): SlotContextType | null => useContext(SlotContext);

Type guard

const useHasSlot = (): boolean => useContext(SlotContext) !== null;

Try / catch

let slot: SlotContextType;
try {
  slot = useSlot();
} catch {
  return <FallbackNoSlots />;
}

Prevention

Render SlotProvider at the release-detail page root on all related routes.
Wrap Storybook/test renders with SlotProvider.
Avoid conditional rendering branches that mount consumers but skip the provider.
Prefer passing slot data via props when a component may be reused outside the provider.

When it happens

Trigger: Rendering a slot-consuming child outside the SlotProvider in release-management detail-list-page, rendering the page fragment in a different route, or conditionally rendering the consumer while the provider is skipped.

Common situations: Extracting a child component to another page without moving the provider; test/story render missing the wrapper; provider unmounted early by a conditional (e.g. loading state bypasses the provider).

Understand the failure class

Background: "missing required argument" and "the following required arguments were not provided": what required-argument errors mean and how to fix them — this error's family across 20 libraries.

Related errors

AI-assisted analysis of iflytek/astron-agent@5e758547a8 (2026-09-12). Data as JSON: /api/errors/6b6bf200218991a5. Report an issue: GitHub.

Appendix: source

Thrown at console/frontend/src/pages/release-management/detail-list-page/index.tsx:31

import errorIcon from '@/assets/imgs/sparkImg/errorIcon.svg';
import workflowIcon from '@/assets/imgs/release/workflowIcon.svg';

import styles from './index.module.scss';
import { useTranslation } from 'react-i18next';

// 创建插槽上下文
interface SlotContextType {
  registerSlotContent: (content: React.ReactNode) => void;
  unregisterSlotContent: () => void;
}

const SlotContext = createContext<SlotContextType | null>(null);

// 导出hook供子组件使用
export const useSlot = () => {
  const context = useContext(SlotContext);
  if (!context) {
    throw new Error('useSlot must be used within SlotProvider');
  }
  return context;
};

const DetailListPage = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const { botId } = useParams();
  const [record, setRecord] = useState(location.state?.record);
  const [slotContent, setSlotContent] = useState<React.ReactNode>(null);
  const { t } = useTranslation();

  // 插槽内容管理方法
  const registerSlotContent = useCallback((content: React.ReactNode) => {
    setSlotContent(content);
  }, []);

  const unregisterSlotContent = useCallback(() => {

View on GitHub (pinned to 5e758547a8)