Building @mui/base breaks due to deprecated csstype.Property.ColorAdjust #31296

c3-william-peng · 2022-03-03T22:46:16Z

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.

The text was updated successfully, but these errors were encountered:

pulkitvyas08 · 2022-03-04T12:29:26Z

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.

wizzymotion · 2022-03-04T13:03:21Z

Facing same issue on VITE BUILD here...

nhayfield · 2022-03-04T13:44:10Z

same here

pulkitvyas08 · 2022-03-04T13:46:51Z

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.

UPDATE: yarn build works on my local windows system but when deploying it gives the above mentioned error

Anubiso · 2022-03-04T15:03:55Z

Any workarounds known?

nhayfield · 2022-03-04T15:14:57Z

Any workarounds known?

not sure. i can say that the previous version also has it 5.4.3

Anubiso · 2022-03-04T15:19:52Z

found a workaround and added

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

to the package.json, now it builds again

nhayfield · 2022-03-04T15:28:03Z

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

Confirmed, good looking out.

salarhfz-fs · 2022-03-05T11:39:17Z

Same here.

@mui/base/SliderUnstyled/useSlider.d.ts:146:54
error TS2694:
Namespace 'project_dir/node_modules/csstype/index".Property' has no exported member 'ColorAdjust'.

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

Environment:
OS: macOS
Package manager: npm@8.3.1
Runtime: Node@16.14.0
Package versions:

"@mui/lab": "^5.0.0-alpha.70",
"@mui/material": "^5.4.3",
"@mui/styled-engine-sc": "^5.4.2",
"@mui/styles": "^5.4.2",

dezoito · 2022-03-05T18:21:05Z

Same thing here, with different dockerized versisn of node:

node:14.15-alpine3.10
node:17.5-alpine3.14 + npm@8.4.1

Packages:

    "@mui/icons-material": "^5.0.0",
    "@mui/lab": "^5.0.0-alpha.47",
    "@mui/material": "^5.0.0",
    "@mui/styles": "^5.0.0",

Using vite, I'm getting the following Typescript errors:

[TypeScript] Namespace '"/app/node_modules/csstype/index".Property' has no exported member 'ColorAdjust'.

[/app/node_modules/@mui/base/SliderUnstyled/useSlider.d.ts:146:54]()

    144 |             clipPath?: import("csstype").Property.ClipPath | undefined;
    145 |             color?: import("csstype").Property.Color | undefined;
  > 146 |             colorAdjust?: import("csstype").Property.ColorAdjust | undefined;
        |                                                      ^^^^^^^^^^^
    147 |             colorScheme?: import("csstype").Property.ColorScheme | undefined;
    148 |             columnCount?: import("csstype").Property.ColumnCount | undefined;
    149 |             columnFill?: import("csstype").Property.ColumnFill | undefined;

[TypeScript] Namespace '"/app/node_modules/csstype/index".Property' has no exported member 'ColorAdjust'.

[/app/node_modules/@mui/base/SliderUnstyled/useSlider.d.ts:651:65]()

    649 |             WebkitPerspective?: import("csstype").Property.Perspective<string | number> | undefined;
    650 |             WebkitPerspectiveOrigin?: import("csstype").Property.PerspectiveOrigin<string | number> | undefined;
  > 651 |             WebkitPrintColorAdjust?: import("csstype").Property.ColorAdjust | undefined;
        |                                                                 ^^^^^^^^^^^
    652 |             WebkitRubyPosition?: import("csstype").Property.RubyPosition | undefined;
    653 |             WebkitScrollSnapType?: import("csstype").Property.ScrollSnapType | undefined;
    654 |             WebkitShapeMargin?: import("csstype").Property.ShapeMargin<string | number> | undefined;

Adding @Anubiso workaround didn't solve the issue, at least not in development.

dezoito · 2022-03-05T18:57:21Z

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

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

Unfortunately for me, this breaks other dependencies.

victor-grajski · 2022-03-07T18:35:57Z

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

nhayfield · 2022-03-07T18:37:45Z

ata-grid. Anyone else experiencing that?

ugh i need that repo for the other repo i need to migrate

caesaneer · 2022-03-07T19:10:32Z

Same issue here with Vite. I tried the resolutions above, but that made things worse and added 7 more has no exported member errors.

victor-grajski · 2022-03-07T19:30:29Z

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",

salarhfz-fs · 2022-03-08T06:05:42Z

I just used skipLibCheck in the TS compiler settings (tsconfig.json) for now. BTW we're waiting for a real patch.

Jonri2 · 2022-03-08T07:34:26Z

After updating my packages to the latest versions, the problem was resolved.

kohaiy · 2022-03-08T07:38:34Z

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.

c3-william-peng · 2022-03-08T07:41:05Z

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.

victor-grajski · 2022-03-08T17:45:09Z

I'm still having this issue with @mui/x-data-grid, although skipping lib check is a stopgap solution. Shall I open a separate issue?

