search

premieroctet / next-admin

▲ Full-featured admin for Next.js and Prisma
https://next-admin.js.org
MIT License
321 stars 19 forks source link

[BUG] - Error on Action executed #475

Closed ogoldberg closed 1 month ago

ogoldberg commented 1 month ago

Description

Whenever I execute one of my actions I get NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

The action is executed successfully, but I have to refresh on an error page to see the result. image

Here's what my options file looks like where I specify my actions

export const options: NextAdminOptions = {
  model: {
    Job: {
      toString: (job) => `${job.title}`,
      title: 'Jobs',
      icon: 'WrenchScrewdriverIcon',
      aliases: { updatedAt: 'Last Modified' },
      actions: [
        {
          type: 'server',
          id: 'publish',
          icon: 'CheckIcon',
          title: 'Publish',
          canExecute: () => true,
          action: async (ids: (string | number)[]) => {
            publishJobs(ids);
            return {
              type: 'success',
              message: 'Published Successfully',
            };
          },
          successMessage: 'Published Successfully',
          errorMessage: 'Something went wrong',
        },
        {
          type: 'server',
          id: 'unpublish',
          icon: 'ArchiveBoxIcon',
          title: 'Unpublish',
          canExecute: () => true,
          action: async (ids: (string | number)[]) => {
            unpublishJobs(ids);
            return {
              type: 'success',
              message: 'Unpublished Successfully',
            };
          },
          successMessage: 'Unpublished Successfully',
          errorMessage: 'Something went wrong',
        },
        {
          type: 'server',
          id: 'previewText',
          icon: 'ChatBubbleLeftIcon',
          title: 'Generate Preview Text',
          canExecute: () => true,
          action: async (ids: (string | number)[]) => {
            generatePreviewText(ids);
          },
          successMessage: 'Preview text generated successfully',
          errorMessage: 'Something went wrong',
        },
      ],

Here's an example of one of my actions:

'use server';

import prisma from '@/../server/db/client';

export const publishJobs = async (ids: (string | number)[]) => {
  await prisma.job.updateMany({
    where: { id: { in: ids.map((id) => id.toString()) } },
    data: { published: true },
  });
};

export default publishJobs;

Reproduction URL

N/A

Reproduction steps

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Next router

App router

Next Admin version

6.1.6

Screenshots

![DESCRIPTION](LINK.png)

Next Admin options

export const options: NextAdminOptions = {
  model: {
    Job: {
      toString: (job) => `${job.title}`,
      title: 'Jobs',
      icon: 'WrenchScrewdriverIcon',
      aliases: { updatedAt: 'Last Modified' },
      actions: [
        {
          type: 'server',
          id: 'publish',
          icon: 'CheckIcon',
          title: 'Publish',
          canExecute: () => true,
          action: async (ids: (string | number)[]) => {
            publishJobs(ids);
            return {
              type: 'success',
              message: 'Published Successfully',
            };
          },
          successMessage: 'Published Successfully',
          errorMessage: 'Something went wrong',
        },
        {
          type: 'server',
          id: 'unpublish',
          icon: 'ArchiveBoxIcon',
          title: 'Unpublish',
          canExecute: () => true,
          action: async (ids: (string | number)[]) => {
            unpublishJobs(ids);
            return {
              type: 'success',
              message: 'Unpublished Successfully',
            };
          },
          successMessage: 'Unpublished Successfully',
          errorMessage: 'Something went wrong',
        },
        {
          type: 'server',
          id: 'previewText',
          icon: 'ChatBubbleLeftIcon',
          title: 'Generate Preview Text',
          canExecute: () => true,
          action: async (ids: (string | number)[]) => {
            generatePreviewText(ids);
          },
          successMessage: 'Preview text generated successfully',
          errorMessage: 'Something went wrong',
        },
      ],

Logs

1 of 1 error
Next.js (14.2.14)

Unhandled Runtime Error
NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

Call Stack
removeChild
../src/client/components/react-dev-overlay/internal/components/ShadowPortal.tsx
React
safelyCallDestroy
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (20869:1)
commitDeletionEffectsOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (22182:1)
commitDeletionEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (22013:1)
recursivelyTraverseMutationEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (22413:1)
commitMutationEffectsOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (22488:1)
recursivelyTraverseMutationEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (22427:1)
commitMutationEffectsOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (22449:1)
recursivelyTraverseMutationEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (22427:1)
commitMutationEffectsOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (22876:1)
recursivelyTraverseMutationEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (22427:1)
commitMutationEffectsOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (22876:1)
recursivelyTraverseMutationEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (22427:1)
commitMutationEffectsOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (22876:1)
recursivelyTraverseMutationEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (22427:1)
commitMutationEffectsOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (22876:1)
recursivelyTraverseMutationEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (22427:1)
commitMutationEffectsOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (22876:1)
recursivelyTraverseMutationEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (22427:1)
commitMutationEffectsOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (22876:1)
recursivelyTraverseMutationEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (22427:1)
commitMutationEffectsOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (22449:1)
recursivelyTraverseMutationEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (22427:1)
commitMutationEffectsOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (22488:1)
recursivelyTraverseMutationEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (22427:1)
commitMutationEffectsOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (22449:1)
recursivelyTraverseMutationEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (22427:1)
commitMutationEffectsOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (22449:1)
recursivelyTraverseMutationEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (22427:1)
commitMutationEffectsOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (22449:1)
recursivelyTraverseMutationEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (22427:1)
commitMutationEffectsOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (22449:1)
recursivelyTraverseMutationEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (22427:1)
commitMutationEffectsOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (22876:1)
recursivelyTraverseMutationEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (22427:1)
commitMutationEffectsOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (22876:1)
recursivelyTraverseMutationEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (22427:1)
commitMutationEffectsOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (22876:1)
recursivelyTraverseMutationEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (22427:1)
commitMutationEffectsOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (22681:1)
commitMutationEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (22397:1)
commitRootImpl
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (26213:1)
commitRoot
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (26077:1)
performSyncWorkOnRoot
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (24925:1)
flushSyncWorkAcrossRoots_impl
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (7758:1)
flushSyncWorkOnAllRoots
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (7718:1)
commitRootImpl
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (26369:1)
commitRoot
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (26077:1)
commitRootWhenReady
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (24749:1)
finishConcurrentRender
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (24714:1)

Browsers

Chrome

cregourd commented 1 month ago

Hi @ogoldberg, thanks for your issue,

We are trying to reproduce it, but unfortunately we can't According to your error stack, this issue must be due to your component ShadowPortal.tsx, however, after looking at your config, I saw some changes you could make to avoid any other error.

First, don't forget to await your actions, a refresh is done after the server action is executed, so if you don't await your page will be refreshed but the data will not be updated yet.

Second, in your server action file, you need to choose between default export and const export, not both, exporting both ways for the same function can lead to an error.

Let us know if you find the problem, or if this is really for Next-Admin 🚀

ogoldberg commented 1 month ago

@cregourd Thanks for the reply! I implemented your changes, making sure I add an await on the function calls, and making sure I only use default export, but I'm still getting the error

As for ShadowPortal.tsx, that isn't my component. I'm pretty sure it's part of a next-admin dependency. I don't have any custom components in my app.

Any additional thoughts?

cregourd commented 1 month ago

@ogoldberg, we will dive into Next Admin dependencies way

Does this happen on List action (row or multiple rows) or Form action? And does this happen anytime or only on some?

ogoldberg commented 1 month ago

@cregourd Thanks for looking into it! It happens on List view regardless of how many rows selected, and Edit views. It happens every single time an Action is executed.

*edited for clarity

cregourd commented 1 month ago

@cregourd Thanks for looking into it! It happens on List view regardless of how many rows selected, and Edit views. It happens every single time an Action is executed.

*edited for clarity

Do you apply any of Chrome's built-in translations (manually or automatically) to your pages?

If so, this issue may be related to this Radix issue https://github.com/radix-ui/primitives/issues/2578#issuecomment-1890801041. We can't reproduce it with Next-Admin's action dropdown, but maybe it can point us in the right direction

ogoldberg commented 1 month ago

@cregourd Good question. I did have Google translate enabled, but I have disabled it, tested in incognito, and tested in firefox and firefox private mode and I still get the same outcome.

cregourd commented 1 month ago

In the Next-Admin's demonstration we have a similar action on Post, can you reproduce this issue on it ?

https://next-admin-po.vercel.app/en/admin/post

ogoldberg commented 1 month ago

No, in your example everything works fine. I actually was aware of how similar your example was, and I modeled my implementation off of it.

Let me share my updated code in case I did something differently than what you meant to communicate:

options.tsx

export const options: NextAdminOptions = {
  model: {
    Job: {
      toString: (job) => `${job.title}`,
      title: 'Jobs',
      icon: 'WrenchScrewdriverIcon',
      aliases: { updatedAt: 'Last Modified' },
      actions: [
        {
          type: 'server',
          id: 'publish',
          icon: 'CheckIcon',
          title: 'Publish',
          action: async (ids: (string | number)[]) => {
            await publishJobs(ids);
            return {
              type: 'success',
              message: 'Published Successfully',
            };
          },
          successMessage: 'Published Successfully',
          errorMessage: 'Something went wrong',
        },
        {
          type: 'server',
          id: 'unpublish',
          icon: 'ArchiveBoxIcon',
          title: 'Unpublish',
          action: async (ids: (string | number)[]) => {
            await unpublishJobs(ids);
            return {
              type: 'success',
              message: 'Unpublished Successfully',
            };
          },
          successMessage: 'Unpublished Successfully',
          errorMessage: 'Something went wrong',
        },
        {
          type: 'server',
          id: 'previewText',
          icon: 'ChatBubbleLeftIcon',
          title: 'Generate Preview Text',
          action: async (ids: (string | number)[]) => {
            const stringIds = ids.map(String);
            await generatePreviewText(stringIds.join(','));
          },
          successMessage: 'Preview text generated successfully',
          errorMessage: 'Something went wrong',
        },
      ],

publishJobs.ts

'use server';

import prisma from '@/../server/db/client';

const publishJobs = async (ids: (string | number)[]) => {
  await prisma.job.updateMany({
    where: { id: { in: ids.map((id) => id.toString()) } },
    data: { published: true },
  });
};

export default publishJobs;
ogoldberg commented 1 month ago

@cregourd Maybe I should also mention this, in case it's relevant: Whenever I even load the admin page I get these errors in the browser console:

Warning: Cannot render a <link rel="stylesheet" /> outside the main document without knowing its precedence. Consider adding precedence="default" or moving it into the root <head> tag.
    at html
    at SessionProvider (webpack-internal:///(app-pages-browser)/./node_modules/next-auth/react.js:261:13)
    at SessionWrapper (webpack-internal:///(app-pages-browser)/./src/app/auth.session.tsx:11:11)
    at RootLayout (Server)
    at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:74:9)
    at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:82:11)
    at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:76:9)
    at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11)
    at DevRootNotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/dev-root-not-found-boundary.js:33:11)
    at ReactDevOverlay (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/app/ReactDevOverlay.js:87:9)
    at HotReload (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/app/hot-reloader-client.js:321:11)
    at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:207:11)
    at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:113:9)
    at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:160:11)
    at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:585:13)
    at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:112:27)
    at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:117:11)
