sickn33/agentic-awesome-skills · error · Error

Missing AppProvider

Error message

Missing AppProvider

What it means

Thrown by the useDeps hook in the fp-react skill when useContext(DepsContext) returns falsy — the component using the hook is rendered outside the matching <DepsContext.Provider>. It is the classic 'provider missing' invariant for React context.

Source

Thrown at skills/fp-react/SKILL.md:525

    updateUser: (id: string, data: Partial<User>) => Promise<User>
  }
  analytics: {
    track: (event: string, data?: object) => void
  }
}

// Create context
const DepsContext = createContext<AppDependencies | null>(null)

// Provider
function AppProvider({ deps, children }: { deps: AppDependencies; children: ReactNode }) {
  return <DepsContext.Provider value={deps}>{children}</DepsContext.Provider>
}

// Hook to use dependencies
function useDeps(): AppDependencies {
  const deps = useContext(DepsContext)
  if (!deps) throw new Error('Missing AppProvider')
  return deps
}
```

### Use in Components

```typescript
function UserProfile({ userId }: { userId: string }) {
  const { api, analytics } = useDeps()
  const [user, setUser] = useState<RemoteData<Error, User>>(notAsked())

  useEffect(() => {
    setUser(loading())
    api.getUser(userId)
      .then(u => {
        setUser(success(u))
        analytics.track('user_viewed', { userId })
      })

View on GitHub (pinned to 58d857988f)

Solutions

1. Wrap the app (or the specific subtree/test render) in <AppProvider> so the context is populated
2. For portals and separate roots, re-wrap the portal content in the provider
3. Ensure only one copy of React/context module (check for duplicate node_modules)

Example fix

// before
const deps = useContext(DepsContext)
if (!deps) throw new Error('Missing AppProvider')

// after: make the invariant unmissable at render time
function useDeps(): AppDependencies {
  const deps = useContext(DepsContext)
  if (!deps) throw new Error('useDeps must be used inside <AppProvider>')
  return deps
}
// and in tests:
render(<AppProvider><MyComponent /></AppProvider>)

// In tests, always render with the provider:
render(<AppProvider><Component /></AppProvider>)

const hasDeps = (d: unknown): d is AppDependencies =>
  typeof d === 'object' && d !== null && 'api' in d

When it happens

Trigger: Calling useDeps() in a component that is not a descendant of <AppProvider> (or is rendered into a different React root, e.g. a modal portal or test renderer created without the provider).

Common situations: New components mounted outside the provider tree; unit tests with render() that forget wrapper: AppProvider; multiple React copies so the context instance differs between provider and consumer; portals to document.body.

Related errors

• HTTP ${res.status}

AI-assisted analysis of sickn33/agentic-awesome-skills@58d857988f (2026-08-26). Data as JSON: /api/errors/8badea9c4ada231e. Report an issue: GitHub.