I am encountering a problem in my Next.js app's router setup. I have a page structure consisting of page.tsx, layout.tsx, loading.tsx, and error.tsx components.

The issue arises after the use of the loading.tsx component and after error.tsx is being instanciated.

Application error: a client-side exception has occurred
Cannot update a component (`HotReload`) while rendering a different component (`Router`). To locate the bad setState() call inside `Router`, follow the stack trace as described in
react-dom.development.js:11325 Uncaught Error: Rendered more hooks than during the previous render

Remarkably, deleting the loading.tsx component, which manages the Suspense wrap of the page, resolves the issue.

error.tsx is just a simple client component that returns a div with a text, same for the loading.tsx component. I removed everything that could potentially be an issue.

Note: If I place a Suspense directly in the page.tsx, the result is the same but at least it doesn't make the app crash.