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

codewithahad01 · 2023-11-05T16:35:45Z

Link to the code that reproduces this issue

https://github.com/Abdulahadahmadi/codewithahad.git

To Reproduce

I have a web app in Nextjs in Navbar component when I go to other router and return to main route it show the above error that I attach in title.

Current vs. Expected behavior

I tried many ways in stackoverflow and github issue that people suggested but I couldn't find the solution for this problem.

Verify canary release

I verified that the issue exists in the latest Next.js canary release

Provide environment information

operating system: window 11
next.js v 14
node v 20

Which area(s) are affected? (Select all that apply)

Routing (next/router, next/navigation, next/link)

Additional context

I host this app in vercel

IlirEdis · 2023-11-06T11:48:49Z

Im having the same issue when trying to redirect to notFound(), like this:

codewithahad01 · 2023-11-06T19:55:03Z

@IlirEdis could you please tell me the above code is the root page inside app dir or no ?

IlirEdis · 2023-11-06T20:14:34Z

@Abdulahadahmadi no, its a dynamic page.
I'm thinking this probably happens because i'm using internationalization but im not able to debug for now.

luisjuniorj · 2023-11-09T13:52:41Z

This does the same:

codewithahad01 · 2023-11-10T09:40:41Z

@IlirEdis that's fine if its a dynamic page. for your dynamic page do you have a layout.tsx file ?

samcx · 2023-12-23T01:12:14Z

@codewithahad01 Thank you for sharing!

Is it possible to clarify how exactly we can replicate this? I was not able to replicate it with the latest stable v14.0.4.

zerosoul · 2024-01-14T07:20:59Z

@Abdulahadahmadi no, its a dynamic page. I'm thinking this probably happens because i'm using internationalization but im not able to debug for now.

Yes, after adding multilingual support to Next.js, I also encountered this issue and couldn't figure out the cause.

yousifalraheem · 2024-01-15T12:19:50Z

The same is happening with me. I think the error thrown is somehow captured NextIntlClientProvider instead of falling back to NextJS ErrorBoundary. I tried importing the ErrorBoundary and wrapping the content inside the NextIntlClientProvider which prevented the crash on the client, but it didn't show the 404 page. Instead it was telling me that nextjs encountered an error and I should check the browser console for more details.

alaahammam · 2024-01-30T14:56:53Z

Adding a layout.tsx file to the Dynamic Routing, e.g. [Slug] solved that Problem for me (Next.js 14.0.1)

DrunkOldDog · 2024-01-31T21:00:33Z

Same issue here with internationalization. We are using next 13.5.6 with next-intl.

Edit
For anyone struggling with this when using internationalization, I was able to fix it with this solution from another tread. Just add a not-found.tsx file in the root of [locale] dir.

And if you want to use the same next 404 interface you can add the following:

[locale]/not-found.tsx

'use client';

import Error from 'next/error';

export default function NotFound() {
  return <Error statusCode={404} />;
}

devDoubleH · 2024-03-27T04:49:19Z

Just putting it here that I found helpful: docs

woodwoerk · 2024-04-18T11:19:58Z

I'm seeing the same error in production (next-intl@3.3.2 and next@14.0.4) but it happens spontaneously upon navigation and can't be reproduced consistently. I already have a [locale]/not-found.tsx file, so that doesn't help unfortunately.

Error displayed in the browser:

Application error: a client-side exception has occurred (see the browser console for more information).

Error logged in the console:

DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
    at aq (<URL>/_next/static/chunks/<CHUNK>.js:1:75973)
    ...
    at MessagePort.x (<URL>/_next/static/chunks/<CHUNK>.js:6:26820)

SachinthaI · 2024-04-30T04:27:41Z

Anyone found a solution? I'm having the same issue with next@14.2.3 and next-intl@3.12.0

catosaurusrex2003 · 2024-04-30T17:31:23Z

i also having the exact same error.
originally i was on next@14.0.2
i upgraded to next@14.2.3
and same issue.

i referred
facebook/react#13278
https://stackoverflow.com/questions/12238396/how-to-disable-google-translate-from-html-in-chrome

