Breaking change introduced in v5.11.11 #36384

frontyard · 2023-03-01T11:35:41Z

Duplicates

I have searched the existing issues

Latest version

I have tested the latest version

Steps to reproduce 🕹

I believe following error is due to breaking changes introduced in version 5.11.11. We are forced to lock version numbers in our package.json

Not long ago we had to deal with another MUI patch release introducing breaking changes. Can you please stop doing this and bump minor version if you are introducing breaking changes, so we can follow a sane upgrade process? Please!

ERROR in ./node_modules/@mui/material/Badge/Badge.js 9:0-42
Module not found: Error: Can't resolve '@mui/base/useBadge' in '/app/node_modules/@mui/material/Badge'
resolve '@mui/base/useBadge' in '/app/node_modules/@mui/material/Badge'
Parsed request is a module
using description file: /app/node_modules/@mui/material/Badge/package.json (relative path: .)
aliased with mapping '@mui/base': '/app/node_modules/@mui/base' to '/app/node_modules/@mui/base/useBadge'
using description file: /app/node_modules/@mui/material/Badge/package.json (relative path: .)

Current behavior 😯

Patch release introduces breaking changes.

Expected behavior 🤔

Patch release SHOULDN'T be introducing breaking changes.

Context 🔦

No response

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:

smellai · 2023-03-01T14:05:00Z

Similar issue with Autocomplete:

Cannot find module '@mui/base/AutocompleteUnstyled' or its corresponding type declarations.

hbjORbj · 2023-03-01T15:20:50Z

Breaking change was introduced to MUI Base by this PR: #36235

We included the following note in the 5.11.11 release note: https://github.com/mui/material-ui/releases/tag/v5.11.11

