[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/system@5.15.15/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!