Error about default theme and horizontal menu

[damnh]

Hi,

I'm using Apollo Template (TS project).

1. I change the default theme from 'indigo' to 'green' in layoutcontext.tsx. But theme is only checked on AppConfig, and theme is not applied to page. When I clicked theme on AppConfig, theme will be applied. What's wrong?

2. When I changed menu to 'Slim', 'Slim+', 'Horizontal'. Menu is changed. But when I clicked to open the child menu. They are not display. And I received this following errror in console.
   next-dev.js:20 Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render. at AppMenuitem (webpack-internal:///./layout/AppMenuitem.tsx:27:94) at ul at li at AppMenuitem (webpack-internal:///./layout/AppMenuitem.tsx:27:94) at ul at MenuProvider (webpack-internal:///./layout/context/menucontext.tsx:16:88) at AppSubMenu (webpack-internal:///./layout/AppSubMenu.tsx:19:96) at AppMenu at MenuProvider (webpack-internal:///./layout/context/menucontext.tsx:16:88) at div at AppSidebar (webpack-internal:///./layout/AppSidebar.tsx:20:82) at div at div at Layout (webpack-internal:///./layout/layout.tsx:32:160) at LayoutProvider (webpack-internal:///./layout/context/layoutcontext.tsx:19:90) at ToastProvider (webpack-internal:///./solluna/common/hook/ToastContext.tsx:26:11) at SessionProvider (webpack-internal:///./node_modules/next-auth/react/index.js:455:24) at MyApp (webpack-internal:///./pages/_app.tsx:39:11) at PathnameContextProviderAdapter (webpack-internal:///./node_modules/next/dist/shared/lib/router/adapters.js:62:11) at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:301:63) at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:850:919) at Container (webpack-internal:///./node_modules/next/dist/client/index.js:62:1) at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:172:11) at Root (webpack-internal:///./node_modules/next/dist/client/index.js:347:11) window.console.error @ next-dev.js:20 printWarning @ react-dom.development.js:86 error @ react-dom.development.js:60 checkForNestedUpdates @ react-dom.development.js:27300 scheduleUpdateOnFiber @ react-dom.development.js:25475 dispatchSetState @ react-dom.development.js:17527 eval @ AppMenuitem.tsx:31 commitHookEffectListMount @ react-dom.development.js:23150 commitPassiveMountOnFiber @ react-dom.development.js:24926 commitPassiveMountEffects_complete @ react-dom.development.js:24891 commitPassiveMountEffects_begin @ react-dom.development.js:24878 commitPassiveMountEffects @ react-dom.development.js:24866 flushPassiveEffectsImpl @ react-dom.development.js:27039 flushPassiveEffects @ react-dom.development.js:26984 eval @ react-dom.development.js:26769 workLoop @ scheduler.development.js:266 flushWork @ scheduler.development.js:239 performWorkUntilDeadline @ scheduler.development.js:533
   Please help. Thank you!

[buraksaglam089]

Hello,

In your first question, after updating the theme from the layoutcontext , you need to update it in the app/layout file as follows: href={/theme/theme-light/green/theme.css}. Additionally, on pages where you use charts, you should replace the ||(or) parts in the color` section of ChartData with the one you want to use for the theme.

In your second question, after updating from v9 to v10 , you need to be able to use all menu types without any errors.

I hope this helps!

[damnh]

Thank you for support. Everything is ok now, after I upgrade to v10

[damnh]

Hi @buraksaglam089 ,

Sorry , I have one more question. I save themes in session (next-auth). So when I use getServerSession to get theme from session to edit from href={/theme/theme-light/green/theme.css} to href={/theme/theme-light/${user.themes}/theme.css}, the page is loaded infinitely, when I checked console, the error is following. Can you show me where is wrong? Thank you!

This is error:

Uncaught (in promise) TypeError: Cannot destructure property 'children' of 'param' as it is undefined. at RootLayout (webpack-internal:///(app-client)/./app/layout.tsx:29:11) at describeNativeComponentFrame (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:2534:7) at describeFunctionComponentFrame (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:2629:12) at describeFiber (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:2708:14) at getStackByFiberInDevAndProd (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:2727:15) at createCapturedValueAtFiber (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:14060:12) at throwException (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:14550:11) at throwAndUnwindWorkLoop (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:24676:5) at renderRootConcurrent (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:24291:15) at performConcurrentWorkOnRoot (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:23343:38) at workLoop (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js:261:34) at flushWork (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js:230:14) at MessagePort.performWorkUntilDeadline (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js:537:21) RootLayout @ layout.tsx:19 describeNativeComponentFrame @ react-dom.development.js:2534 describeFunctionComponentFrame @ react-dom.development.js:2629 describeFiber @ react-dom.development.js:2708 getStackByFiberInDevAndProd @ react-dom.development.js:2727 createCapturedValueAtFiber @ react-dom.development.js:14060 throwException @ react-dom.development.js:14550 throwAndUnwindWorkLoop @ react-dom.development.js:24676 renderRootConcurrent @ react-dom.development.js:24291 performConcurrentWorkOnRoot @ react-dom.development.js:23343 workLoop @ scheduler.development.js:261 flushWork @ scheduler.development.js:230 performWorkUntilDeadline @ scheduler.development.js:537 640app-index.js:31 Warning: An error occurred during hydration. The server HTML was replaced with client content in <#document>. window.console.error @ app-index.js:31 console.error @ hydration-error-info.js:45 printWarning @ react-dom.development.js:94 error @ react-dom.development.js:68 errorHydratingContainer @ react-dom.development.js:34648 recoverFromConcurrentError @ react-dom.development.js:23446 performConcurrentWorkOnRoot @ react-dom.development.js:23356 workLoop @ scheduler.development.js:261 flushWork @ scheduler.development.js:230 performWorkUntilDeadline @ scheduler.development.js:537 login:1 Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received 23706app-index.js:31 Warning: An error occurred during hydration. The server HTML was replaced with client content in <#document>.