window.console.error @ app-index.js:33
console.error @ hydration-error-info.js:63
printWarning @ react-dom.development.js:94
error @ react-dom.development.js:68
isHostHoistableType @ react-dom.development.js:37434
createFiberFromTypeAndProps @ react-dom.development.js:27835
createFiberFromElement @ react-dom.development.js:27970
createChild @ react-dom.development.js:9726
reconcileChildrenArray @ react-dom.development.js:10088
reconcileChildFibersImpl @ react-dom.development.js:10515
reconcileChildFibers @ react-dom.development.js:10573
reconcileChildren @ react-dom.development.js:15802
updateHostSingleton @ react-dom.development.js:16727
beginWork$1 @ react-dom.development.js:18497
beginWork @ react-dom.development.js:26927
performUnitOfWork @ react-dom.development.js:25748
workLoopConcurrent @ react-dom.development.js:25734
renderRootConcurrent @ react-dom.development.js:25690
performConcurrentWorkOnRoot @ react-dom.development.js:24504
workLoop @ scheduler.development.js:256
flushWork @ scheduler.development.js:225
performWorkUntilDeadline @ scheduler.development.js:534
Show 22 more frames
Show lessUnderstand this error
app-index.js:33 Warning: In HTML, <link> cannot be a child of <html>.
This will cause a hydration error.
    at link
    at html
    at SessionProvider (webpack-internal:///(app-pages-browser)/./node_modules/next-auth/react.js:261:13)
    at SessionWrapper (webpack-internal:///(app-pages-browser)/./src/app/auth.session.tsx:11:11)
    at RootLayout (Server)
    at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:74:9)
    at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:82:11)
    at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:76:9)
    at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11)
    at DevRootNotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/dev-root-not-found-boundary.js:33:11)
    at ReactDevOverlay (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/app/ReactDevOverlay.js:87:9)
    at HotReload (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/app/hot-reloader-client.js:321:11)
    at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:207:11)
    at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:113:9)
    at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:160:11)
    at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:585:13)
    at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:112:27)
    at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:117:11)
