I'm using mui v5.11.0, After install that some errors are occurred in my project

[rajagopal1997]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example:

Steps:

1.Check my Images
2.how to solve that issue

Current behavior 😯

No response

Expected behavior 🤔

No response

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

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

[rajagopal1997]

@FjVillar i'm using mui v5.11.0, but errors are occurred
if you have any doubts, check my above images

[siriwatknp]

Please share a repository that we can reproduce.

[KevinVandy]

In my library I'm getting reports that my debounce import is no longer valid KevinVandy/material-react-table#257

Apparently, this no longer works

import debounce from '@mui/material/utils/debounce';

I'm pushing an emergency fix with this

import { debounce } from '@mui/material/utils';

But I'm going to get a log of complaints while devs install incompatible versions

[garronej]

Hi @siriwatknp,
I confirm, this is pretty serious 🥵, it affect all Next.js setups.

Reproduction:

git clone https://github.com/garronej/react-dsfr-next-demo  
cd react-dsfr-next-demo
yarn
yarn dev

The repo is pinned on @mui/material: 5.10 so it work. Now if you update @mui/material to 5.11 you'll get the errors.

Reason of the bug: Since 5.11 it's pulling an ESM distribution of MUI instead of CJS. There are ways to tell Next.js to transpile specific dependencies but by default it doesn't.

[siriwatknp]

@garronej Thanks! We are figuring out what happened.

[michaldudak]

See #35489 for an explanation of what happened. Long story short - the current format is the one we had before 5.10.3. So it should work the same way as the older versions.

@garronej A brand new Next.js project with Material UI 5.11.0 works fine. Some custom config value likely causes problems after upgrading. I'm investigating it.

https://mui.com/material-ui/guides/minimizing-bundle-size/#option-one-use-path-imports

Apparently, this no longer works
import debounce from '@mui/material/utils/debounce';

@KevinVandy You're not supposed to use such deep imports. As noted in https://mui.com/material-ui/guides/minimizing-bundle-size/#option-one-use-path-imports, we only support up to 2nd level of subpaths.

@garronej It seems that react-dsfr suffers from the same issue: https://github.com/codegouvfr/react-dsfr/blob/main/src/mui.tsx#L14

[garronej]

@garronej It seems that react-dsfr suffers from the same issue: https://github.com/codegouvfr/react-dsfr/blob/main/src/mui.tsx#L14

With react DSFR this is by design, the lib does not provide ESM distribution (to be able to import assets internally) and explicitely provides setup instructions to make it work.

[michaldudak]

I meant that it has the same issue as @KevinVandy's code - it imports from a path three levels deep.

[garronej]

I meant that it has the same issue as @KevinVandy's code - it imports from a path three levels deep.

Ah ok! Thank you very much.
Indeed, if I avoid importing from path I'm not supposed to be importing things works.
I can't import the default shadows directly though but that's no big deal...

Sorry for the falsly alarmin report and thank you for the quick explaination.

[siriwatknp]

It sounds like @KevinVandy and @garronej issues are answered but might not be related to the main issue. Waiting for @rajagopal1997 for more details.

[rajagopal1997]

yeah @siriwatknp it's solved my problem, im installing npm i @mui/material --force after installing forcely errors are resolved...

[siriwatknp]

Thanks for the info. I'm closing this issue then.