different-ai/openwork · error · Error

useDenFlow must be used within DenFlowProvider.

Error message

useDenFlow must be used within DenFlowProvider.

What it means

useDenFlow is the hook that reads DenFlowContext, which is only populated when a component is rendered inside <DenFlowProvider>. The context default is null, so calling the hook outside the provider returns null and the hook throws this guard error. It is a React context misuse guard, not an API failure.

Source

Thrown at ee/apps/den-web/app/(den)/_providers/den-flow-provider.tsx:2331

    generateWorkerToken: async () => {
      await generateWorkerToken();
    },
    renameWorker,
    deleteWorker,
    redeployWorker,
    refreshRuntime,
    upgradeRuntime,
    copyToClipboard,
    getRuntimeServiceLabel,
  };

  return createElement(DenFlowContext.Provider, { value }, children);
}

export function useDenFlow() {
  const value = useContext(DenFlowContext);
  if (!value) {
    throw new Error("useDenFlow must be used within DenFlowProvider.");
  }
  return value;
}

View on GitHub (pinned to 2b7df46e8a)

Solutions

1. Wrap the consuming component (or its nearest layout/page) with <DenFlowProvider>.
2. Move the provider up to app/(den)/layout.tsx so all den routes share it.
3. In tests/Storybook, render inside a DenFlowProvider wrapper or mock the context.
4. Verify the consumer and provider are in the same React render tree (no duplicated provider modules).

Example fix

// before
export default function MyWidget() {
  const { user } = useDenFlow();
// after
export default function MyWidget() {
  return (
    <DenFlowProvider>
      <MyWidgetInner />
    </DenFlowProvider>
  );
}
function MyWidgetInner() {
  const { user } = useDenFlow();

import { enqueue } from "./safeDenFlow"; // wrapper module
// safeDenFlow.ts
export function useSafeDenFlow() {
  const ctx = useContext(DenFlowContext);
  return ctx; // may be null; callers check before use
}

function hasDenFlow(v: ReturnType<typeof useSafeDenFlow>): boolean {
  return v !== null;
}

let flow: DenFlowValue | null = null;
try {
  flow = useDenFlow();
} catch {
  // cannot use try/catch around hooks — instead use a nullable accessor
}
// Correct pattern: a nullable wrapper hook
const value = useContext(DenFlowContext);
if (!value) return <PleaseWrapInProvider />;

When it happens

Trigger: Calling useDenFlow() in a component rendered outside <DenFlowProvider>, e.g. in a layout above the provider, in a utility/module-level call, in a test render without the provider wrapper, or from multiple parallel Next.js runtimes/route groups where the provider isn't mounted.

Common situations: Adding a new component to a page whose layout doesn't wrap children with DenFlowProvider; rendering a hook consumer in Storybook/tests without the wrapper; moving the provider deeper in the tree than the consumer.

Related errors

• Failed to load desktop policies (${response.status}).
• Failed to load inference settings (${response.status}).
• Failed to load Workflow runs (${response.status}).
• ${config.name} root element is missing.

AI-assisted analysis of different-ai/openwork@2b7df46e8a (2026-09-01). Data as JSON: /api/errors/7c4a8f3c36f8f4fc. Report an issue: GitHub.