window.console.error @ app-index.js:33
console.error @ hydration-error-info.js:63
printWarning @ react-dom.development.js:94
error @ react-dom.development.js:68
validateDOMNesting @ react-dom.development.js:4282
validateHydratableInstance @ react-dom.development.js:36116
tryToClaimNextHydratableInstance @ react-dom.development.js:7006
updateHostComponent$1 @ react-dom.development.js:16621
beginWork$1 @ react-dom.development.js:18503
beginWork @ react-dom.development.js:26927
performUnitOfWork @ react-dom.development.js:25748
workLoopConcurrent @ react-dom.development.js:25734
renderRootConcurrent @ react-dom.development.js:25690
performConcurrentWorkOnRoot @ react-dom.development.js:24504
workLoop @ scheduler.development.js:256
flushWork @ scheduler.development.js:225
performWorkUntilDeadline @ scheduler.development.js:534
Show 17 more frames
Show lessUnderstand this error
react-dom.development.js:6981 Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
See more info here: https://nextjs.org/docs/messages/react-hydration-error
    at throwOnHydrationMismatch (react-dom.development.js:6981:9)
    at tryToClaimNextHydratableInstance (react-dom.development.js:7040:7)
    at updateHostComponent$1 (react-dom.development.js:16621:5)
    at beginWork$1 (react-dom.development.js:18503:14)
    at HTMLUnknownElement.callCallback (react-dom.development.js:20565:14)
    at Object.invokeGuardedCallbackImpl (react-dom.development.js:20614:16)
    at invokeGuardedCallback (react-dom.development.js:20689:29)
    at beginWork (react-dom.development.js:26949:7)
    at performUnitOfWork (react-dom.development.js:25748:12)
    at workLoopConcurrent (react-dom.development.js:25734:5)
    at renderRootConcurrent (react-dom.development.js:25690:9)
    at performConcurrentWorkOnRoot (react-dom.development.js:24504:38)
    at workLoop (scheduler.development.js:256:34)
    at flushWork (scheduler.development.js:225:14)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:534:21)