and this
facebook/react#24865 (comment)

none of this worked for me.

sarkarovmurad · 2024-04-30T19:35:04Z

Guys, I found solution.

If yout want to use option localePrefix = 'as-needed' in file middleware.ts and in page, for example, /es/about/ everything is ok, but in page /about/ aplication is crushing, you should check option matcher in your middleware.ts file.
I had this error when my config looked like that:

export const config = {
  matcher: ['/', '/(es|de|fr|ja|hi|it|pl|pt|nl|ru|tr|zh|ko|vi)/:path*'],
};

I changed to

export const config = {
  matcher: ['/((?!api|_next|.*\\..*).*)'],
};

and now everything is ok.

p.s.:
If you're interested, I found this when I added the files to app directory (not in [locale]):

not-found.tsx:

'use client';

import Error from 'next/error';
import React from 'react';

export default () => (
  <html lang="en">
    <body>
      <Error statusCode={404} />
    </body>
  </html>
);

layout.tsx :

import {PropsWithChildren} from 'react';

export default ({children}: PropsWithChildren) => children;

After that, I saw that I had a 404 error page on the "/about" page. This is a lot better than when the application crashed.

https://next-intl-docs.vercel.app/docs/routing/middleware#locale-prefix-as-needed
Here in documentation written:
1. If you use this strategy, you should make sure that your matcher detects unprefixed pathnames.

duonghungkiet · 2024-05-07T01:38:35Z

Guys, I found solution.

If yout want to use option localePrefix = 'as-needed' in file middleware.ts and in page, for example, /es/about/ everything is ok, but in page /about/ aplication is crushing, you should check option matcher in your middleware.ts file. I had this error when my config looked like that:
export const config = {
  matcher: ['/', '/(es|de|fr|ja|hi|it|pl|pt|nl|ru|tr|zh|ko|vi)/:path*'],
};
I changed to
export const config = {
  matcher: ['/((?!api|_next|.*\\..*).*)'],
};
and now everything is ok.

p.s.: If you're interested, I found this when I added the files to app directory (not in [locale]):

not-found.tsx:
'use client';

import Error from 'next/error';
import React from 'react';

export default () => (
  <html lang="en">
    <body>
      <Error statusCode={404} />
    </body>
  </html>
);
layout.tsx :
import {PropsWithChildren} from 'react';

export default ({children}: PropsWithChildren) => children;
After that, I saw that I had a 404 error page on the "/about" page. This is a lot better than when the application crashed.

https://next-intl-docs.vercel.app/docs/routing/middleware#locale-prefix-as-needed Here in documentation written: 1. If you use this strategy, you should make sure that your matcher detects unprefixed pathnames.

Thanks a lot, it's work for me

ryanfavour4 · 2024-05-29T22:42:27Z

I tried to move from my landing page to my auth/login page. then tried to move back to my landing page from my login page but I am getting this error

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

Call Stack
React

And yes I am using Link tag <Link href={"/"}>Login</Link>

arekspiewak1991 · 2024-06-09T13:06:49Z

I tried to move from my landing page to my auth/login page. then tried to move back to my landing page from my login page but I am getting this error
Unhandled Runtime Error
NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

Call Stack
React
And yes I am using Link tag <Link href={"/"}>Login</Link>

I had same problem when I have started using next-i18n navigation, and I mixed from where I do "import { Link }"
so I stared having such issue when Link was imported fromo "next", then I realized I should import from my "navigation.ts", so like: import { Link } from @/src/navigation

Ahmad-Hanki · 2024-06-23T11:09:27Z

guys, I have the exacts same issue. im useing localePrefix = 'as-needed'.
you dont need to add custon notfoud or navigationts. all you need is to add this matcher

matcher: ["/((?!api|_next|.\..).*)"],
in the middleware.ts

abolfazlNik · 2024-06-30T13:04:02Z

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.

foadtkf · 2024-07-06T11:10:50Z

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.

Man.. this helped me a lot and this is the legit solution I guess..

DaneSharafinski · 2024-08-13T01:31:39Z

