{"record":{"id":"b154f1dfca8eb077","repo":"reduxjs/react-redux","slug":"you-must-pass-a-component-to-the-function-returned","errorCode":null,"errorMessage":"You must pass a component to the function returned by connect. Instead received ${stringifyComponent(\n            WrappedComponent,\n          )}","messagePattern":"You must pass a component to the function returned by connect\\. Instead received (.+?)","errorType":"validation","errorClass":null,"httpStatus":null,"severity":"error","filePath":"src/components/connect.tsx","lineNumber":679,"sourceCode":"\n  const Context = context\n\n  const initMapStateToProps = mapStateToPropsFactory(mapStateToProps)\n  const initMapDispatchToProps = mapDispatchToPropsFactory(mapDispatchToProps)\n  const initMergeProps = mergePropsFactory(mergeProps)\n\n  const shouldHandleStateChanges = Boolean(mapStateToProps)\n\n  const wrapWithConnect = <TProps,>(\n    WrappedComponent: ComponentType<TProps>,\n  ) => {\n    type WrappedComponentProps = TProps &\n      ConnectPropsMaybeWithoutContext<TProps>\n\n    if (process.env.NODE_ENV !== 'production') {\n      const isValid = /*#__PURE__*/ isValidElementType(WrappedComponent)\n      if (!isValid)\n        throw new Error(\n          `You must pass a component to the function returned by connect. Instead received ${stringifyComponent(\n            WrappedComponent,\n          )}`,\n        )\n    }\n\n    const wrappedComponentName =\n      WrappedComponent.displayName || WrappedComponent.name || 'Component'\n\n    const displayName = `Connect(${wrappedComponentName})`\n\n    const selectorFactoryOptions: SelectorFactoryOptions<\n      any,\n      any,\n      any,\n      any,\n      State\n    > = {","sourceCodeStart":661,"sourceCodeEnd":697,"githubUrl":"https://github.com/reduxjs/react-redux/blob/16f1a91eb2cc3817bf63753e8c90e528a9f0580c/src/components/connect.tsx#L661-L697","documentation":"connect() returns a wrapper function that must receive a valid React element type. If the argument is not a valid component (string element types are allowed but null, undefined, objects, plain functions returning non-elements are not), development builds throw this error naming what was actually received via stringifyComponent.","triggerScenarios":"Calling connect(mapState, mapDispatch)() without a component, passing undefined because the component import failed (circular import), passing a memoized object incorrectly, or passing a result of a call like MyComponent() instead of MyComponent.","commonSituations":"Circular imports leaving the component undefined at connect time, hoisting order issues in HOC chains, or forgetting to pass the component entirely.","solutions":["Pass the component class/function to the returned wrapper: Connected = connect(ms, md)(MyComponent)","Check the component import for circular dependencies that leave it undefined","Don't invoke the component (remove trailing parentheses) — pass the reference","Ensure decorators/HOC composition order applies connect last with the real component"],"exampleFix":"// before\nexport default connect(mapStateToProps)()\n// after\nexport default connect(mapStateToProps)(MyComponent)","handlingStrategy":"validation","validationCode":"import { isValidElementType } from 'react-is'\nif (!isValidElementType(WrappedComponent)) {\n  throw new TypeError(`connect expected a component, received: ${String(WrappedComponent)}`)\n}\nconst Connected = connect(mapStateToProps, mapDispatchToProps)(WrappedComponent)","typeGuard":"function isComponent(v: unknown): v is React.ElementType {\n  return typeof v === 'function' || typeof v === 'string';\n}","tryCatchPattern":"try {\n  Connected = connect(mapStateToProps)(Component)\n} catch (e) {\n  if (e.message.includes('You must pass a component')) {\n    console.error('Component import is undefined — check for circular imports or missing export')\n  }\n  throw e\n}","preventionTips":["Never call the wrapper without arguments; always supply the component","Break circular imports so the component is defined when connect executes","Pass the reference, not an invocation: connect(ms)(Comp), never connect(ms)(Comp())","Use TypeScript: connect(...)(<typed component>) fails to compile when the value is undefined"],"tags":["react-redux","connect","invalid-component","validation"],"backgroundTag":"connect-invalid-argument","analyzedSha":"16f1a91eb2cc3817bf63753e8c90e528a9f0580c","analyzedAt":"2026-08-31T22:28:37.628Z","schemaVersion":2},"datasetVersion":"2026-08-31T22:30:34.772Z"}