useCurveEditor must be used within a CurveEditorProvider

Error message

useCurveEditor must be used within a CurveEditorProvider

What it means

useCurveEditor is a React hook that reads the curve editor's React context, which only exists when a <CurveEditorProvider> ancestor is present. The library throws this error when the hook is called outside any provider, because the context value is null and there is no meaningful state to return. It is a fail-fast guard so developers get a clear message instead of a confusing null dereference later.

Source

Thrown at packages/dev/inspector-v2/src/components/curveEditor/curveEditorContext.tsx:623

        () => ({
            state,
            actions,
            observables: observables.current,
        }),
        [state, actions]
    );

    return <CurveEditorContext.Provider value={contextValue}>{children}</CurveEditorContext.Provider>;
};

/**
 * Hook to access the curve editor context
 * @returns The curve editor context value
 */
export function useCurveEditor(): CurveEditorContextValue {
    const context = useContext(CurveEditorContext);
    if (!context) {
        throw new Error("useCurveEditor must be used within a CurveEditorProvider");
    }
    return context;
}

View on GitHub (pinned to 0592b347b8)

Solutions

Wrap the consuming component tree with <CurveEditorProvider> above the component calling useCurveEditor.
Move the consuming component so it renders as a descendant of the existing CurveEditorProvider.
If the component may render outside the provider, use a nullable read of useContext(CurveEditorContext) and render a fallback instead of throwing.
Verify only one provider wraps the tree and that portals (ReactDOM.createPortal) are created inside the provider subtree.

Example fix

// before
export const MyPanel = () => {
  const { state } = useCurveEditor();
  return <div>{state.selectedCurve}</div>;
};

// after
<CurveEditorProvider>
  <MyPanel />
</CurveEditorProvider>

Defensive patterns

Strategy: validation

Validate before calling

import { useContext } from "react";
import { CurveEditorContext } from "./curveEditorContext";
const ctx = useContext(CurveEditorContext);
if (!ctx) {
  // render fallback instead of calling useCurveEditor()
}

Type guard

function hasCurveEditorContext(ctx: CurveEditorContextValue | null): ctx is CurveEditorContextValue {
  return ctx !== null && ctx !== undefined;
}

Try / catch

try {
  const ctx = useCurveEditor();
  // use ctx
} catch (e) {
  if (e instanceof Error && e.message.includes("CurveEditorProvider")) {
    return <CurveEditorUnavailableFallback />;
  }
  throw e;
}

Prevention

Always mount consumers inside <CurveEditorProvider>.
Create portals from inside the provider subtree.
Add a lint/test asserting the provider wraps the inspector tree.
Prefer a nullable context read plus fallback for optional features.

When it happens

Trigger: Calling useCurveEditor() in a component rendered outside the CurveEditorProvider tree, e.g. a panel/extension mounted before or beside the CurveEditor, or a component moved above the provider after refactoring.

Common situations: Adding a custom inspector panel that consumes curve editor state without wrapping the app in CurveEditorProvider; rendering the consumer in a React portal that escapes the provider subtree; conditional rendering where the provider unmounts but consumers stay mounted; mixing two inspector instances so the hook reads the wrong tree.

Related errors

At least one hook must be provided.

AI-assisted analysis of BabylonJS/Babylon.js@0592b347b8 (2026-08-30). Data as JSON: /api/errors/7b670b5ab2df99c6. Report an issue: GitHub.