Hello,
i am currently setting up i18n on our Next.js App. I closely followed the instructions on https://next-intl.dev/docs/getting-started/app-router/with-i18n-routing.
Then I tried to add a locale switcher in our header as outlined here: https://next-intl.dev/docs/getting-started/app-router/with-i18n-routing
I followed this closely so everything is set up identically to the example implementation.
Now since we are using MUI I tried to change up the native select with the MUI Select Component. I managed to do this just fine and everything works. The LocaleSwitcherSelect Component now looks like this:
------------
"use client";

import * as React from "react";

import { useParams } from "next/navigation";
import { ReactNode, useTransition } from "react";
import { Locale, usePathname, useRouter } from "@/i18n/routing";

import { Select, SelectChangeEvent } from "@mui/material";

type Props = {
children: ReactNode;
defaultValue: string;
};

export default function LocaleSwitcherSelect({
children,
defaultValue,
}: Props) {
const router = useRouter();
const [isPending, startTransition] = useTransition();
const pathname = usePathname();
const params = useParams();

function onSelectChange(event: SelectChangeEvent) {
const nextLocale = event.target.value as Locale;
startTransition(() => {
router.replace(
{ pathname, params },
{ locale: nextLocale },
);
});
}

return (
<Select
size="small"
id="locale-switcher-select"
defaultValue={defaultValue}
disabled={isPending}
onChange={onSelectChange}
displayEmpty
>
{children}
</Select>
);
}
------------
Now, if I add any sx prop to the Select or use styled from pigment.css anywhere in the Component, the server breaks completely. I narrowed it down to the useRouter, once that is not in the component anymore, everything works again (apart from the functionality of the switcher of course)

The error is the following:

------------
⨯ unhandledRejection: Error: Cannot assign to read only property '__esModule' of object '[object Object]' inC:\dev\frontend\node_modules\next\dist\client\link.js
| C:\dev\frontend\node_modules\next\link.js
| C:\dev\frontend\node_modules\next-intl\dist\development\navigation\shared\LegacyBaseLink.js
| C:\dev\frontend\node_modules\next-intl\dist\development\navigation\react-client\ClientLink.js
| C:\dev\frontend\node_modules\next-intl\dist\development\navigation\react-client\createSharedPathnamesNavigation.js
| C:\dev\frontend\node_modules\next-intl\dist\development\navigation.react-client.js
| C:\dev\frontend\node_modules\next-intl\dist\navigation.react-client.js
| C:\dev\frontend\src\i18n\routing.ts
| C:\dev\frontend\src_components\navigation\header\locale-switcher\locale-switcher-select.tsx

at C:\dev\frontend\node_modules\ (wyw-in-js\transform\src\module.ts:330)
at <unknown> (C:\dev\frontend\src\i18n\routing.ts:8:19)
at <unknown> (C:\dev\frontend\src\i18n\routing.ts:20:3)
------------

I do not understand how these two things conflict with each other and cause this (to me) unhelpful error.
I am not sure if this issue is tied to mui, pigment.css or next-intl, thats why I am asking here.