Redux is not working with Next 14 App routing

[aahmedfaraz]

What version of React, ReactDOM/React Native, Redux, and React Redux are you using?

• React:
• ReactDOM/React Native:
• Redux:
• React Redux:

What is the current behavior?

I have just migrate my Next 13 Pages routing to Next 14 App routing, redux was already implemented, so on Next 13 redux was working, but as soon as I have migrated redux is not working, here is the error I face on npm run dev:

 ⨯ node_modules\react-redux\es\components\Provider.js (25:28) @ Provider
 ⨯ TypeError: (0 , _utils_useIsomorphicLayoutEffect__WEBPACK_IMPORTED_MODULE_3__.useIsomorphicLayoutEffect) is not a function
    at stringify (<anonymous>)
null
 ⨯ node_modules\react-redux\es\components\Provider.js (25:28) @ Provider
 ⨯ TypeError: (0 , _utils_useIsomorphicLayoutEffect__WEBPACK_IMPORTED_MODULE_3__.useIsomorphicLayoutEffect) is not a function
    at stringify (<anonymous>)
digest: "91134944"
null

What is the expected behavior?

It was running normally on Next 13 pages routing.

Which browser and OS are affected by this issue?

No response

Did this work in previous versions of React Redux?

• Yes

[EskiMojo14]

you need to make sure that your Provider is being called from a client component - for example having a dedicated Providers component:

"use client";
import type { ReactNode } from "react";
import { Provider } from "react-redux";
import store from "./store";

export default function Providers({ children }: { children: ReactNode }) {
  return <Provider store={store}>{children}</Provider>
}

Since the Providers component is marked as a client component, you can then call it from a server component (like your layout) as needed.

We do have some guidance for usage with the App router in the works, but it hasn't landed yet (reduxjs/redux-toolkit#3820)

[aahmedfaraz]

Oh yeah! @EskiMojo14, you are right, it was server component I was using in, now shifted the Provider to a Client Component, and it is working. Thanks ✅