node_modules/@mui/x-data-grid/hooks/features/virtualization/useGridVirtualScroller.d.ts:117:54 - error TS2694: Namespace '"node_modules/@mui/material/node_modules/csstype/index".Property' has no exported member 'ColorAdjust'.

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

node_modules/@mui/x-data-grid/hooks/features/virtualization/useGridVirtualScroller.d.ts:625:65 - error TS2694: Namespace '"node_modules/@mui/material/node_modules/csstype/index".Property' has no exported member 'ColorAdjust'.

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

My MUI versions:

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

Resolutions:

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

c3-william-peng · 2022-03-08T17:59:08Z

@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

GDC94 · 2022-03-31T00:30:42Z

Después de actualizar mis paquetes a las últimas versiones, se resolvió el problema.

hello friend, what command did you use?

jedwards1211 · 2022-05-11T17:39:58Z

@c3-william-peng it still happens with the latest @mui/styles as far as I can see

bradleat · 2022-05-13T18:28:38Z

It looks like @mui/base v5.0.0-alpha.80 isn't including csstype as a dependency, which is breaking the build.

c3-william-peng added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Mar 3, 2022

siriwatknp added bug 🐛 Something doesn't work package: base-ui Specific to @mui/base typescript and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Mar 4, 2022

nhayfield mentioned this issue Mar 4, 2022

Mui5upgrade pomerium/desktop-client#103

Merged

6 tasks

atlansien mentioned this issue Mar 6, 2022

feature: 脱mui atlansien/timer-app-react-vite#3

Merged

ocavue mentioned this issue Mar 6, 2022

chore(deps): update dependencies (non-major) ocavue/rino#970

Merged

1 task

c3-william-peng closed this as completed Mar 8, 2022

victor-grajski mentioned this issue Mar 8, 2022

Building @mui/x-data-grid breaks due to deprecated csstype.Property.ColorAdjust mui/mui-x#4128

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Building @mui/base breaks due to deprecated csstype.Property.ColorAdjust #31296

Building @mui/base breaks due to deprecated csstype.Property.ColorAdjust #31296

c3-william-peng commented Mar 3, 2022

pulkitvyas08 commented Mar 4, 2022

wizzymotion commented Mar 4, 2022

nhayfield commented Mar 4, 2022

pulkitvyas08 commented Mar 4, 2022

Anubiso commented Mar 4, 2022

nhayfield commented Mar 4, 2022

Anubiso commented Mar 4, 2022

nhayfield commented Mar 4, 2022

salarhfz-fs commented Mar 5, 2022

dezoito commented Mar 5, 2022

dezoito commented Mar 5, 2022 •

edited

victor-grajski commented Mar 7, 2022 •

edited

nhayfield commented Mar 7, 2022

caesaneer commented Mar 7, 2022

victor-grajski commented Mar 7, 2022 •

edited

salarhfz-fs commented Mar 8, 2022

Jonri2 commented Mar 8, 2022

kohaiy commented Mar 8, 2022

c3-william-peng commented Mar 8, 2022

victor-grajski commented Mar 8, 2022 •

edited

c3-william-peng commented Mar 8, 2022

GDC94 commented Mar 31, 2022

jedwards1211 commented May 11, 2022

bradleat commented May 13, 2022

Building @mui/base breaks due to deprecated csstype.Property.ColorAdjust #31296

Building @mui/base breaks due to deprecated csstype.Property.ColorAdjust #31296

Comments

c3-william-peng commented Mar 3, 2022

Duplicates

Latest version

Current behavior 😯

Expected behavior 🤔

Steps to reproduce 🕹

Context 🔦

Your environment 🌎

pulkitvyas08 commented Mar 4, 2022

wizzymotion commented Mar 4, 2022

nhayfield commented Mar 4, 2022

pulkitvyas08 commented Mar 4, 2022

Anubiso commented Mar 4, 2022

nhayfield commented Mar 4, 2022

Anubiso commented Mar 4, 2022

nhayfield commented Mar 4, 2022

salarhfz-fs commented Mar 5, 2022

dezoito commented Mar 5, 2022

dezoito commented Mar 5, 2022 • edited

victor-grajski commented Mar 7, 2022 • edited

nhayfield commented Mar 7, 2022

caesaneer commented Mar 7, 2022

victor-grajski commented Mar 7, 2022 • edited

salarhfz-fs commented Mar 8, 2022

Jonri2 commented Mar 8, 2022

kohaiy commented Mar 8, 2022

c3-william-peng commented Mar 8, 2022

victor-grajski commented Mar 8, 2022 • edited

c3-william-peng commented Mar 8, 2022

GDC94 commented Mar 31, 2022

jedwards1211 commented May 11, 2022

bradleat commented May 13, 2022

dezoito commented Mar 5, 2022 •

edited

victor-grajski commented Mar 7, 2022 •

edited

victor-grajski commented Mar 7, 2022 •

edited

victor-grajski commented Mar 8, 2022 •

edited