FYI my issue was I was missing a layout.tsx at the root /app/ folder. I am using internationalization, so I have app/[locale]/ directory structure. My root layout was sitting at /app/[locale]/layout.tsx, but since moving it to /app/layout.tsx my notFound() invocations do render the 404 Not Found page successfully.

philwolstenholme · 2024-08-15T21:23:23Z

Whenever I've had this error it's been because I've forgotten to add a default.tsx file to a parallel route slot, e.g. src/app/@modal/default.tsx.

The file's contents can be as simple as this, it just needs to exist:

export default function Default() {
  return null;
}

yashavanth-acharya · 2024-09-15T14:50:44Z

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.

thanks a lot @abolfazlNik

dhruvin-rv · 2024-09-19T07:09:40Z

I was getting this same error, but I realised that I am using next-intl for my entire web app, and I have placed not-found.tsx in app/not-found.tsx, but instead, it should be inside app/[locale]/not-found.tsx and the issue is resolved by doing that.

Eliot00 · 2024-09-20T12:55:05Z

I wrote a comment component with twikoo, if Script not inside a div, every time leave a page with this component will get error NotFoundError: Failed to execute 'removeChild' on 'Node':

'use client'

import Script from 'next/script'

export default function Comment() {

  // replace <div> with <> will get error
  return (
    <div>
      <div id="tcomment"></div>
      <Script
        src="https://cdn.jsdelivr.net/npm/twikoo@1.6.39/dist/twikoo.min.js"
        onLoad={() => {
          window.twikoo.init({
            envId: '',
            el: '#tcomment',
            lang: 'zh-CN',
          })
        }}
      />
    </div>
  )
}

Edited: But if a div is added, onLoad will not be executed when entering the page for the first time, must refresh.

Eliot00 · 2024-09-20T13:04:51Z

I wrote a comment component with twikoo, if Script not inside a div, every time leave a page with this component will get error NotFoundError: Failed to execute 'removeChild' on 'Node':

'use client'

import Script from 'next/script'

export default function Comment() {

  // replace <div> with <> will get error
  return (
    <div>
      <div id="tcomment"></div>
      <Script
        src="https://cdn.jsdelivr.net/npm/twikoo@1.6.39/dist/twikoo.min.js"
        onLoad={() => {
          window.twikoo.init({
            envId: '',
            el: '#tcomment',
            lang: 'zh-CN',
          })
        }}
      />
    </div>
  )
}

Edited: But if a div is added, onLoad will not be executed when entering the page for the first time, must refresh.

Workaround:

'use client'

import Script from 'next/script'

export default function Comment() {
  return (
    <div>
      <div id="tcomment"></div>
      <Script
        src="https://cdn.jsdelivr.net/npm/twikoo@1.6.39/dist/twikoo.min.js"
        onReady={() => {
            console.log("excuted")
          window.twikoo.init({
          })
        }}
      />
    </div>
  )
}

Emmanuel-FSE · 2024-09-20T15:54:12Z

'use client';
import DrepProfileCard from '@/components/atoms/DrepProfileCard';
import DrepTimeline from '@/components/molecules/DrepTimeline';
import { useGetSingleDRepQuery } from '@/hooks/useGetSingleDRepQuery';
import { notFound, useParams } from 'next/navigation';
import DrepClaimProfileCard from '@/components/atoms/DrepClaimProfileCard';

const page = () => {
  const { drepid } = useParams();
  const { dRep, isDRepLoading } = useGetSingleDRepQuery(drepid);

  if (!isDRepLoading && !dRep) {
    notFound();
  }

  return (
      <div className="flex flex-col lg:flex-row">
        <div className="lg:sticky lg:top-10 lg:w-[30%] lg:self-start lg:!scroll-smooth">
          {dRep?.drep_id ? (
            <DrepProfileCard drep={dRep} state={isDRepLoading} />
          ) : (
            <DrepClaimProfileCard drep={dRep} state={isDRepLoading} />
          )}
        </div>
        <div className="lg:w-[70%]">
            <DrepTimeline drep={dRep} />
        </div>
      </div>
  );
};

export default page;

I am also running into the same error when trying to use notFound().
Any tips?
Thanks.

