Conflict Between next-intl createNavigation and pigment-css Styling with MUI

[Adralonter]

Description

I am implementing internationalization in a Next.js app using next-intl. Following the official i18n routing guide, I created a locale switcher in the header. While adapting the locale switcher to use MUI's Select component, I encountered a critical issue when applying styles via the sx prop or styled from pigment-css.

If I include any of the hooks from createNavigation in the component and apply any sx styling or use styled, the server crashes with the following error:

 ⨯ unhandledRejection:  Error: Cannot assign to read only property '__esModule' of object '[object Object]' in/project/workspace/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/client/link.js
| /project/workspace/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/link.js
| /project/workspace/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next-intl/dist/development/navigation/shared/BaseLink.js
| /project/workspace/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next-intl/dist/development/navigation/shared/LegacyBaseLink.js
| /project/workspace/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next-intl/dist/development/navigation/react-client/ClientLink.js
| /project/workspace/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next-intl/dist/development/navigation/react-client/createSharedPathnamesNavigation.js
| /project/workspace/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next-intl/dist/development/navigation.react-client.js
| /project/workspace/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next-intl/dist/navigation.react-client.js
| /project/workspace/i18n/routing.ts
| /project/workspace/components/LocaleSwitcherSelect.tsx

    at <unknown> (i18n/routing.ts:8:19)
    at <unknown> (i18n/routing.ts:19:3)

Steps to Reproduce

1. Set up a Next.js project with MUI and pigment-css.
2. Set up i18n routing using next-intl as per the documentation.
3. Implement a locale switcher like in the official next-intl example.
4. Adjust the Component to use MUI's Select component.
5. Apply an sx prop or use styled from pigment.css in the component.

Current Behavior

The server crashes with the above error when using any of the hooks from createNavigation and and styling (sx or styled) coexist in the component.

Expected Behavior

The hooks and styling should work together without causing a server crash.

Code Example

I reproduced the issue on a Codesandbox example.
Just comment in one of the sx props marked in the LocaleSwitcherSelect component.

Environment
Next.js: 15.1.4
React: 19.0.0
next-intl: 3.26.3
MUI 6.3.1
pigment.css: 0.0.29

Notes

The issue seems tied to the interplay between createNavigation and styling, possibly related to how next-intl manages routing. The error trace doesn't provide a clear path to resolution.
I am aware this bug does not lead directly to pigment-css, but the way it emerges and the fact that the library is still in alpha leads me to posting the problem here first.

Any help is greatly appreciated.

[brijeshb42]

Here's a working sandbox - https://codesandbox.io/p/devbox/next-intl-mui-pigment-forked-kqtj5r?file=%2Fnext.config.ts%3A23%2C1&workspaceId=ws_C4BUJc3fF76ZmBE2drMFEw

Note the asyncResolve in pigmentConfig and a new file called next-intl-mock.js.

Since Pigment cannot possibly handle all the different libraries (during its css evaluation phase), you can pass asyncResolve with customizations for a particular library that is not working with it.
In this case, it basically tells Pigment that whenever it encounters an import starting with next-intl, it should instead use the next-intl-mock.js file's exports. This is mainly valid if you are importing something from a library and calling it at the root level of the file. If the imported item is being called inside a component, then it can be skipped from the mock.

[Adralonter]

@brijeshb42 Thanks for the quick help! I implemented the fix in our actual project and it seems to work just fine. It might have just been due to a lack of knowledge about Next.js / pigment-css on my side, but it might worth considering to have tiny sections about how to handle conflicts with different libraries during the css evaluation phase in the docs, since the actual error was pretty vague to me and I would have not been able to fix it without your help.