javascript: Changing a localization in ClerkProvider causes an error "Failed to execute 'removeChild' on 'Node'"

• Review the documentation: https://clerk.com/docs
• Search for existing issues: https://github.com/clerkinc/javascript/issues
• Go through package changelog files.
• Provide the Frontend API key from your application dashboard.

Package + Version

• @clerk/clerk-js
• @clerk/clerk-react
• @clerk/nextjs
• @clerk/remix
• @clerk/types
• @clerk/themes
• @clerk/localizations
• @clerk/clerk-expo
• @clerk/backend
• @clerk/clerk-sdk-node
• @clerk/shared
• @clerk/fastify
• @clerk/chrome-extension
• gatsby-plugin-clerk
• build/tooling/chore
• other:

Dependencies + versions

Provide a json with the dependencies used in your project (copy paste from yarn.lock / package-lock.json) or a github project / template that reproduces the issue.

Include the @clerk/ packages and their versions!*

Example:

  "dependencies": {
    "@clerk/localizations": "^1.24.1",
    "@clerk/nextjs": "^4.23.2",
    "@types/node": "20.4.5",
    "@types/react": "18.2.18",
    "@types/react-dom": "18.2.7",
    "next": "^13.4.12",
    "next-intl": "3.0.0-beta.9",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "typescript": "5.1.6",
  },
  "devDependencies": {
    "@clerk/types": "^3.49.0",
  }

Description

I am using Clerk + next-intl + next.js app router to handle localizations. I have a language switcher which changes an URL from /en to /dk (using router.replace). This updates const locale = useLocale(); within the root layout, as seen in the code below.

import { ClerkProvider } from "@clerk/nextjs";
import { useLocale } from "next-intl";

import { daDK, enUS } from "@clerk/localizations";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const locale = useLocale();

  return (
    <ClerkProvider localization={locale === "dk" ? daDK : enUS}>
      {children}
    </ClerkProvider>
  );
}

Once the locale has changed and the new value is passed into ClerkProvider all the clerk elements disappear from the screen and throw an error

DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
    at https://xxxx-xxxx.clerk.accounts.dev