How to fix Cannot use Context.Consumer outside of a Provider in React

What this error means

React Context provides a way to share values between components without explicitly passing props through every level of the component tree. The Context API consists of two parts: a Provider component that supplies the value, and Consumer components (or useContext hooks) that read it. When you use Context.Consumer or useContext() to access a context value, React looks up the component tree to find the nearest matching Provider. If no Provider is found, React will either return the default value passed to createContext(), or undefined if no default was provided. This error message indicates that your code is attempting to consume a context value in a component that is not a descendant of the corresponding Provider. This means the Consumer cannot access the intended context value and will behave unexpectedly, potentially breaking your application logic.

Typical symptoms

• Components receive undefined values instead of expected context data
• Default context values are used even though a Provider exists elsewhere
• State updates in Provider do not propagate to Consumer components
• Components fail with "Cannot read property of undefined" errors
• Custom hook throws error: "useMyContext must be used within MyProvider"
• Warning: "A context consumer was rendered with multiple children, or a child that isn't a function"

Common causes

1. Context.Consumer is rendered outside the scope of the matching Context.Provider
2. Provider component is placed too low in the component tree, not wrapping all consumers
3. Multiple React instances in the application (common in monorepos or when linking packages)
4. Using Context.Consumer with incorrect syntax (not passing a render function as child)
5. Accidentally importing the wrong Context object in consumer components
6. Provider is conditionally rendered and not present when Consumer mounts
7. Circular dependencies between Provider and Consumer components causing import issues

How to fix "Cannot use Context.Consumer outside of a Provider"

import { createContext } from 'react';

const ThemeContext = createContext();

function App() {
  return (
    <div>
      <Navbar /> {/* Cannot access ThemeContext */}
      <ThemeContext.Provider value="dark">
        <Content />
      </ThemeContext.Provider>
    </div>
  );
}

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <div>
        <Navbar /> {/* Can now access ThemeContext */}
        <Content />
      </div>
    </ThemeContext.Provider>
  );
}

function MyComponent() {
  return (
    <ThemeContext.Consumer>
      {value => <div>Theme: {value}</div>}
    </ThemeContext.Consumer>
  );
}

import { useContext } from 'react';

function MyComponent() {
  const theme = useContext(ThemeContext);
  return <div>Theme: {theme}</div>;
}

import { createContext, useContext } from 'react';

const ThemeContext = createContext(undefined);

export function useTheme() {
  const context = useContext(ThemeContext);

  if (context === undefined) {
    throw new Error('useTheme must be used within a ThemeProvider');
  }

  return context;
}

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('dark');

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

npm ls react
# or
yarn why react

// package.json (workspace root)
{
  "workspaces": {
    "nohoist": []
  }
}

// your-library/package.json
{
  "peerDependencies": {
    "react": "^18.0.0"
  }
}

<ThemeContext.Consumer>
  <div>Theme: {value}</div> {/* Wrong! */}
</ThemeContext.Consumer>

<ThemeContext.Consumer>
  <div>Theme</div> {/* Wrong! */}
</ThemeContext.Consumer>

<ThemeContext.Consumer>
  {value => <div>Theme: {value}</div>}
</ThemeContext.Consumer>

// app/layout.tsx
import { ThemeProvider } from '@/contexts/ThemeContext';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <ThemeProvider>
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

// src/index.js
import { ThemeProvider } from './contexts/ThemeContext';

root.render(
  <React.StrictMode>
    <ThemeProvider>
      <App />
    </ThemeProvider>
  </React.StrictMode>
);

Advanced notes

const ThemeContext = createContext('light'); // with default
const AuthContext = createContext(undefined); // no default

const [theme, setTheme] = useState('dark');

// ❌ Creates new object every render
<ThemeContext.Provider value={{ theme, setTheme }}>

// ✅ Memoize the value object
const value = useMemo(() => ({ theme, setTheme }), [theme]);
<ThemeContext.Provider value={value}>

import { render } from '@testing-library/react';
import { ThemeProvider } from './contexts/ThemeContext';

test('renders with theme', () => {
  render(
    <ThemeProvider>
      <MyComponent />
    </ThemeProvider>
  );
});

'use client';

import { createContext, useState } from 'react';

export const ThemeContext = createContext(undefined);

export function ThemeProvider({ children }) {
  // Provider implementation
}

Frequently asked questions

What does "Cannot use Context.Consumer outside of a Provider" mean?

React Context provides a way to share values between components without explicitly passing props through every level of the component tree. The Context API consists of two parts: a Provider component that supplies the value, and Consumer components (or useContext hooks) that read it. Consumer or useContext() to access a context value, React looks up the component tree to find the nearest matching Provider.

How do I fix "Cannot use Context.Consumer outside of a Provider"?

This error occurs when a React Context Consumer is rendered in a component tree that is not wrapped by the corresponding Context Provider. Context values are undefined or use default values when accessed outside their Provider scope.

What causes "Cannot use Context.Consumer outside of a Provider"?

Context.Consumer is rendered outside the scope of the matching Context.Provider Provider component is placed too low in the component tree, not wrapping all consumers Multiple React instances in the application (common in monorepos or when linking packages)

Is the "Cannot use Context.Consumer outside of a Provider" error serious?

It is a medium-severity error — more of a blocker than a risk. The steps above resolve it.

Related errors

• Context default value is undefined but Consumer expects a value

  Context default value is undefined but Consumer expects a value

  MEDIUM

• Context.Consumer must be used inside a Provider

  How to fix "Context.Consumer must be used inside a Provider" in React

  MEDIUM

• Multiple Context providers with conflicting values were found

  Multiple Context providers with conflicting values

  MEDIUM

• Warning: componentWillReceiveProps has been renamed, and is not recommended for use.

  How to fix "Warning: componentWillReceiveProps has been renamed" in React

  MEDIUM

• Failed to resolve import. Does the file exist?

  How to fix "Failed to resolve import" in React

  HIGH

• npm ERR! code ETIMEDOUT npm ERR! network request to https://registry.npmjs.org timed out

  npm registry request timed out

  MEDIUM

Official resources & further reading

• 📚React Official Documentation