reduxjs/react-redux · error

This function is not supported in React Server Components. P

Error message

This function is not supported in React Server Components. Please only use this export in a Client Component.

What it means

react-redux ships an RSC-only entry (index-rsc.ts) in which every export (Provider, connect, hooks, batch, etc.) is replaced by throwNotSupportedError. Calling any of them while running on the server in a React Server Components environment throws this error, because these APIs rely on React context and client-side rendering.

Source

Thrown at src/index-rsc.ts:17

import type * as normal from './index'
import type * as rsc from './index-rsc'

// checks to make sure we didn't forgot to replicate any exports

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const _check: typeof normal = {} as typeof rsc
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const _check2: typeof rsc = {} as typeof normal

// -------------------------------------------------------------------------------------

const throwNotSupportedError = ((
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  ...args: any[]
): any => {
  throw new Error(
    'This function is not supported in React Server Components. Please only use this export in a Client Component.',
  )
}) as any

export {
  throwNotSupportedError as Provider,
  throwNotSupportedError as batch,
  throwNotSupportedError as connect,
  throwNotSupportedError as legacy_connect,
  throwNotSupportedError as createDispatchHook,
  throwNotSupportedError as createSelectorHook,
  throwNotSupportedError as createStoreHook,
  throwNotSupportedError as useDispatch,
  throwNotSupportedError as useSelector,
  throwNotSupportedError as useStore,
}
export const ReactReduxContext = {} as any
export { default as shallowEqual } from './utils/shallowEqual'

View on GitHub (pinned to 16f1a91eb2)

Solutions

1. Mark the component using react-redux APIs with 'use client' at the top of the file
2. Move store reads/writes into a client component child; pass data from the server component as props
3. If the file must be shared, split react-redux usage into a separate 'use client' module
4. Check tsconfig/bundler 'customConditions'/'exports' so the react-server condition isn't applied to client bundles

Example fix

// before (server component)
export default function Page() {
  const items = useSelector(selectItems) // throws
  return <List items={items} />
}
// after
'use client'
export default function ClientList() {
  const items = useSelector(selectItems)
  return <List items={items} />
}

// client-boundary.ts
'use client'
export { Provider, useSelector, useDispatch } from 'react-redux'
// server components must import only from the boundary file, never 'react-redux' directly

function isClientComponent(source: string): boolean {
  return source.startsWith("'use client'") || source.startsWith('"use client"');
}

try {
  return useSelector(selectData)
} catch (e) {
  if (e.message.includes('React Server Components')) {
    throw new Error('Move this component to a \'use client\' file')
  }
  throw e
}

When it happens

Trigger: Importing from 'react-redux' inside a file marked with 'use server' or a server component in Next.js App Router, or misconfigured bundler conditions resolving to the react-server export condition when the module is used in shared/server code.

Common situations: Calling useSelector or useDispatch in a Next.js server component, importing a connect-based HOC module at the top of a server-only file, or a bundler/exports misconfiguration applying the react-server condition to client code.

Related errors

• Invalid value of type ${typeof arg} for ${name} argument whe
• Unexpected value for ${methodName} in connect.
• could not find react-redux context value; please ensure the
• You must pass a selector to useSelector
• You must pass a function as a selector to useSelector

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