codewithahad01 added the bug Issue was opened via the bug report template. label Nov 5, 2023

github-actions bot added the Navigation Related to Next.js linking (e.g., <Link>) and navigation. label Nov 5, 2023

This comment has been minimized.

Sign in to view

Phillweston mentioned this issue May 28, 2024

参阅文档时，提示Application error: a client-side exception has occurred (see the browser console for more information). tangly1024/NotionNext#2234

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

codewithahad01 commented Nov 5, 2023

IlirEdis commented Nov 6, 2023

codewithahad01 commented Nov 6, 2023 •

edited

Loading

IlirEdis commented Nov 6, 2023

luisjuniorj commented Nov 9, 2023

codewithahad01 commented Nov 10, 2023

samcx commented Dec 23, 2023 •

edited

Loading

zerosoul commented Jan 14, 2024

yousifalraheem commented Jan 15, 2024

alaahammam commented Jan 30, 2024

DrunkOldDog commented Jan 31, 2024 •

edited

Loading

This comment has been minimized.

devDoubleH commented Mar 27, 2024

woodwoerk commented Apr 18, 2024

SachinthaI commented Apr 30, 2024

catosaurusrex2003 commented Apr 30, 2024

sarkarovmurad commented Apr 30, 2024 •

edited

Loading

duonghungkiet commented May 7, 2024

ryanfavour4 commented May 29, 2024

arekspiewak1991 commented Jun 9, 2024

Ahmad-Hanki commented Jun 23, 2024

abolfazlNik commented Jun 30, 2024

foadtkf commented Jul 6, 2024

DaneSharafinski commented Aug 13, 2024

philwolstenholme commented Aug 15, 2024 •

edited

Loading

yashavanth-acharya commented Sep 15, 2024

dhruvin-rv commented Sep 19, 2024

Eliot00 commented Sep 20, 2024 •

edited

Loading

Eliot00 commented Sep 20, 2024

Emmanuel-FSE commented Sep 20, 2024

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

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

Comments

codewithahad01 commented Nov 5, 2023

Link to the code that reproduces this issue

To Reproduce

Current vs. Expected behavior

Verify canary release

Provide environment information

Which area(s) are affected? (Select all that apply)

Additional context

IlirEdis commented Nov 6, 2023

codewithahad01 commented Nov 6, 2023 • edited Loading

IlirEdis commented Nov 6, 2023

luisjuniorj commented Nov 9, 2023

codewithahad01 commented Nov 10, 2023

samcx commented Dec 23, 2023 • edited Loading

zerosoul commented Jan 14, 2024

yousifalraheem commented Jan 15, 2024

alaahammam commented Jan 30, 2024

DrunkOldDog commented Jan 31, 2024 • edited Loading

This comment has been minimized.

devDoubleH commented Mar 27, 2024

woodwoerk commented Apr 18, 2024

SachinthaI commented Apr 30, 2024

catosaurusrex2003 commented Apr 30, 2024

sarkarovmurad commented Apr 30, 2024 • edited Loading

duonghungkiet commented May 7, 2024

ryanfavour4 commented May 29, 2024

arekspiewak1991 commented Jun 9, 2024

Ahmad-Hanki commented Jun 23, 2024

abolfazlNik commented Jun 30, 2024

foadtkf commented Jul 6, 2024

DaneSharafinski commented Aug 13, 2024

philwolstenholme commented Aug 15, 2024 • edited Loading

yashavanth-acharya commented Sep 15, 2024

dhruvin-rv commented Sep 19, 2024

Eliot00 commented Sep 20, 2024 • edited Loading

Eliot00 commented Sep 20, 2024

Emmanuel-FSE commented Sep 20, 2024

codewithahad01 commented Nov 6, 2023 •

edited

Loading

samcx commented Dec 23, 2023 •

edited

Loading

DrunkOldDog commented Jan 31, 2024 •

edited

Loading

sarkarovmurad commented Apr 30, 2024 •

edited

Loading

philwolstenholme commented Aug 15, 2024 •

edited

Loading

Eliot00 commented Sep 20, 2024 •

edited

Loading