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

useProfileConfig must be used within a ProfileConfigProvider

Error message

useProfileConfig must be used within a ProfileConfigProvider

What it means

useProfileConfig reads the ProfileConfig context and throws when it is called without a ProfileConfigProvider ancestor. Since the context has no meaningful default, undefined indicates the hook is being used outside its intended provider scope and the library fails fast with an explicit message.

Source

Thrown at src/renderer/src/hooks/use-profile-config.tsx:151

      value={{
        profileConfig: config,
        setProfileConfig,
        mutateProfileConfig: mutate,
        addProfileItem,
        removeProfileItem,
        updateProfileItem,
        changeCurrentProfile
      }}
    >
      {children}
    </ProfileConfigContext.Provider>
  )
}

export const useProfileConfig = (): ProfileConfigContextType => {
  const context = React.useContext(ProfileConfigContext)
  if (!context) {
    throw new Error('useProfileConfig must be used within a ProfileConfigProvider')
  }
  return context
}

View on GitHub (pinned to 911e090537)

Solutions

1. Place <ProfileConfigProvider> at the highest common ancestor of all components that call useProfileConfig.
2. Check the component tree (React DevTools) to confirm the provider actually wraps the throwing component.
3. Wrap test/storybook renders with ProfileConfigProvider.
4. If profiles may be absent, render the consumer only after the provider has mounted.

Example fix

// before
<Router>
  <Route path="/profiles" element={<ProfileSettings />} />
</Router>
// after
<ProfileConfigProvider>
  <Router>
    <Route path="/profiles" element={<ProfileSettings />} />
  </Router>
</ProfileConfigProvider>

const context = React.useContext(ProfileConfigContext)
if (!context) {
  return <ProfileConfigUnavailable />
}

function hasProfileConfig(c: ProfileConfigContextType | null | undefined): c is ProfileConfigContextType {
  return c != null
}

When it happens

Trigger: A component consuming useProfileConfig() is rendered outside <ProfileConfigProvider>; the provider is mounted conditionally or lower in the tree than the consumer; the hook is invoked from a separate React root (tests, modals mounted in another root).

Common situations: New screens added under a different route that bypasses the provider; provider accidentally removed during refactor; Storybook/test harness missing the wrapper; React 18 concurrent roots rendering parts of the UI independently.

Related errors

• useGroups must be used within an GroupsProvider
• useOverrideConfig must be used within an OverrideConfigProvi
• useRules must be used within an RulesProvider
• Missing profile import handler
• Missing profile update handler

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