Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
bzhn opened this issue Apr 4, 2024 · 8 comments
Assignees
Labels
bug 🐛 Something doesn't work component: slider This is the name of the generic UI component, not the React module! package: material-ui Specific to @mui/material package: pigment-css Specific to @pigment-css/* regression A bug, but worse

Comments

@bzhn
Copy link

bzhn commented Apr 4, 2024

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',
    },
  },
});
  1. Add Slider component to your page <Slider aria-label={"Number range"} min={0} max={1234} />
  2. 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

image

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

@bzhn bzhn added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Apr 4, 2024
@zannager zannager added the component: slider This is the name of the generic UI component, not the React module! label Apr 5, 2024
@jbouder
Copy link

jbouder commented Apr 10, 2024

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
Copy link
Member

ZeeshanTamboli commented Apr 14, 2024

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).

@ZeeshanTamboli ZeeshanTamboli added bug 🐛 Something doesn't work priority: important This change can make a difference package: material-ui Specific to @mui/material regression A bug, but worse and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Apr 14, 2024
@jbouder
Copy link

jbouder commented Apr 14, 2024

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 ZeeshanTamboli added the package: pigment-css Specific to @pigment-css/* label Apr 17, 2024
@ZeeshanTamboli
Copy link
Member

@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.

@ZeeshanTamboli ZeeshanTamboli added status: waiting for author Issue with insufficient information and removed priority: important This change can make a difference labels Apr 21, 2024
Copy link

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
Copy link
Member

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

@oliviertassinari oliviertassinari removed the status: waiting for author Issue with insufficient information label May 4, 2024
@rusakovic
Copy link

What is the status of this issue?

@jbouder
Copy link

jbouder commented Jul 29, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: slider This is the name of the generic UI component, not the React module! package: material-ui Specific to @mui/material package: pigment-css Specific to @pigment-css/* regression A bug, but worse
Projects
None yet
Development

No branches or pull requests

10 participants