throwOnHydrationMismatch @ react-dom.development.js:6981
tryToClaimNextHydratableInstance @ react-dom.development.js:7040
updateHostComponent$1 @ react-dom.development.js:16621
beginWork$1 @ react-dom.development.js:18503
callCallback @ react-dom.development.js:20565
invokeGuardedCallbackImpl @ react-dom.development.js:20614
invokeGuardedCallback @ react-dom.development.js:20689
beginWork @ react-dom.development.js:26949
performUnitOfWork @ react-dom.development.js:25748
workLoopConcurrent @ react-dom.development.js:25734
renderRootConcurrent @ react-dom.development.js:25690
performConcurrentWorkOnRoot @ react-dom.development.js:24504
workLoop @ scheduler.development.js:256
flushWork @ scheduler.development.js:225
performWorkUntilDeadline @ scheduler.development.js:534
Show 15 more frames
Show lessUnderstand this error
app-index.js:33 Warning: An error occurred during hydration. The server HTML was replaced with client content in <#document>.
window.console.error @ app-index.js:33
console.error @ hydration-error-info.js:63
printWarning @ react-dom.development.js:94
error @ react-dom.development.js:68
errorHydratingContainer @ react-dom.development.js:36301
recoverFromConcurrentError @ react-dom.development.js:24593
performConcurrentWorkOnRoot @ react-dom.development.js:24542
workLoop @ scheduler.development.js:256
flushWork @ scheduler.development.js:225
performWorkUntilDeadline @ scheduler.development.js:534
Show 10 more frames
Show lessUnderstand this error
app-index.js:33 Warning: Cannot render a <link rel="stylesheet" /> outside the main document without knowing its precedence. Consider adding precedence="default" or moving it into the root <head> tag.
    at html
    at SessionProvider (webpack-internal:///(app-pages-browser)/./node_modules/next-auth/react.js:261:13)
    at SessionWrapper (webpack-internal:///(app-pages-browser)/./src/app/auth.session.tsx:11:11)
    at RootLayout (Server)
    at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:74:9)
    at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:82:11)
    at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:76:9)
    at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11)
    at DevRootNotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/dev-root-not-found-boundary.js:33:11)
    at ReactDevOverlay (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/app/ReactDevOverlay.js:87:9)
    at HotReload (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/app/hot-reloader-client.js:321:11)
    at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:207:11)
    at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:113:9)
    at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:160:11)
    at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:585:13)
    at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:112:27)
    at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:117:11)
window.console.error @ app-index.js:33
console.error @ hydration-error-info.js:63
printWarning @ react-dom.development.js:94
error @ react-dom.development.js:68
isHostHoistableType @ react-dom.development.js:37434
createFiberFromTypeAndProps @ react-dom.development.js:27835
createFiberFromElement @ react-dom.development.js:27970
createChild @ react-dom.development.js:9726
reconcileChildrenArray @ react-dom.development.js:10088
reconcileChildFibersImpl @ react-dom.development.js:10515
reconcileChildFibers @ react-dom.development.js:10573
updateHostSingleton @ react-dom.development.js:16725
beginWork$1 @ react-dom.development.js:18497
beginWork @ react-dom.development.js:26927
performUnitOfWork @ react-dom.development.js:25748
workLoopSync @ react-dom.development.js:25464
renderRootSync @ react-dom.development.js:25419
recoverFromConcurrentError @ react-dom.development.js:24597
performConcurrentWorkOnRoot @ react-dom.development.js:24542
workLoop @ scheduler.development.js:256
flushWork @ scheduler.development.js:225
performWorkUntilDeadline @ scheduler.development.js:534
Show 22 more frames
Show lessUnderstand this error
app-index.js:33 Warning: In HTML, <div> cannot be a child of <html>.
This will cause a hydration error.
    at div
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/@radix-ui/react-primitive/dist/index.mjs:36:13)
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/@radix-ui/react-dismissable-layer/dist/index.mjs:150:56)
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/@radix-ui/react-toast/dist/index.mjs:97:13)
    at _c (webpack-internal:///(app-pages-browser)/./src/components/ui/toast.tsx:26:11)
    at Provider (webpack-internal:///(app-pages-browser)/./node_modules/@radix-ui/react-context/dist/index.mjs:34:15)
    at Provider (webpack-internal:///(app-pages-browser)/./node_modules/@radix-ui/react-collection/node_modules/@radix-ui/react-context/dist/index.mjs:34:15)
    at CollectionProvider (webpack-internal:///(app-pages-browser)/./node_modules/@radix-ui/react-collection/dist/index.mjs:28:17)
    at ToastProvider (webpack-internal:///(app-pages-browser)/./node_modules/@radix-ui/react-toast/dist/index.mjs:59:13)
    at Toaster (webpack-internal:///(app-pages-browser)/./src/components/ui/toaster.tsx:14:90)
    at html
    at SessionProvider (webpack-internal:///(app-pages-browser)/./node_modules/next-auth/react.js:261:13)
    at SessionWrapper (webpack-internal:///(app-pages-browser)/./src/app/auth.session.tsx:11:11)
    at RootLayout (Server)
    at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:74:9)
    at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:82:11)
    at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:76:9)
    at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11)
    at DevRootNotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/dev-root-not-found-boundary.js:33:11)
    at ReactDevOverlay (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/app/ReactDevOverlay.js:87:9)
    at HotReload (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/app/hot-reloader-client.js:321:11)
    at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:207:11)
    at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:113:9)
    at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:160:11)
    at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:585:13)
    at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:112:27)
    at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:117:11)
