material-ui: Building @mui/base breaks due to deprecated csstype.Property.ColorAdjust

Duplicates

I have searched the existing issues

Latest version

I have tested the latest version

Current behavior 😯

When running ttsc -b I am seeing the following errors:

node_modules/@mui/base/SliderUnstyled/useSlider.d.ts:146:54 - error TS2694: Namespace '"/Users/william.pengc3.ai/Projects/c3vsce/c3vsce/extension/node_modules/csstype/index".Property' has no exported member 'ColorAdjust'.

146             colorAdjust?: import("csstype").Property.ColorAdjust | undefined;
                                                         ~~~~~~~~~~~

node_modules/@mui/base/SliderUnstyled/useSlider.d.ts:651:65 - error TS2694: Namespace '"/Users/william.pengc3.ai/Projects/c3vsce/c3vsce/extension/node_modules/csstype/index".Property' has no exported member 'ColorAdjust'.

651             WebkitPrintColorAdjust?: import("csstype").Property.ColorAdjust | undefined;
                                                                    ~~~~~~~~~~~

Found 2 errors.

Looking into csstype I see that they released a new version today from MDN data, which does not have the color-adjust property anymore.

MDN docs also suggest that color-adjust is gone, as the page redirects instead to print-color-adjust.

The solution is probably to update import("csstype").Property.ColorAdjust to import("csstype").Property.PrintColorAdjust, but in any case, this is breaking our builds.

Expected behavior 🤔

No errors should be outputted

Steps to reproduce 🕹

Steps:

Include @mui/base in dependencies
Run ttsc -b

Context 🔦

We are trying to build our project with ttsc -b which has an indirect dependency on @mui/base

Your environment 🌎

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 15
Comments: 24 (1 by maintainers)

Most upvoted comments

found a workaround and added

"resolutions": {
    "csstype": "3.0.10"
  }

to the package.json, now it builds again

+15

Anubiso on Mar 4, 2022

Yup, after upgrading @mui/material and @mui/icons-material to ^5.5.0 the issues were resolved. Closing this issue as the upgraded versions have resolved this.

+10

c3-william-peng on Mar 8, 2022

@victor-grajski Seems like @mui/x-data-grid hasn’t updated their libraries, probably should open an issue with them here: https://github.com/mui/mui-x

c3-william-peng on Mar 8, 2022

Facing this issue on Vite Build too when running npm run build that executes tsc && vite build.

Interestingly I cannot reproduce the same when using yarn as yarn build works just fine.

pulkitvyas08 on Mar 4, 2022

found a workaround and added
"resolutions": {
    "csstype": "3.0.10"
  }
to the package.json, now it builds again

added

"resolutions": {
    "csstype": "3.0.11"
 }

to the package.json and remove yarn.lock and yarn install, the problem was resolved.

kohaiy on Mar 8, 2022

I think I’m seeing those as well

node_modules/@mui/material/node_modules/@mui/base/SliderUnstyled/useSlider.d.ts:72:60 - error TS2694: Namespace '"node_modules/@types/react/node_modules/csstype/index".Property' has no exported member 'AnimationTimeline'.

72             animationTimeline?: import("csstype").Property.AnimationTimeline | undefined;
                                                              ~~~~~~~~~~~~~~~~~

node_modules/@mui/material/node_modules/@mui/base/SliderUnstyled/useSlider.d.ts:147:54 - error TS2694: Namespace '"node_modules/@types/react/node_modules/csstype/index".Property' has no exported member 'PrintColorAdjust'.

147             colorAdjust?: import("csstype").Property.PrintColorAdjust | undefined;
                                                         ~~~~~~~~~~~~~~~~

node_modules/@mui/material/node_modules/@mui/base/SliderUnstyled/useSlider.d.ts:205:61 - error TS2694: Namespace '"node_modules/@types/react/node_modules/csstype/index".Property' has no exported member 'HyphenateCharacter'.

205             hyphenateCharacter?: import("csstype").Property.HyphenateCharacter | undefined;
                                                                ~~~~~~~~~~~~~~~~~~

node_modules/@mui/material/node_modules/@mui/base/SliderUnstyled/useSlider.d.ts:212:56 - error TS2694: Namespace '"node_modules/@types/react/node_modules/csstype/index".Property' has no exported member 'InputSecurity'.

212             inputSecurity?: import("csstype").Property.InputSecurity | undefined;
                                                           ~~~~~~~~~~~~~

node_modules/@mui/material/node_modules/@mui/base/SliderUnstyled/useSlider.d.ts:317:59 - error TS2694: Namespace '"node_modules/@types/react/node_modules/csstype/index".Property' has no exported member 'PrintColorAdjust'.

317             printColorAdjust?: import("csstype").Property.PrintColorAdjust | undefined;
                                                              ~~~~~~~~~~~~~~~~

node_modules/@mui/material/node_modules/@mui/base/SliderUnstyled/useSlider.d.ts:625:67 - error TS2694: Namespace '"node_modules/@types/react/node_modules/csstype/index".Property' has no exported member 'HyphenateCharacter'.

625             WebkitHyphenateCharacter?: import("csstype").Property.HyphenateCharacter | undefined;
                                                                      ~~~~~~~~~~~~~~~~~~

node_modules/@mui/material/node_modules/@mui/base/SliderUnstyled/useSlider.d.ts:657:65 - error TS2694: Namespace '"node_modules/@types/react/node_modules/csstype/index".Property' has no exported member 'PrintColorAdjust'.

657             WebkitPrintColorAdjust?: import("csstype").Property.PrintColorAdjust | undefined;

MUI versions:

        "@emotion/react": "^11.8.1",
        "@emotion/serialize": "^1.0.2",
        "@emotion/styled": "^11.8.1",
        "@mui/icons-material": "^5.4.1",
        "@mui/lab": "^5.0.0-alpha.68",
        "@mui/material": "^5.5.0",
        "@mui/system": "^5.4.4",
        "@mui/x-data-grid": "^5.6.0",
        "@mui/x-data-grid-generator": "^5.5.1",
        "@mui/x-data-grid-pro": "^5.5.1",

victor-grajski on Mar 7, 2022

found a workaround and added
"resolutions": {
    "csstype": "3.0.10"
  }
to the package.json, now it builds again

This works for me with @mui/base, but I’m still seeing this issue with @mui/x-data-grid. Anyone else experiencing that?

ERR! ERROR in /home/runner/work/node_modules/@mui/x-data-grid/hooks/features/virtualization/useGridVirtualScroller.d.ts(625,65):

ERR! TS2694: Namespace '"/home/runner/work/node_modules/csstype/index".Property' has no exported member 'ColorAdjust'.

victor-grajski on Mar 7, 2022

Those using npm instead of yarn may want to try this instead:

  "overrides": {
    "csstype": "3.0.10"
  }

Unfortunately for me, this breaks other dependencies.

dezoito on Mar 5, 2022