Hi all!
I transitioned my React CRA to next.js using the migration guide provided by next.js.

Everything runs fine when using npm run dev, yet on npm run build I get following error:

Generating static pages (0/10) [=== ]TypeError: Cannot destructure property 'basename' of 'i.useContext(...)' as it is null. Error occurred prerendering page "/Layout". Read more: https://nextjs.org/docs/messages/prerender-error

For some reason, my useContext (I have an AuthProvider) does not work as expected when building the project.

Does anyone know why this issue appears and how I might solve it?

Thanks in advance!

This is my client.tsx:

"use client";

import dynamic from "next/dynamic";

const AppWithProviders = dynamic(() => import("../../AppWithProviders"), {
ssr: false,
});

export function ClientOnly() {
return <AppWithProviders />;
}

And this my AppWithProviders.js:

import { BrowserRouter as Router } from "react-router-dom";
import { AuthProvider } from "./context/AuthContext";
import App from "./App"; // Assuming your App is the main component

export default function AppWithProviders() {
return (
<Router>
<AuthProvider>
<App />
<div className="landscape">
<div className="phone"></div>
<div className="message">Please rotate your device!</div>
</div>
</AuthProvider>
</Router>
);
}