[material-ui][Slider] TypeError: color.charAt is not a function error message after upgrade @mui/material to 5.15.14

[bzhn]

Steps to reproduce

Link to live example: (example on stackblitz)

Steps:

1. Update to MUI v.5.15.14 or 5.15.15
2. Use theme provider with custom theme
3. Setup palette in custom theme with nested fields like custom.main.blue.dark in the example below

export const theme = createTheme({
  palette: {
    primary: {
      main: '#FFCC00',
      dark: '#FFCC00',
    },
    secondary: {
      main: '#FFCC00',
      dark: '#FFCC00',
    },
    custom: {
      // Error when nesting custom colors
      main: {
        blue: {
          dark: '#FFCC00',
        },
      },
      // The following doesn't lead to error
      // main: '#ffcc00',
    },
  },
});

4. Add Slider component to your page <Slider aria-label={"Number range"} min={0} max={1234} />
5. Load the page in your browser

Current behavior

I get the following error when trying to use Slider within the ThemeProvider with custom theme

import { Slider } from "@mui/material";

... some code
<Slider aria-label={"Number range"} min={0} max={1234} />
... some code

gives me the following error message in the console

 ⨯ node_modules\@mui\system\colorManipulator.js (78:0) @ decomposeColor
 ⨯ TypeError: color.charAt is not a function
    at Array.map (<anonymous>)

or on StackBlitz

Error in /turbo_modules/@mui/[email protected]/colorManipulator.js (78:13)
color.charAt is not a function

and the following in my browser

Unhandled Runtime Error

TypeError: color.charAt is not a function

Expected behavior

No errors occurs when using palette with nested fields in my custom theme.

Context

No response

Your environment

npx @mui/envinfo

  System:
    OS: Windows 11 10.0.22631
  Binaries:
    Node: 21.6.1 - ~\.nvm\versions\node\v21.6.1\bin\node.EXE
    npm: 10.2.4 - ~\.nvm\versions\node\v21.6.1\bin\npm.CMD
    pnpm: Not Found
  Browsers:
    Chrome: Not Found
    Edge: Chromium (123.0.2420.65)
  npmPackages:
    @emotion/react: ^11.11.3 => 11.11.4
    @emotion/styled: ^11.11.0 => 11.11.5
    @mui/base: ^5.0.0-beta.31 => 5.0.0-beta.40
    @mui/core-downloads-tracker:  5.15.15
    @mui/icons-material: ^5.15.13 => 5.15.15
    @mui/material: ^5.15.15 => 5.15.15
    @mui/material-nextjs: ^5.15.11 => 5.15.11
    @mui/private-theming:  5.15.14
    @mui/styled-engine:  5.15.14
    @mui/system: ^5.15.13 => 5.15.15
    @mui/types: ^7.2.13 => 7.2.14
    @mui/utils:  5.15.14
    @mui/x-date-pickers: ^6.19.7 => 6.19.8
    @types/react: ^18.2.66 => 18.2.74
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0
    styled-components: ^6.1.8 => 6.1.8
    typescript: ^5.4.2 => 5.4.3

I use Firefox and Chrome browsers.

Search keywords: color.charAt, Slider, colorManipulator, theme, palette, ThemeProvider

[jbouder]

Not sure if this is related, but I was getting a similar error when trying to add a Switch, while also having the @mui/x-data-grid installed in the project. The only resolution I found was to remove the mui-x package and use the base table.

I see you have another mui-x package. Maybe it’s related?

[ZeeshanTamboli]

I see you have another mui-x package. Maybe it’s related?

@jbouder I doubt it.

---

This problem emerged as a regression in version 5.15.14 due to #41201. Further details can be found at #41201 (comment).

[jbouder]

I see you have another mui-x package. Maybe it’s related?

@jbouder I doubt it.

This problem emerged as a regression in version 5.15.14 due to #41201. Further details can be found at #41201 (comment).

Yeah, after digging deeper, the regression seemed to be the real underlying cause. Thanks for the follow up!

[ZeeshanTamboli]

@bzhn I'm not sure why you need such deeply nested palette color fields like theme.palette.custom.main.blue.dark if there aren't multiple properties in the custom and main keys. We also don't document this in our official documentation: https://mui.com/material-ui/customization/palette/. Even though it used to work before v5.15.14, it doesn't make sense to me. Wouldn't it be simpler to define it two levels up? For example, for dark blue, it could be theme.palette.blue.dark and for light blue: theme.palette.blue.light:

export const theme = createTheme({
  palette: {
    primary: {
      main: '#FFCC00',
      dark: '#FFCC00',
    },
    secondary: {
      main: '#FFCC00',
      dark: '#FFCC00',
    },
    blue: {
      main: '#4287f5',
      dark: '#022e73',
      light: '#94bbf7',
    },
  },
});

This is consistent with our documentation: https://mui.com/material-ui/customization/palette/#custom-colors.

[github-actions]

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.

[oliviertassinari]

Reopening as it's a clear regression: https://stackblitz.com/edit/react-ceuj3r-5w3j9r?file=theme.ts breaks.

[rusakovic]

What is the status of this issue?

[jbouder]

Yes a status update would be good. I haven’t been able to update for a while now because of this issue.

[siriwatknp]

@DiegoAndai This is related to another issue (I could not find it) that we used to discuss. To create a util that handle the theme.palette iteration for all components.

If you still have some capacity, I'd like a help here but it can be done after v6 stable too.

[DiegoAndai]

@siriwatknp, is this the issue you're referencing? #42698 (comment)

Sorry I missed this before. I can take a look at it this week.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

We value your feedback @bzhn! How was your experience with our support team?
If you could spare a moment, we'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!