Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node #25049

darwin-morocho · 2021-05-11T18:12:56Z

darwin-morocho
May 11, 2021

What version of Next.js are you using?

9.5.5

What version of Node.js are you using?

14.16.0

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

next start

Describe the Bug

I'am implementing the facebook messenger chat using this code

import { PureComponent } from 'react';

export default class MessengerChat extends PureComponent {
  initialized = false;

  componentDidMount() {
    if (!this.initialized) {
      this.initialized = true;
      const script = document.createElement('script');
      script.src = 'https://connect.facebook.net/es_LA/sdk/xfbml.customerchat.js';
      script.async = true;
      script.onload = () => {
        (window as any).fbAsyncInit = () => {
          (window as any).FB.init({
            xfbml: true,
            version: 'v10.0',
            appId: 220291656074258,
          });
        };
      };
      document.head.appendChild(script);
    }
  }

  render() {
    return (
      <>
        <div id="fb-root" />
        <div className="fb-customerchat" {...{ attribution: 'biz_inbox', page_id: '103155228155970' }} />
      </>
    );
  }
}

And importing it as

import dynamic from 'next/dynamic';
const MessengerChat = dynamic(() => import('./MessengerChat'), { ssr: false });

The first time when the page loads it works perfect, but when navigate to another page I have the next error

DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

Using this package https://www.npmjs.com/package/react-messenger-customer-chat I have the same problem

Expected Behavior

The next page must work without any problem

To Reproduce

Navigate to pages without refreshing the app

ljosberinn · 2021-05-12T09:45:59Z

ljosberinn
May 12, 2021

doesn't seem related to nextjs

0 replies

jzaburunov · 2022-04-20T18:04:56Z

jzaburunov
Apr 20, 2022

@darwin-morocho Hi! Did you solve this?

0 replies

isaacspagnol · 2022-08-20T14:13:03Z

isaacspagnol
Aug 20, 2022

@darwin-morocho HI! I had the same problem here.. Did you solve it?

0 replies

lyonfuture · 2022-10-27T09:27:53Z

lyonfuture
Oct 27, 2022

Any updates on this? Facing the same issue.

0 replies

mAAdhaTTah · 2022-10-27T13:20:46Z

mAAdhaTTah
Oct 27, 2022

This is a React error: facebook/react#17256

0 replies

mcgrealife · 2022-10-28T02:17:40Z

mcgrealife
Oct 28, 2022

Try wrapping the element in an empty div.

Sometimes a library (like google maps) will move the referenced element to a different part of the DOM. So when react tries to remove it, it’s gone. But if you wrap the referenced element in a div, then the div wrapper will remain, even if its child is removed by another non-react process.

0 replies

vishnukumarkvs · 2023-08-09T06:42:26Z

vishnukumarkvs
Aug 9, 2023

I recieved this error because of .jsx files. Convert .jsx to js and mark it as a Client Component. Using Nextjs 13.4.3

0 replies

frontendparham · 2023-10-09T00:24:19Z

frontendparham
Oct 9, 2023

if you get this error when you want to create multiple layout.jsx files for different parts of your application make sure to return a react fragment (<></>) from any layout.jsx component Except the root layout. so DO NOT return html and body tag again.

11 replies

mozxmmil Jun 2, 2024

thanks bro it's worked

jennyliuzhang Jun 24, 2024

bless you

stevebarakat Jul 18, 2024

Thank you!

lpodkalicki Aug 14, 2024

Thanks! :)

Shobhit2806 Sep 30, 2024

Thanks

codewithahad01 · 2023-11-06T10:42:25Z

codewithahad01
Nov 6, 2023

I solution for this error that I had in my code in Next.js
so, basically when making every page I put layout.tsx file for them and I copied the code for layouts same like root layout that it shouldn't be the same

<html lang="en">
      <body className={edu_tas_beginner.className}>
        {children}
      </body>
  </html>

The HTML and body tag should only be in the root layout not in other layouts for pages. so remove the html and body tag for every layout except the root layout.
write below code in every layout files

{children}

6 replies

beforedisappear · 2024-04-18T21:37:01Z

beforedisappear
Apr 18, 2024

Any updates? It is big problem when u use google translator

0 replies

0xshawn · 2024-09-11T05:05:57Z

0xshawn
Sep 11, 2024

same too

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node #25049

{{title}}

Replies: 11 comments 17 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node #25049

What version of Next.js are you using?

What version of Node.js are you using?

What browser are you using?

What operating system are you using?

How are you deploying your application?

Describe the Bug

Expected Behavior

To Reproduce

Replies: 11 comments · 17 replies

Replies: 11 comments 17 replies