New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Problems with NextJS 13 : TypeError: Super expression must either be null or a function #1442
Comments
@ottosamatori Did you ever find a workaround for this issue? I am currently experiencing the same issue. |
Don’t use the app directory ! NextJS with app directory is not a good product for the moment |
@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. StateProvider.ts:"use client"; export function StateProvider ({ children }:{children:React.ReactNode}) => { layout.tsx`import { Metadata } from "next"; import "./globals.css"; type RootLayoutProps = { export const metadata: Metadata = { const RootLayout: FC = ({ children }) => { ); export default RootLayout;` |
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;`
The text was updated successfully, but these errors were encountered: