[material-ui][Rating] Error with "aria-label" attribute when using different languages

[ngoquoctoandev]

Steps to reproduce

<Rating readOnly value={4.96} precision={0.1} max={5} />

Current behavior

An error occurs when used with the Rating component. My application is multilingual. If I use English language there are no errors in the console. When I switch to Vietnamese language, the console displays an error message: the aria-label attribute does not match between server and client. On the Server it is set to the value "5 Stars" while on the Client it is set to "5 sao".

Expected behavior

No response

Context

No response

Your environment

No response

Search keywords: rating

[mj12albert]

@ngoquoctoandev Is this a Next.js app, and could you share a repro? You can fork this template: https://mui.com/r/issue-template-latest

Or this one if you are using Next.js: https://codesandbox.io/p/devbox/material-ui-next-js-app-router-mcve-z5jyhh

[ngoquoctoandev]

@mj12albert Thanks. You can refer to the following repo: If I leave the language as English (default), everything goes smoothly. But when I switch to Vietnamese language, the console displays an error as shown below:

[DiegoAndai]

Hey @ngoquoctoandev! Have you checked if your issue is similar to https://github.com/vercel/next.js/discussions/41319#discussioncomment-3850768?

[github-actions[bot]]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.