I have a problem in my react nextjs app.
When I am on a specific url and I press the back of the browser the app completely freezes and doesn’t work at all.
I saw someone having a similar issue here and I am not defining a page.tsx with a client component that is an async function. I checked all files. However, I have this file below.
In my app, I have inside the app folder, the layout.tsx file which has the following content:
"use client";
// imports
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
const [pca, setPca] = useState<PublicClientApplication | null>(null);
useEffect(() => {
const init = async () => {
const msalInstance = new PublicClientApplication(msalConfig);
await msalInstance.initialize();
setPca(msalInstance);
};
init();
}, []);
if (!pca)
return (
<html>
<head></head>
<body></body>
</html>
);
return (
<html>
<head></head>
<body>
<ThemeProvider>
<CssBaseline />
<MsalProvider instance={pca}>
<MyAppContainer content={children} />
</MsalProvider>
</ThemeProvider>
</body>
</html>
);
}
How can I fix this issue ? Note I am using, next version: 14.2