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

[Ayush-v]

Description

Screen.Recording.2023-06-24.at.2.39.07.AM.mov

Issue Description

I am experimenting with Next.js 13 and have an application that handles both next-auth and next-intl logic on the client side. I followed the example given in the GitHub repository https://github.com/Ayush-v/Nextjs13-auth-intl.

However, I am encountering an issue whenever I navigate to the next page. I attempted to replicate some elements inside the CodeSandbox but faced other issues. I also tried using Link from "next/intl", but obtained the same result. I am not sure why this error is occurring.

I have tried removing the about dir but it is not working for some reason.

The version in which I am facing the issue is "^3.0.0-beta.5". Please note that I am aware this is a beta version, but I wanted to report this issue.

It Works when i navigate with localhost:3000/en/about but not with /about

The issue i have found is when i add the routes my middleware in public routes array it does not create a issue but when i dont it creates a issue where i have to use /en/about to make it work.

i have followed https://github.com/amannn/next-intl/tree/main/examples/example-next-13-next-auth

Mandatory reproduction URL (CodeSandbox or GitHub repository)

https://codesandbox.io/p/sandbox/next-intl-bug-template-app-forked-76n8sn?file=%2Fsrc%2Fapp%2F%5Blocale%5D%2Flayout.tsx%3A3%2C44

Reproduction description

Steps to reproduce:

1. Open reproduction
2. Navigate to about Page
3. the page is either blank or NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. this error
4. Change language and then navigate between pages
5. try to go to / page with editing the url bar in browser

Expected behaviour

I want intl and auth on every single page when the default language is set to en with url. ex "/" , "/about" , "/signin" and when the language is set to de ex "/de" , "/de/about" , "/de/signin"

[amannn]

Thank you for the bug report! I can unfortunately not run your reproduction due to missing env params. However from a quick look at your middleware, I think you're missing the onSuccess callback that is mentioned in the docs.

However, since you mention you only see the issue if your /about page is in the public routes, the auth middleware shouldn't run in this example.

Maybe you can further reduce the example to debug the issue? E.g. validate that the auth middleware doesn't run when you experience the issue, try to remove auth completely, remove more code from the components etc. This might help to find the root cause!

I'll move this to a discussion for the time being, as it seems to be a usage question and not an issue in next-intl per se. If you find the root cause to be in next-intl, please let me know though.

Hope this helps!

[Ayush-v]

Yes adding

function onSuccess(req) {
    return intlMiddleware(req);
  },

inside authMiddleware fixed it
Thank you so much for you time. I am sorry for silly questions i should have followed the docs.