I use the next-intl library for internationalization. Everything works correct. But only on the gallery page when I switch the language to another it does not switch to the other langugae and when I try again and then got to another page I get this error: Warning: Cannot update a component (HotReload) while rendering a different component (Router).
Router@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:169:93
ErrorBoundaryHandler@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js💯9
ErrorBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:130:67
AppRouter@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:451:47
ServerRoot@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:128:24
RSCComponent
Root@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:144:24 app-index.js:32:21
error app-index.js:32
error hydration-error-info.js:45
overrideMethod (index):12966
printWarning react-dom.development.js:94
error react-dom.development.js:68
warnAboutRenderPhaseUpdatesInDEV react-dom.development.js:26804
scheduleUpdateOnFiber react-dom.development.js:24273
dispatchReducerAction react-dom.development.js:12836
handleOnUnhandledError hot-reloader-client.js:352
<anonym> use-error-handler.js:70
invokeGuardedCallbackImpl react-dom.development.js:20510
invokeGuardedCallback react-dom.development.js:20585
beginWork react-dom.development.js:26763
performUnitOfWork react-dom.development.js:25587
workLoopSync react-dom.development.js:25303
renderRootSync react-dom.development.js:25258
recoverFromConcurrentError react-dom.development.js:24475
performConcurrentWorkOnRoot react-dom.development.js:24420
What could be the problem for this?
#Warning: Cannot update a component (`HotReload`) while rendering a different component (`Router`).
quick frost
buoyant roostBOT
Hi @quick frost. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Hmm, I don't know enough to give you a confident answer yet. The error message you're seeing typically occurs when there's an attempt to update a component while rendering a different one. This is often related to state updates during the rendering phase of a component, which is not recommended in React.
However, without specific code snippets or more context, it's hard to pinpoint the exact issue. It could be related to how you're handling language switching in your gallery page or how state updates are being managed in your HotReload or Router components.
I recommend checking your components for any state updates that might be happening during the rendering phase. Also, ensure that your internationalization implementation is correctly set up.
For more information on rules of hooks and common mistakes, you can refer to the React documentation (https://reactjs.org/docs/hooks-rules.html). For more details on Next.js internationalization, you can check the Next.js documentation (https://nextjs.org/docs/advanced-features/i18n-routing).