I am getting these error while login to dashboard. Once this error came and refresh the page I am getting the dashboard. If I go back to login then also this error is there.
I have two layouts. One for common and other for admin. Is that causing error?
import { Inter } from "next/font/google";
import "./globals.css";
import "bootstrap/dist/css/bootstrap.min.css";
import LayoutProvider from "./Provider";
import NoSsr from "@/utils/NoSsr";
import 'react-toastify/dist/ReactToastify.css';
import { ToastContainer } from "react-toastify";
import OffCanvas from "@/CommonComponent/Offcanvas";
const inter = Inter({ subsets: ["latin"] });
export default function RootLayout({ children }) {
return (
<html lang="en">
<body className={inter.className}>
<NoSsr>
<ToastContainer />
<LayoutProvider>
{children}
<OffCanvas />
</LayoutProvider>
</NoSsr>
</body>
</html>
);
}
this was the common layout.js in src/app/layout.js
"use client";
import './layout.css';
import '../../../public/assets/scss/style.scss';
import Sidebar from "@/components/Admin/Layouts/Sidebar";
import Header from "@/components/Admin/Layouts/Header/index";
import { useSelector } from 'react-redux';
import { useRouter, useSearchParams } from 'next/navigation';
import { useEffect } from 'react';
import { useSession } from 'next-auth/react';
const Layout = ({ children, className, ...rest }) => {
const { sideBarType } = useSelector((store) => store.themeSlice);
const backgroundColor = useSelector((store) => store.headerSlice.backGroundChange);
const pathname = useSearchParams();
const session = useSession();
const router = useRouter();
useEffect(() => {
const handleResize = () => {
const pageWrapper = document.getElementById("page-wrapper");
if (pageWrapper) {
if (window.innerWidth < 992) {
pageWrapper.classList.remove("horizontal-wrapper");
pageWrapper.classList.add("compact-wrapper");
} else if (sideBarType !== "horizontal-wrapper") {
pageWrapper.classList.remove("horizontal-wrapper");
pageWrapper.classList.add("compact-wrapper");
} else {
pageWrapper.classList.add("horizontal-wrapper");
pageWrapper.classList.remove("compact-wrapper");
}
}
};
window.addEventListener("resize", handleResize);
handleResize();
return () => window.removeEventListener("resize", handleResize);
}, [sideBarType]);
return (
<div id="mainLayout" className={`${backgroundColor}`}>
<div className={`page-wrapper ${sideBarType} ${pathname.get("layout")}`} id="page-wrapper">
<Header />
<div className="page-body-wrapper horizontal-menu">
<Sidebar />
<div className="page-body"> {children}</div>
</div>
</div>
</div>
);
};
export default Layout;
this is admin layout which is in src/app/admin/layout.js
I think the layout is causing problem. I am using nextjs(Javascript).Is there any solution?