mihomo-party-org/clash-party · error · Error

useOverrideConfig must be used within an OverrideConfigProvi

Error message

useOverrideConfig must be used within an OverrideConfigProvider

What it means

useOverrideConfig consumes the OverrideConfig context and throws when the context value is falsy, i.e. when the hook runs without an OverrideConfigProvider above it in the React tree. The library throws to surface the misconfiguration immediately rather than allowing undefined config access later.

Source

Thrown at src/renderer/src/hooks/use-override-config.tsx:97

    <OverrideConfigContext.Provider
      value={{
        overrideConfig: config,
        setOverrideConfig,
        mutateOverrideConfig: mutate,
        addOverrideItem,
        removeOverrideItem,
        updateOverrideItem
      }}
    >
      {children}
    </OverrideConfigContext.Provider>
  )
}

export const useOverrideConfig = (): OverrideConfigContextType => {
  const context = React.useContext(OverrideConfigContext)
  if (!context) {
    throw new Error('useOverrideConfig must be used within an OverrideConfigProvider')
  }
  return context
}

View on GitHub (pinned to 911e090537)

Solutions

Mount <OverrideConfigProvider> around the whole app or at least around all consumers of useOverrideConfig.
Make provider mounting unconditional (keep it mounted; handle loading state inside it).
In tests/stories, wrap the render call with OverrideConfigProvider.
Add a lint/test assertion or an ErrorBoundary-friendly check that the provider exists in the tree.

Example fix

// before
renderHook(() => useOverrideConfig())
// after
const wrapper = ({ children }) => <OverrideConfigProvider>{children}</OverrideConfigProvider>
renderHook(() => useOverrideConfig(), { wrapper })

Defensive patterns

Strategy: validation

Validate before calling

const context = React.useContext(OverrideConfigContext)
if (!context) {
  console.warn('OverrideConfigProvider missing — component will not render config-dependent UI')
  return <ConfigUnavailable />
}

Type guard

function hasOverrideConfig(c: OverrideConfigContextType | null | undefined): c is OverrideConfigContextType {
  return Boolean(c)
}

Prevention

Mount OverrideConfigProvider above the entire app root; avoid conditional provider rendering.
Use React DevTools to confirm the provider wraps any component calling useOverrideConfig.
Include the provider in Storybook decorators and RTL wrappers.
Run a smoke test that renders every route so missing-provider crashes surface in CI.

When it happens

Trigger: Invoking useOverrideConfig() in a component rendered outside <OverrideConfigProvider>; using the hook before the provider mounts (e.g. in the same render pass as the provider is conditionally introduced); calling it from a second React root such as a test render or a popup window.

Common situations: Forgetting the provider when adding the hook to a new component; conditional provider mounting (provider rendered only after some state loads) while consumers render unconditionally; RTL/Storybook setups missing the wrapper.

Related errors

AI-assisted analysis of mihomo-party-org/clash-party@911e090537 (2026-08-30). Data as JSON: /api/errors/bbc453eaba5c9254. Report an issue: GitHub.