reduxjs/react-redux · error

You must pass a valid React context consumer as `props.conte

Error message

You must pass a valid React context consumer as `props.context`

What it means

When connect is given props.context, that value must be a React context object created by React.createContext — connect verifies it renders a valid context Consumer. Any other value (undefined, plain object, string) throws this error.

Source

Thrown at src/components/connect.tsx:735

          // Distinguish between actual "data" props that were passed to the wrapper component,
          // and values needed to control behavior (forwarded refs, alternate context instances).
          // To maintain the wrapperProps object reference, memoize this destructuring.
          const { reactReduxForwardedRef, ...wrapperProps } = props
          return [props.context, reactReduxForwardedRef, wrapperProps]
        }, [props])

      const ContextToUse: ReactReduxContextInstance = React.useMemo(() => {
        // Users may optionally pass in a custom context instance to use instead of our ReactReduxContext.
        // Memoize the check that determines which context instance we should use.
        let ResultContext = Context
        if (propsContext?.Consumer) {
          if (process.env.NODE_ENV !== 'production') {
            const isValid = /*#__PURE__*/ isContextConsumer(
              // @ts-ignore
              <propsContext.Consumer />,
            )
            if (!isValid) {
              throw new Error(
                'You must pass a valid React context consumer as `props.context`',
              )
            }
            ResultContext = propsContext
          }
        }
        return ResultContext
      }, [propsContext, Context])

      // Retrieve the store and ancestor subscription via context, if available
      const contextValue = React.useContext(ContextToUse)

      // The store _must_ exist as either a prop or in context.
      // We'll check to see if it _looks_ like a Redux store first.
      // This allows us to pass through a `store` prop that is just a plain value.
      const didStoreComeFromProps =
        Boolean(props.store) &&
        Boolean(props.store!.getState) &&

View on GitHub (pinned to 16f1a91eb2)

Solutions

  1. Create the context with React.createContext and pass the context object: <Connected context={MyContext} />
  2. Do not pass MyContext.Consumer or MyContext.Provider
  3. Fix duplicate React installations (npm ls react) so isContextConsumer recognizes the context
  4. If you don't need a custom context, omit the context prop entirely

Example fix

// before
<Connected context={MyContext.Consumer} />
// after
<Connected context={MyContext} />
Defensive patterns

Strategy: validation

Validate before calling

import React from 'react'
const MyContext = React.createContext<Store | null>(null)
// before passing:
if (!MyContext || !(MyContext as any).$$typeof) {
  throw new TypeError('props.context must be a React.createContext() result')
}

Type guard

function isReactContext(v: unknown): v is React.Context<unknown> {
  return !!v && typeof v === 'object' && (v as any).Provider !== undefined && (v as any).Consumer !== undefined;
}

Try / catch

try {
  render(<Connected context={MyContext} />)
} catch (e) {
  if (e.message.includes('valid React context consumer')) {
    console.error('Pass the context object itself, not .Consumer/.Provider')
  }
  throw e
}

Prevention

When it happens

Trigger: Passing an arbitrary object as the context prop to a connected component, passing the context's Consumer instead of the context object itself, or passing a context created by a different React copy.

Common situations: Multiple React copies in a monorepo (context instanceof check / isContextConsumer fails), typos like context={MyContext.Consumer}, or passing an undefined context prop that the code then forwards.

Related errors


AI-assisted analysis of reduxjs/react-redux@16f1a91eb2 (2026-08-31). Data as JSON: /api/errors/d1356b6f854eb651. Report an issue: GitHub.