[base] Move hooks to their own directories ([base] Move hooks to their own directories #36235) @hbjORbj
Base hooks (e.g., useSelect) are no longer exported from {Component}Unstyled directories and instead they have their own directories.
Below is an example of how the migration should look like:

-import { useBadge } from '@mui/base/BadgeUnstyled';
+import useBadge from '@mui/base/useBadge';

You can use this codemod to help with the migration.

MUI Material UI isn't expected to be affected. By looking at the error message you provided, it seems like you haven't cleared the node_modules and re-installed them.

frontyard · 2023-03-01T15:35:50Z

@hbjORbj The error is coming from our CI/CD environment. Are we suppose to clear the node_modules every time we deploy?

I understand that you put a comment in your release notes that this is a breaking change. But that doesn't make it right. It's a patch release. There should be no breaking changes.

michaldudak · 2023-03-01T15:46:07Z

The breaking change notice was about the @mui/base package, which is still unstable. We did not purposefully make breaking changes in @mui/material, so this is unexpected. Could you verify if your @mui/material and @mui/base are resolved to the latest versions (5.0.0-alpha.119 for @mui/base and 5.11.11 for @mui/material)?

frontyard · 2023-03-01T16:07:41Z

@michaldudak I'm not sure I fully understand, but I believe what you are saying is that the breaking change wasn't suppose to leak outside of MUI, but it did.

michaldudak · 2023-03-01T16:54:17Z

Could you please run npx @mui/envinfo in your project and paste its output here?

frontyard · 2023-03-01T17:38:28Z

@michaldudak not sure this will be super helpful as it's from my dev environment, not our CI/CD which was breaking. But it's the production branch.

System:
OS: Windows 10 10.0.22623
Binaries:
Node: 18.14.0 - C:\dev\nodejs-18.14.0\node.EXE
Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
npm: 9.3.1 - C:\dev\nodejs-18.14.0\npm.CMD
Browsers:
Chrome: Not Found
Edge: Spartan (44.22621.1325.0), Chromium (110.0.1587.57)
npmPackages:
@emotion/react: ~11.10.5 => 11.10.5
@emotion/styled: ~11.10.5 => 11.10.5
@mui/base: 5.0.0-alpha.118
@mui/core-downloads-tracker: 5.11.9
@mui/icons-material: ~5.11.9 => 5.11.9
@mui/lab: 5.0.0-alpha.120 => 5.0.0-alpha.120
@mui/material: ~5.11.9 => 5.11.9
@mui/private-theming: 5.11.9
@mui/styled-engine: 5.11.9
@mui/styles: ~5.11.9 => 5.11.9
@mui/system: 5.11.9
@mui/types: 7.2.3
@mui/utils: ~5.11.9 => 5.11.9
@mui/x-data-grid: 5.17.23
@mui/x-data-grid-premium: ~5.17.23 => 5.17.23
@mui/x-data-grid-pro: 5.17.23
@mui/x-date-pickers: ~5.0.18 => 5.0.18
@mui/x-date-pickers-pro: ~5.0.18 => 5.0.18
@mui/x-license-pro: 5.17.12
@types/react: ^18.0.28 => 18.0.28
react: ~18.2.0 => 18.2.0
react-dom: ~18.2.0 => 18.2.0
styled-components: ~5.3.6 => 5.3.6
typescript: ^4.9.5 => 4.9.5

michaldudak · 2023-03-01T19:13:35Z

Yeah, it doesn't help as it uses the older version of @mui/material. How come your CI environment is different, though? Do you use lockfiles?

I suspect the reason for your failing builds is a mismatch of package versions. It seems that your CI somehow updated @mui/material without updating its dependencies (@mui/base, specifically), but without a listing of used versions I'm not able to confirm it. Would you be able to run npx @mui/envinfo as a part of your CI job (or just manually inspect the packages on the build server to see the versions used)?

frontyard · 2023-03-02T11:01:31Z

More info...

I can now reproduce this on my local env. The same error shows up for:
useBadge
useSlider
useSnackbar
useAutocomplete

npx @mui/envinfo:
System:
OS: Windows 10 10.0.22623
Binaries:
Node: 18.14.0 - C:\dev\nodejs-18.14.0\node.EXE
Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
npm: 9.3.1 - C:\dev\nodejs-18.14.0\npm.CMD
Browsers:
Chrome: Not Found
Edge: Spartan (44.22621.1325.0), Chromium (110.0.1587.57)
npmPackages:
@emotion/react: ~11.10.5 => 11.10.6
@emotion/styled: ~11.10.5 => 11.10.6
@mui/base: 5.0.0-alpha.118
@mui/core-downloads-tracker: 5.11.11
@mui/icons-material: ~5.11.9 => 5.11.11
@mui/lab: 5.0.0-alpha.120 => 5.0.0-alpha.120
@mui/material: ~5.11.9 => 5.11.11
@mui/private-theming: 5.11.11
@mui/styled-engine: 5.11.11
@mui/styles: ~5.11.9 => 5.11.11
@mui/system: 5.11.11
@mui/types: 7.2.3
@mui/utils: ~5.11.9 => 5.11.11
@mui/x-data-grid: 5.17.25
@mui/x-data-grid-premium: ~5.17.23 => 5.17.25
@mui/x-data-grid-pro: 5.17.25
@mui/x-date-pickers: ~5.0.18 => 5.0.20
@mui/x-date-pickers-pro: ~5.0.18 => 5.0.20
@mui/x-license-pro: 5.17.12
@types/react: ^18.0.28 => 18.0.28
react: ~18.2.0 => 18.2.0
react-dom: ~18.2.0 => 18.2.0
styled-components: ~5.3.6 => 5.3.8
typescript: ^4.9.5 => 4.9.5

If I do yarn add @mui/base the build is successful. After this npx @mui/envinfo shows different version for @mui/base:
@mui/base: ^5.0.0-alpha.119 => 5.0.0-alpha.119

Just to verify, I removed @mui/base which breaks consequitive builds showing @mui/base version to be @mui/base: 5.0.0-alpha.118

michaldudak · 2023-03-02T11:38:32Z

@mui/[email protected] requires @mui/[email protected] (see https://unpkg.com/browse/@mui/[email protected]/package.json). Updating just Material UI without its transitive dependencies is what causes the error you're experiencing.

frontyard · 2023-03-03T12:18:04Z

@michaldudak can you calrify? @mui/base being transitive, we don't have it in our package.json. How is the update suppose to have happened?

artyil · 2023-03-09T14:10:39Z

For anyone fetching errors similar to:
Cannot read properties of undefined (reading 'background')
Cannot read properties of undefined (reading 'borderRadius')
Cannot read properties of undefined (reading 'text')

I had similar problem (reported in this thread), when recreating yarn.lock file, non listed @mui/* transitive dependencies where bumped to higher versions and broke my entire app.

The following versions listed in my package.json:

  "@emotion/core": "11.0.0",
  "@emotion/react": "^11.9.3",
  "@emotion/styled": "^11.9.3",
  "@mui/icons-material": "5.10.16",
  "@mui/material": "5.10.16",
  "@mui/styles": "5.10.16",
  "@mui/x-date-pickers": "5.0.9",

npx @mui/envinfo:

  System:
    OS: macOS 12.6
  Binaries:
    Node: 16.18.0 - ~/.nvm/versions/node/v16.18.0/bin/node
    Yarn: 1.22.18 - /opt/homebrew/bin/yarn
    npm: 8.19.2 - ~/.nvm/versions/node/v16.18.0/bin/npm
  Browsers:
    Chrome: 110.0.5481.177
    Edge: Not Found
    Firefox: 109.0
    Safari: 16.0
  npmPackages:
    @emotion/react:  11.10.6
    @emotion/styled:  11.10.6
    @mui/base:  5.0.0-alpha.108
    @mui/core-downloads-tracker:  5.11.12
    @mui/icons-material:  5.10.16
    @mui/lab:  5.0.0-alpha.110
    @mui/material:  5.10.16
    @mui/private-theming:  5.11.12
    @mui/styled-engine:  5.11.11
    @mui/styles:  5.10.16
    @mui/system:  5.11.12
    @mui/types:  7.2.3
    @mui/utils:  5.11.12
    @mui/x-date-pickers:  5.0.9
    @types/react: ^18.0.25 => 18.0.25
    react: 18.2.0 => 18.2.0
    react-dom: 18.2.0 => 18.2.0
    typescript: 4.7.4 => 4.7.4

I may conclude that bumped versions broke the Experimental_CssVarsProvider that we use. Given the fact it is experimental, I don't see reason for it to be broken by uncontrolled transitive dependecies changes cause by yarn or npm installs because I am using exact versioning control notation.

The solution in my case is to use resolutions or overrides field to lock all transitives to parent packages:

"resolutions": {
    "@mui/material": "5.10.16",
    "@mui/styles": "5.10.16",
    "@mui/x-date-pickers": "5.0.9",
    "@mui/system": "5.10.16",
    "@mui/utils": "5.10.16",
    "@mui/core-downloads-tracker": "5.10.16",
    "@mui/icons-material": "5.10.16",
    "@mui/private-theming": "5.10.16",
    "@mui/styled-engine": "5.10.16",
  },

@mui team - is it possible to fix this issue or provide more helpful error messages so we as consumers of this library can easily understand what cause the error?

siriwatknp · 2023-03-09T18:43:55Z

For anyone fetching errors similar to: Cannot read properties of undefined (reading 'background') Cannot read properties of undefined (reading 'borderRadius') Cannot read properties of undefined (reading 'text')

@artyil Can you share a repo that we can take a look?

michaldudak · 2023-03-11T16:42:28Z

@michaldudak can you calrify? @mui/base being transitive, we don't have it in our package.json. How is the update suppose to have happened?

Updating the @mui/material should have also updated its dependencies. There could be an error or misconfiguration of your CI if it didn't happen automatically.

siriwatknp · 2023-03-12T07:41:43Z

@frontyard Would be great if you could share more detail about your CI? it is likely because of your CI setup.

I could not reproduce the error locally, here is what I tried:

With a fresh local repo, I install @mui/material v5.11.9 which gets @mui/base alpha.118 as a dependency

// yarn.lock
"@mui/[email protected]":
  version "5.11.9"
  resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.11.9.tgz#fd5b81551f50e4acea2d80feed33728710386f28"
  integrity sha512-Wb3WzjzYyi/WKSl/XlF7aC8kk2NE21IoHMF7hNQMkPb0GslbWwR4OUjlBpxtG+RSZn44wMZkEDNB9Hw0TDsd8g==
  dependencies:
    "@babel/runtime" "^7.20.13"
    "@mui/base" "5.0.0-alpha.118"
    "@mui/core-downloads-tracker" "^5.11.9"
    "@mui/system" "^5.11.9"
    "@mui/types" "^7.2.3"
    "@mui/utils" "^5.11.9"
    "@types/react-transition-group" "^4.4.5"
    clsx "^1.2.1"
    csstype "^3.1.1"
    prop-types "^15.8.1"
    react-is "^18.2.0"
    react-transition-group "^4.4.5"

Update @mui/material to v5.11.11, @mui/base changes to alpha.119 as expected:

 // yarn.lock
"@mui/[email protected]":
   version "5.11.11"
   resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.11.11.tgz#9896e6f6e53057622345ebd078bc66a4100a364a"
   integrity sha512-sSe0dmKjB1IGOYt32Pcha+cXV3IIrX5L5mFAF9LDRssp/x53bluhgLLbkc8eTiJvueVvo6HAyze6EkFEYLQRXQ==
   dependencies:
     "@babel/runtime" "^7.21.0"
     "@mui/base" "5.0.0-alpha.119"
     "@mui/core-downloads-tracker" "^5.11.11"
     "@mui/system" "^5.11.11"
     "@mui/types" "^7.2.3"
     "@mui/utils" "^5.11.11"
     "@types/react-transition-group" "^4.4.5"
     clsx "^1.2.1"
     csstype "^3.1.1"
     prop-types "^15.8.1"
     react-is "^18.2.0"
     react-transition-group "^4.4.5"

frontyard · 2023-03-14T13:25:22Z

@siriwatknp Nothing out of the ordinary. It's a github action that runs yarn install and yarn build all wrapped in a docker container. What info would help you figure this out?

oliviertassinari · 2023-03-19T12:39:48Z

I think that we should close this issue. The root of the problem looks to be related to how npm dependencies are resolved wrongly, against what @mui/material is asking for. It looks very much like a yarn core issue or yarn configuration issue.

siriwatknp · 2023-03-20T03:44:30Z

@frontyard We're really sorry for the issue that you encountered but in this case, there is no workaround that we can provide.

What we could try is to bump the minor version (if we have breaking changes with the experimental APIs/packages) as you ask but I'm still not sure if it helps since the problem is not from our side, cc @michaldudak.

frontyard added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Mar 1, 2023

frontyard changed the title ~~5.11.11 patch version introrducec breaking changes~~ 5.11.11 patch version introduces breaking changes Mar 1, 2023

zannager added the component: badge This is the name of the generic UI component, not the React module! label Mar 1, 2023

zannager assigned siriwatknp Mar 1, 2023

hbjORbj assigned hbjORbj and unassigned siriwatknp Mar 1, 2023

hbjORbj added status: expected behavior Does not imply the behavior is intended. Just that we know about it and can't work around it and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Mar 1, 2023

hbjORbj changed the title ~~5.11.11 patch version introduces breaking changes~~ Breaking change introduced in v5.11.11 Mar 1, 2023

hbjORbj mentioned this issue Mar 1, 2023

Don't introduce breaking changes in patch releases #36387

Closed

2 tasks

oliviertassinari added external dependency Blocked by external dependency, we can’t do anything about it package: material-ui Specific to @mui/material and removed component: badge This is the name of the generic UI component, not the React module! labels Mar 19, 2023

siriwatknp closed this as completed Mar 20, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Breaking change introduced in v5.11.11 #36384

Breaking change introduced in v5.11.11 #36384

frontyard commented Mar 1, 2023

smellai commented Mar 1, 2023

hbjORbj commented Mar 1, 2023 •

edited

Loading

frontyard commented Mar 1, 2023

michaldudak commented Mar 1, 2023 •

edited

Loading

frontyard commented Mar 1, 2023

michaldudak commented Mar 1, 2023

frontyard commented Mar 1, 2023

michaldudak commented Mar 1, 2023 •

edited

Loading

frontyard commented Mar 2, 2023 •

edited

Loading

michaldudak commented Mar 2, 2023 •

edited

Loading

frontyard commented Mar 3, 2023

artyil commented Mar 9, 2023 •

edited

Loading

siriwatknp commented Mar 9, 2023 •

edited

Loading

michaldudak commented Mar 11, 2023

siriwatknp commented Mar 12, 2023 •

edited

Loading

frontyard commented Mar 14, 2023

oliviertassinari commented Mar 19, 2023 •

edited

Loading

siriwatknp commented Mar 20, 2023 •

edited

Loading

Breaking change introduced in v5.11.11 #36384

Breaking change introduced in v5.11.11 #36384

Comments

frontyard commented Mar 1, 2023

Duplicates

Latest version

Steps to reproduce 🕹

Current behavior 😯

Expected behavior 🤔

Context 🔦

Your environment 🌎

smellai commented Mar 1, 2023

hbjORbj commented Mar 1, 2023 • edited Loading

frontyard commented Mar 1, 2023

michaldudak commented Mar 1, 2023 • edited Loading

frontyard commented Mar 1, 2023

michaldudak commented Mar 1, 2023

frontyard commented Mar 1, 2023

michaldudak commented Mar 1, 2023 • edited Loading

frontyard commented Mar 2, 2023 • edited Loading

michaldudak commented Mar 2, 2023 • edited Loading

frontyard commented Mar 3, 2023

artyil commented Mar 9, 2023 • edited Loading

siriwatknp commented Mar 9, 2023 • edited Loading

michaldudak commented Mar 11, 2023

siriwatknp commented Mar 12, 2023 • edited Loading

frontyard commented Mar 14, 2023

oliviertassinari commented Mar 19, 2023 • edited Loading

siriwatknp commented Mar 20, 2023 • edited Loading

hbjORbj commented Mar 1, 2023 •

edited

Loading

michaldudak commented Mar 1, 2023 •

edited

Loading

michaldudak commented Mar 1, 2023 •

edited

Loading

frontyard commented Mar 2, 2023 •

edited

Loading

michaldudak commented Mar 2, 2023 •

edited

Loading

artyil commented Mar 9, 2023 •

edited

Loading

siriwatknp commented Mar 9, 2023 •

edited

Loading

siriwatknp commented Mar 12, 2023 •

edited

Loading

oliviertassinari commented Mar 19, 2023 •

edited

Loading

siriwatknp commented Mar 20, 2023 •

edited

Loading