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

Question

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

95 Views Asked by FransJoakim At 11 March 2024 at 09:52

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>         
    )
}

Original Q&A

There are 2 best solutions below

**FransJoakim** · Answer 1 · 2024-03-11T10:23:22.563000

The issue was caused by the provider being set outside of the html-tag. It was solved by placing Providers within the html-tags like so

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

export default RootLayout

**RI Suvo** · Answer 2 · 2024-03-25T09:50:18.327000

Add this code to your root layout.js before the export default function

if (typeof Node === 'function' && Node.prototype) {
  const originalRemoveChild = Node.prototype.removeChild;
  Node.prototype.removeChild = function(child) {
    if (child.parentNode !== this) {
      if (console) {
        console.error('Cannot remove a child from a different parent', child, this);
      }
      return child;
    }
    return originalRemoveChild.apply(this, arguments);
  }

  const originalInsertBefore = Node.prototype.insertBefore;
  Node.prototype.insertBefore = function(newNode, referenceNode) {
    if (referenceNode && referenceNode.parentNode !== this) {
      if (console) {
        console.error('Cannot insert before a reference node from a different parent', referenceNode, this);
      }
      return newNode;
    }
    return originalInsertBefore.apply(this, arguments);
  }
}

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

There are 2 best solutions below

Related Questions in NEXT.JS14

Related Questions in NOTISTACK

Trending Questions

Popular # Hahtags

Popular Questions