{"record":{"id":"d1356b6f854eb651","repo":"reduxjs/react-redux","slug":"you-must-pass-a-valid-react-context-consumer-as-p","errorCode":null,"errorMessage":"You must pass a valid React context consumer as `props.context`","messagePattern":"You must pass a valid React context consumer as `props\\.context`","errorType":"validation","errorClass":null,"httpStatus":null,"severity":"error","filePath":"src/components/connect.tsx","lineNumber":735,"sourceCode":"          // Distinguish between actual \"data\" props that were passed to the wrapper component,\n          // and values needed to control behavior (forwarded refs, alternate context instances).\n          // To maintain the wrapperProps object reference, memoize this destructuring.\n          const { reactReduxForwardedRef, ...wrapperProps } = props\n          return [props.context, reactReduxForwardedRef, wrapperProps]\n        }, [props])\n\n      const ContextToUse: ReactReduxContextInstance = React.useMemo(() => {\n        // Users may optionally pass in a custom context instance to use instead of our ReactReduxContext.\n        // Memoize the check that determines which context instance we should use.\n        let ResultContext = Context\n        if (propsContext?.Consumer) {\n          if (process.env.NODE_ENV !== 'production') {\n            const isValid = /*#__PURE__*/ isContextConsumer(\n              // @ts-ignore\n              <propsContext.Consumer />,\n            )\n            if (!isValid) {\n              throw new Error(\n                'You must pass a valid React context consumer as `props.context`',\n              )\n            }\n            ResultContext = propsContext\n          }\n        }\n        return ResultContext\n      }, [propsContext, Context])\n\n      // Retrieve the store and ancestor subscription via context, if available\n      const contextValue = React.useContext(ContextToUse)\n\n      // The store _must_ exist as either a prop or in context.\n      // We'll check to see if it _looks_ like a Redux store first.\n      // This allows us to pass through a `store` prop that is just a plain value.\n      const didStoreComeFromProps =\n        Boolean(props.store) &&\n        Boolean(props.store!.getState) &&","sourceCodeStart":717,"sourceCodeEnd":753,"githubUrl":"https://github.com/reduxjs/react-redux/blob/16f1a91eb2cc3817bf63753e8c90e528a9f0580c/src/components/connect.tsx#L717-L753","documentation":"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.","triggerScenarios":"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.","commonSituations":"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.","solutions":["Create the context with React.createContext and pass the context object: <Connected context={MyContext} />","Do not pass MyContext.Consumer or MyContext.Provider","Fix duplicate React installations (npm ls react) so isContextConsumer recognizes the context","If you don't need a custom context, omit the context prop entirely"],"exampleFix":"// before\n<Connected context={MyContext.Consumer} />\n// after\n<Connected context={MyContext} />","handlingStrategy":"validation","validationCode":"import React from 'react'\nconst MyContext = React.createContext<Store | null>(null)\n// before passing:\nif (!MyContext || !(MyContext as any).$$typeof) {\n  throw new TypeError('props.context must be a React.createContext() result')\n}","typeGuard":"function isReactContext(v: unknown): v is React.Context<unknown> {\n  return !!v && typeof v === 'object' && (v as any).Provider !== undefined && (v as any).Consumer !== undefined;\n}","tryCatchPattern":"try {\n  render(<Connected context={MyContext} />)\n} catch (e) {\n  if (e.message.includes('valid React context consumer')) {\n    console.error('Pass the context object itself, not .Consumer/.Provider')\n  }\n  throw e\n}","preventionTips":["Always pass the object returned by React.createContext, never .Consumer or .Provider","Deduplicate React in monorepos so context objects share one React copy","Only set the context prop when you intentionally use multiple stores; otherwise omit it"],"tags":["react-redux","connect","context","validation"],"backgroundTag":"invalid-react-context","analyzedSha":"16f1a91eb2cc3817bf63753e8c90e528a9f0580c","analyzedAt":"2026-08-31T22:28:37.628Z","schemaVersion":2},"datasetVersion":"2026-08-31T22:30:34.772Z"}