notistack in NextJS -> NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node

I'm using notistack (3.0.1) to handle toasts in my NextJS (14.0.4) project.

I don't understand what's causing the error that shows up when I trigger the enqueueSnackbar-function: "NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node."

I'm using a Provers component within my layout-file, so to wrap the app in the SnackbarProvider-context within a client-component. I've seen this pattern been used before, though I'm not sure what else could cause the issue

const RootLayout = ({ children }: { children: React.ReactNode }) => {
    return (
        <Providers>
            <html lang="no">
                <body id="__next" >
                    {children}
                </body>
            </html>
        </Providers>
    )
}

export default RootLayout

"use client"

import { SnackbarProvider } from "notistack"

export const Providers = ({ children }: { children: React.ReactNode }) => {
    return (
        <SnackbarProvider>
             {children}
        </SnackbarProvider>         
    )
}

Solution

I had a similar issue when using multiple and nested layouts in nextjs. For me it was resolved by a suggestion from nextjs github discussion here. I ensured my html and body tags arrived only once and those tags arrived before any <></> react fragment tags. Hope this helps!