window.console.error @ app-index.js:33
console.error @ hydration-error-info.js:63
printWarning @ react-dom.development.js:94
error @ react-dom.development.js:68
validateDOMNesting @ react-dom.development.js:4282
createInstance @ react-dom.development.js:35403
completeWork @ react-dom.development.js:19773
completeUnitOfWork @ react-dom.development.js:25963
performUnitOfWork @ react-dom.development.js:25759
workLoopSync @ react-dom.development.js:25464
renderRootSync @ react-dom.development.js:25419
recoverFromConcurrentError @ react-dom.development.js:24597
performConcurrentWorkOnRoot @ react-dom.development.js:24542
workLoop @ scheduler.development.js:256
flushWork @ scheduler.development.js:225
performWorkUntilDeadline @ scheduler.development.js:534
Show 16 more frames
Show lessUnderstand this error
3on-recoverable-error.js:20 Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
See more info here: https://nextjs.org/docs/messages/react-hydration-error
    at throwOnHydrationMismatch (react-dom.development.js:6981:9)
    at tryToClaimNextHydratableInstance (react-dom.development.js:7040:7)
    at updateHostComponent$1 (react-dom.development.js:16621:5)
    at beginWork$1 (react-dom.development.js:18503:14)
    at beginWork (react-dom.development.js:26927:14)
    at performUnitOfWork (react-dom.development.js:25748:12)
    at workLoopConcurrent (react-dom.development.js:25734:5)
    at renderRootConcurrent (react-dom.development.js:25690:9)
    at performConcurrentWorkOnRoot (react-dom.development.js:24504:38)
    at workLoop (scheduler.development.js:256:34)
    at flushWork (scheduler.development.js:225:14)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:534:21)
throwOnHydrationMismatch @ react-dom.development.js:6981
tryToClaimNextHydratableInstance @ react-dom.development.js:7040
updateHostComponent$1 @ react-dom.development.js:16621
beginWork$1 @ react-dom.development.js:18503
beginWork @ react-dom.development.js:26927
performUnitOfWork @ react-dom.development.js:25748
workLoopConcurrent @ react-dom.development.js:25734
renderRootConcurrent @ react-dom.development.js:25690
performConcurrentWorkOnRoot @ react-dom.development.js:24504
workLoop @ scheduler.development.js:256
flushWork @ scheduler.development.js:225
performWorkUntilDeadline @ scheduler.development.js:534
Show 12 more frames
Show lessUnderstand this error
react-dom.development.js:16571 Uncaught Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
See more info here: https://nextjs.org/docs/messages/react-hydration-error
    at updateHostRoot (react-dom.development.js:16571:57)
    at beginWork$1 (react-dom.development.js:18486:14)
    at beginWork (react-dom.development.js:26927:14)
    at performUnitOfWork (react-dom.development.js:25748:12)
    at workLoopSync (react-dom.development.js:25464:5)
    at renderRootSync (react-dom.development.js:25419:7)
    at recoverFromConcurrentError (react-dom.development.js:24597:20)
    at performConcurrentWorkOnRoot (react-dom.development.js:24542:26)
    at workLoop (scheduler.development.js:256:34)
    at flushWork (scheduler.development.js:225:14)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:534:21)
updateHostRoot @ react-dom.development.js:16571
beginWork$1 @ react-dom.development.js:18486
beginWork @ react-dom.development.js:26927
performUnitOfWork @ react-dom.development.js:25748
workLoopSync @ react-dom.development.js:25464
renderRootSync @ react-dom.development.js:25419
recoverFromConcurrentError @ react-dom.development.js:24597
performConcurrentWorkOnRoot @ react-dom.development.js:24542
workLoop @ scheduler.development.js:256
flushWork @ scheduler.development.js:225
performWorkUntilDeadline @ scheduler.development.js:534
Show 11 more frames
Show lessUnderstand this error
job:85 Uncaught TypeError: Cannot read properties of null (reading 'parentNode')
    at $RS (job:85:71311)
    at job:85:71380
$RS @ job:85
(anonymous) @ job:85Understand this error
job:85 Uncaught TypeError: Cannot read properties of null (reading 'parentNode')
    at $RC (job:85:71464)
    at job:85:71891
