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 ([email protected] and [email protected]) 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 [email protected] and [email protected]

[catosaurusrex2003]

i also having the exact same error. originally i was on [email protected] i upgraded to [email protected] 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