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

[codewithahad01]

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

• [X] 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]

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

[codewithahad01]

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

[IlirEdis]

@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]

This does the same:

[codewithahad01]

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

[samcx]

@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]

@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]

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]

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

[DrunkOldDog]

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} />;
}

[uraden]

having the same issue

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

[devDoubleH]

Just putting it here that I found helpful: docs

[woodwoerk]

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]

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

[catosaurusrex2003]

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 https://github.com/facebook/react/issues/13278 https://stackoverflow.com/questions/12238396/how-to-disable-google-translate-from-html-in-chrome

and this https://github.com/facebook/react/issues/24865#issuecomment-2078026197

none of this worked for me.

[sarkarovmurad]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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-musau]

'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.