$RC @ job:85
(anonymous) @ job:85Understand this error
app-index.js:33 Warning: In HTML, <html> cannot be a child of <div>.
This will cause a hydration error.
    at html
    at RootLayout (Server)
    at InnerLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:243:11)
    at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:74:9)
    at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:82:11)
    at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:76:9)
    at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11)
    at Suspense
    at LoadingBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:349:11)
    at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:160:11)
    at InnerScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:153:9)
    at ScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:228:11)
    at RenderFromTemplateContext (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/render-from-template-context.js:16:44)
    at OuterLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:370:11)
    at div
    at O (webpack-internal:///(app-pages-browser)/./node_modules/next-themes/dist/index.mjs:28:24)
    at z (webpack-internal:///(app-pages-browser)/./node_modules/next-themes/dist/index.mjs:21:47)
    at ThemeProvider (webpack-internal:///(app-pages-browser)/./src/components/theme-provider.tsx:13:11)
    at BlankLayout
    at LayoutProvider (webpack-internal:///(app-pages-browser)/./src/app/lib/layout.provider.tsx:27:80)
    at body
    at html
    at SessionProvider (webpack-internal:///(app-pages-browser)/./node_modules/next-auth/react.js:261:13)
    at SessionWrapper (webpack-internal:///(app-pages-browser)/./src/app/auth.session.tsx:11:11)
    at RootLayout (Server)
    at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:74:9)
    at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:82:11)
    at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:76:9)
    at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11)
    at DevRootNotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/dev-root-not-found-boundary.js:33:11)
    at ReactDevOverlay (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/app/ReactDevOverlay.js:87:9)
    at HotReload (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/app/hot-reloader-client.js:321:11)
    at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:207:11)
    at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:113:9)
    at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:160:11)
    at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:585:13)
    at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:112:27)
    at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:117:11)
window.console.error @ app-index.js:33
console.error @ hydration-error-info.js:63
printWarning @ react-dom.development.js:94
error @ react-dom.development.js:68
validateDOMNesting @ react-dom.development.js:4282
resolveSingletonInstance @ react-dom.development.js:36312
completeWork @ react-dom.development.js:19728
completeUnitOfWork @ react-dom.development.js:25963
performUnitOfWork @ react-dom.development.js:25759
workLoopConcurrent @ react-dom.development.js:25734
renderRootConcurrent @ react-dom.development.js:25690
performConcurrentWorkOnRoot @ react-dom.development.js:24504
workLoop @ scheduler.development.js:256
flushWork @ scheduler.development.js:225
performWorkUntilDeadline @ scheduler.development.js:534
Show 15 more frames
Show lessUnderstand this error
app-index.js:33 Warning: You are mounting a new html component when a previous one has not first unmounted. It is an error to render more than one html component at a time and attributes and children of these components will likely fail in unpredictable ways. Please only render a single instance of <html> and if you need to mount a new one, ensure any previous ones have unmounted first.
    at html
    at RootLayout (Server)
    at InnerLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:243:11)
    at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:74:9)
    at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:82:11)
    at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:76:9)
    at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11)
    at Suspense
    at LoadingBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:349:11)
    at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:160:11)
    at InnerScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:153:9)
    at ScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:228:11)
    at RenderFromTemplateContext (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/render-from-template-context.js:16:44)
    at OuterLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:370:11)
    at div
    at O (webpack-internal:///(app-pages-browser)/./node_modules/next-themes/dist/index.mjs:28:24)
    at z (webpack-internal:///(app-pages-browser)/./node_modules/next-themes/dist/index.mjs:21:47)
    at ThemeProvider (webpack-internal:///(app-pages-browser)/./src/components/theme-provider.tsx:13:11)
    at BlankLayout
    at LayoutProvider (webpack-internal:///(app-pages-browser)/./src/app/lib/layout.provider.tsx:27:80)
    at body
    at html
    at SessionProvider (webpack-internal:///(app-pages-browser)/./node_modules/next-auth/react.js:261:13)
    at SessionWrapper (webpack-internal:///(app-pages-browser)/./src/app/auth.session.tsx:11:11)
    at RootLayout (Server)
    at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:74:9)
    at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:82:11)
    at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:76:9)
    at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11)
    at DevRootNotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/dev-root-not-found-boundary.js:33:11)
    at ReactDevOverlay (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/app/ReactDevOverlay.js:87:9)
    at HotReload (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/app/hot-reloader-client.js:321:11)
    at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:207:11)
    at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:113:9)
    at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:160:11)
    at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:585:13)
    at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:112:27)
    at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:117:11)
