reduxjs/react-redux · error

You must pass a component to the function returned by connec

Error message

You must pass a component to the function returned by connect. Instead received ${stringifyComponent(
            WrappedComponent,
          )}

What it means

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.

Source

Thrown at src/components/connect.tsx:679

  const Context = context

  const initMapStateToProps = mapStateToPropsFactory(mapStateToProps)
  const initMapDispatchToProps = mapDispatchToPropsFactory(mapDispatchToProps)
  const initMergeProps = mergePropsFactory(mergeProps)

  const shouldHandleStateChanges = Boolean(mapStateToProps)

  const wrapWithConnect = <TProps,>(
    WrappedComponent: ComponentType<TProps>,
  ) => {
    type WrappedComponentProps = TProps &
      ConnectPropsMaybeWithoutContext<TProps>

    if (process.env.NODE_ENV !== 'production') {
      const isValid = /*#__PURE__*/ isValidElementType(WrappedComponent)
      if (!isValid)
        throw new Error(
          `You must pass a component to the function returned by connect. Instead received ${stringifyComponent(
            WrappedComponent,
          )}`,
        )
    }

    const wrappedComponentName =
      WrappedComponent.displayName || WrappedComponent.name || 'Component'

    const displayName = `Connect(${wrappedComponentName})`

    const selectorFactoryOptions: SelectorFactoryOptions<
      any,
      any,
      any,
      any,
      State
    > = {

View on GitHub (pinned to 16f1a91eb2)

Solutions

1. Pass the component class/function to the returned wrapper: Connected = connect(ms, md)(MyComponent)
2. Check the component import for circular dependencies that leave it undefined
3. Don't invoke the component (remove trailing parentheses) — pass the reference
4. Ensure decorators/HOC composition order applies connect last with the real component

Example fix

// before
export default connect(mapStateToProps)()
// after
export default connect(mapStateToProps)(MyComponent)

import { isValidElementType } from 'react-is'
if (!isValidElementType(WrappedComponent)) {
  throw new TypeError(`connect expected a component, received: ${String(WrappedComponent)}`)
}
const Connected = connect(mapStateToProps, mapDispatchToProps)(WrappedComponent)

function isComponent(v: unknown): v is React.ElementType {
  return typeof v === 'function' || typeof v === 'string';
}

try {
  Connected = connect(mapStateToProps)(Component)
} catch (e) {
  if (e.message.includes('You must pass a component')) {
    console.error('Component import is undefined — check for circular imports or missing export')
  }
  throw e
}

When it happens

Trigger: 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.

Common situations: Circular imports leaving the component undefined at connect time, hoisting order issues in HOC chains, or forgetting to pass the component entirely.

Related errors

• You must pass a valid React context consumer as `props.conte
• Invalid value of type ${typeof arg} for ${name} argument whe
• Unexpected value for ${methodName} in connect.
• You must pass a selector to useSelector
• You must pass a function as an equality function to useSelec

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