Problems with NextJS 13 : TypeError: Super expression must either be null or a function

[ottosamatori]

---

---

This is my configuation in store.ts :

---

---

`import { combineReducers, configureStore } from "@reduxjs/toolkit";
import storage from "redux-persist/lib/storage";
import { persistReducer, persistStore } from "redux-persist";
import thunk from "redux-thunk";
import userSlice from "./slices/userSlice";

const persistConfig = {
key: "root",
storage,
};

const rootReducer = combineReducers({ profile: userSlice });

const persistedReducer = persistReducer(persistConfig, rootReducer);

export const store = configureStore({
reducer: persistedReducer,
devTools: process.env.NODE_ENV !== "production",
middleware: [thunk],
});

export const persistor = persistStore(store);
export type RootState = ReturnType;
export type AppDispatch = typeof store.dispatch;
`

---

---

This is my layout.tsx in new nextJS version (13) :

---

---

`import { Metadata } from "next";
import Provider from "@/redux/provider";
import { persistor } from "@/redux/store";
import { FC } from "react";
import { poppins } from "@/constants/globals";
import { PersistGate } from "redux-persist/integration/react";

import "./globals.css";

type RootLayoutProps = {
children: React.ReactNode;
};

export const metadata: Metadata = {
title: "Mitrandi",
description: "Application de gestion locative",
};

const RootLayout: FC = ({ children }) => {
return (
Provider>
PersistGate loading={null} persistor={persistor}>
html lang='fr'>
body className={poppins.className}>
{children}
/body>
/html>
/PersistGate>
/Provider>
);
};

export default RootLayout;`

[no1done]

@ottosamatori Did you ever find a workaround for this issue? I am currently experiencing the same issue.

[ottosamatori]

Don’t use the app directory ! NextJS with app directory is not a good product for the moment

[Fox333-Lab]

@ottosamatori in nextjs 13 everything inside the app folder is by default considered server component and anything related to redux is a client side functionality so you cannot directly use state management related code in files in app directory.
you need to move your provider code from root layout to outside of app folder to a new file say "StateProvider.ts" that will accept children as prop and then use this custom provider to wrap around layout file.
Note: StateProvider.ts and your store.ts should have "use client" as the very first line.
Refer the below modified example

StateProvider.ts:

"use client";
import { Provider } from "react-redux";
import store from ".";
import { persistStore } from "redux-persist";
import { PersistGate } from "redux-persist/integration/react";

export function StateProvider ({ children }:{children:React.ReactNode}) => {
let persistor = persistStore(store);
return (


{children}


);
};

layout.tsx

`import { Metadata } from "next";
import { FC } from "react";
import { poppins } from "@/constants/globals";
import StateProvider from "@/store/provider";

import "./globals.css";

type RootLayoutProps = {
children: React.ReactNode;
};

export const metadata: Metadata = {
title: "Mitrandi",
description: "Application de gestion locative",
};

const RootLayout: FC = ({ children }) => {
return (

{children}

);
};

export default RootLayout;`