window.console.error @ app-index.js:33
console.error @ hydration-error-info.js:63
printWarning @ react-dom.development.js:94
error @ react-dom.development.js:68
acquireSingletonInstance @ react-dom.development.js:36365
commitMutationEffectsOnFiber @ react-dom.development.js:22584
recursivelyTraverseMutationEffects @ react-dom.development.js:22427
commitMutationEffectsOnFiber @ react-dom.development.js:22876
recursivelyTraverseMutationEffects @ react-dom.development.js:22427
commitMutationEffectsOnFiber @ react-dom.development.js:22876
recursivelyTraverseMutationEffects @ react-dom.development.js:22427
commitMutationEffectsOnFiber @ react-dom.development.js:22449
recursivelyTraverseMutationEffects @ react-dom.development.js:22427
commitMutationEffectsOnFiber @ react-dom.development.js:22488
recursivelyTraverseMutationEffects @ react-dom.development.js:22427
commitMutationEffectsOnFiber @ react-dom.development.js:22449
recursivelyTraverseMutationEffects @ react-dom.development.js:22427
commitMutationEffectsOnFiber @ react-dom.development.js:22488
recursivelyTraverseMutationEffects @ react-dom.development.js:22427
commitMutationEffectsOnFiber @ react-dom.development.js:22449
recursivelyTraverseMutationEffects @ react-dom.development.js:22427
commitMutationEffectsOnFiber @ react-dom.development.js:22786
recursivelyTraverseMutationEffects @ react-dom.development.js:22427
commitMutationEffectsOnFiber @ react-dom.development.js:22720
recursivelyTraverseMutationEffects @ react-dom.development.js:22427
commitMutationEffectsOnFiber @ react-dom.development.js:22449
recursivelyTraverseMutationEffects @ react-dom.development.js:22427
commitMutationEffectsOnFiber @ react-dom.development.js:22449
recursivelyTraverseMutationEffects @ react-dom.development.js:22427
commitMutationEffectsOnFiber @ react-dom.development.js:22488
recursivelyTraverseMutationEffects @ react-dom.development.js:22427
commitMutationEffectsOnFiber @ react-dom.development.js:22449
recursivelyTraverseMutationEffects @ react-dom.development.js:22427
commitMutationEffectsOnFiber @ react-dom.development.js:22449
recursivelyTraverseMutationEffects @ react-dom.development.js:22427
commitMutationEffectsOnFiber @ react-dom.development.js:22876
recursivelyTraverseMutationEffects @ react-dom.development.js:22427
commitMutationEffectsOnFiber @ react-dom.development.js:22449
recursivelyTraverseMutationEffects @ react-dom.development.js:22427
commitMutationEffectsOnFiber @ react-dom.development.js:22593
recursivelyTraverseMutationEffects @ react-dom.development.js:22427
commitMutationEffectsOnFiber @ react-dom.development.js:22876
recursivelyTraverseMutationEffects @ react-dom.development.js:22427
commitMutationEffectsOnFiber @ react-dom.development.js:22449
recursivelyTraverseMutationEffects @ react-dom.development.js:22427
commitMutationEffectsOnFiber @ react-dom.development.js:22449
recursivelyTraverseMutationEffects @ react-dom.development.js:22427
commitMutationEffectsOnFiber @ react-dom.development.js:22449
recursivelyTraverseMutationEffects @ react-dom.development.js:22427
commitMutationEffectsOnFiber @ react-dom.development.js:22449
recursivelyTraverseMutationEffects @ react-dom.development.js:22427
commitMutationEffectsOnFiber @ react-dom.development.js:22449
recursivelyTraverseMutationEffects @ react-dom.development.js:22427
commitMutationEffectsOnFiber @ react-dom.development.js:22593
recursivelyTraverseMutationEffects @ react-dom.development.js:22427
commitMutationEffectsOnFiber @ react-dom.development.js:22593
recursivelyTraverseMutationEffects @ react-dom.development.js:22427
commitMutationEffectsOnFiber @ react-dom.development.js:22876
recursivelyTraverseMutationEffects @ react-dom.development.js:22427
commitMutationEffectsOnFiber @ react-dom.development.js:22449
recursivelyTraverseMutationEffects @ react-dom.development.js:22427
commitMutationEffectsOnFiber @ react-dom.development.js:22449
recursivelyTraverseMutationEffects @ react-dom.development.js:22427
commitMutationEffectsOnFiber @ react-dom.development.js:22876
recursivelyTraverseMutationEffects @ react-dom.development.js:22427
commitMutationEffectsOnFiber @ react-dom.development.js:22876
recursivelyTraverseMutationEffects @ react-dom.development.js:22427
commitMutationEffectsOnFiber @ react-dom.development.js:22488
recursivelyTraverseMutationEffects @ react-dom.development.js:22427
commitMutationEffectsOnFiber @ react-dom.development.js:22449
recursivelyTraverseMutationEffects @ react-dom.development.js:22427
commitMutationEffectsOnFiber @ react-dom.development.js:22876
recursivelyTraverseMutationEffects @ react-dom.development.js:22427
commitMutationEffectsOnFiber @ react-dom.development.js:22488
recursivelyTraverseMutationEffects @ react-dom.development.js:22427
commitMutationEffectsOnFiber @ react-dom.development.js:22449
recursivelyTraverseMutationEffects @ react-dom.development.js:22427
commitMutationEffectsOnFiber @ react-dom.development.js:22449
recursivelyTraverseMutationEffects @ react-dom.development.js:22427
commitMutationEffectsOnFiber @ react-dom.development.js:22488
recursivelyTraverseMutationEffects @ react-dom.development.js:22427
commitMutationEffectsOnFiber @ react-dom.development.js:22449
recursivelyTraverseMutationEffects @ react-dom.development.js:22427
commitMutationEffectsOnFiber @ react-dom.development.js:22876
recursivelyTraverseMutationEffects @ react-dom.development.js:22427
commitMutationEffectsOnFiber @ react-dom.development.js:22876
recursivelyTraverseMutationEffects @ react-dom.development.js:22427
commitMutationEffectsOnFiber @ react-dom.development.js:22876
recursivelyTraverseMutationEffects @ react-dom.development.js:22427
commitMutationEffectsOnFiber @ react-dom.development.js:22876
recursivelyTraverseMutationEffects @ react-dom.development.js:22427
commitMutationEffectsOnFiber @ react-dom.development.js:22876
recursivelyTraverseMutationEffects @ react-dom.development.js:22427
commitMutationEffectsOnFiber @ react-dom.development.js:22876
recursivelyTraverseMutationEffects @ react-dom.development.js:22427
commitMutationEffectsOnFiber @ react-dom.development.js:22449
recursivelyTraverseMutationEffects @ react-dom.development.js:22427
commitMutationEffectsOnFiber @ react-dom.development.js:22488
recursivelyTraverseMutationEffects @ react-dom.development.js:22427
commitMutationEffectsOnFiber @ react-dom.development.js:22449
recursivelyTraverseMutationEffects @ react-dom.development.js:22427
commitMutationEffectsOnFiber @ react-dom.development.js:22449
recursivelyTraverseMutationEffects @ react-dom.development.js:22427
commitMutationEffectsOnFiber @ react-dom.development.js:22449
recursivelyTraverseMutationEffects @ react-dom.development.js:22427
commitMutationEffectsOnFiber @ react-dom.development.js:22449
recursivelyTraverseMutationEffects @ react-dom.development.js:22427
commitMutationEffectsOnFiber @ react-dom.development.js:22876
recursivelyTraverseMutationEffects @ react-dom.development.js:22427
commitMutationEffectsOnFiber @ react-dom.development.js:22876
recursivelyTraverseMutationEffects @ react-dom.development.js:22427
commitMutationEffectsOnFiber @ react-dom.development.js:22876
recursivelyTraverseMutationEffects @ react-dom.development.js:22427
commitMutationEffectsOnFiber @ react-dom.development.js:22681
commitMutationEffects @ react-dom.development.js:22397
commitRootImpl @ react-dom.development.js:26213
commitRoot @ react-dom.development.js:26077
commitRootWhenReady @ react-dom.development.js:24749
finishConcurrentRender @ react-dom.development.js:24714
performConcurrentWorkOnRoot @ react-dom.development.js:24559
workLoop @ scheduler.development.js:256
flushWork @ scheduler.development.js:225
performWorkUntilDeadline @ scheduler.development.js:534
Show 123 more frames
Show lessUnderstand this error
app-index.js:33 Warning: You are mounting a new body component when a previous one has not first unmounted. It is an error to render more than one body component at a time and attributes and children of these components will likely fail in unpredictable ways. Please only render a single instance of <body> and if you need to mount a new one, ensure any previous ones have unmounted first.
    at body
    at html
    at RootLayout (Server)
    at InnerLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:243:11)
    at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:74:9)
    at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:82:11)
    at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:76:9)
    at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11)
    at Suspense
    at LoadingBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:349:11)
    at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:160:11)
    at InnerScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:153:9)
    at ScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:228:11)
    at RenderFromTemplateContext (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/render-from-template-context.js:16:44)
    at OuterLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:370:11)
    at div
    at O (webpack-internal:///(app-pages-browser)/./node_modules/next-themes/dist/index.mjs:28:24)
    at z (webpack-internal:///(app-pages-browser)/./node_modules/next-themes/dist/index.mjs:21:47)
    at ThemeProvider (webpack-internal:///(app-pages-browser)/./src/components/theme-provider.tsx:13:11)
    at BlankLayout
    at LayoutProvider (webpack-internal:///(app-pages-browser)/./src/app/lib/layout.provider.tsx:27:80)
    at body
    at html
    at SessionProvider (webpack-internal:///(app-pages-browser)/./node_modules/next-auth/react.js:261:13)
    at SessionWrapper (webpack-internal:///(app-pages-browser)/./src/app/auth.session.tsx:11:11)
    at RootLayout (Server)
    at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:74:9)
    at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:82:11)
    at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:76:9)
    at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11)
    at DevRootNotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/dev-root-not-found-boundary.js:33:11)
    at ReactDevOverlay (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/app/ReactDevOverlay.js:87:9)
    at HotReload (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/app/hot-reloader-client.js:321:11)
    at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:207:11)
    at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:113:9)
    at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:160:11)
    at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:585:13)
    at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:112:27)
    at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:117:11)
cregourd commented 1 month ago

Make sure that you have only one html tag and body tag in your app, especially if you have multiple layout.tsx, just one ( the root one ) must have the html and body tag, this can possibly explain this error stack ☝️, but I don't know yet if this will fix the dropdown issue.

Let us know if it works

ogoldberg commented 1 month ago

Great job! That actually solved the problem! I changed this:

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

to this:

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return <>{children}</>;
}

and the bug is gone.

Thank you!