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

bzhn commented 1 month ago

Steps to reproduce

Link to live example: (example on stackblitz)

Steps:

Update to MUI v.5.15.14 or 5.15.15
Use theme provider with custom theme

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',
},
},
});

Add Slider component to your page <Slider aria-label={"Number range"} min={0} max={1234} />
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 commented 1 month ago

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 commented 1 month ago

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 https://github.com/mui/material-ui/pull/41201#discussion_r1564609862.

jbouder commented 1 month ago

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 commented 3 weeks ago

@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[bot] commented 2 weeks ago

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 commented 1 week ago

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

mui / material-ui