unstable_useIsFocusVisible is not exported from @mui/utils

DaveITpl commented 2 months ago

Steps to reproduce

No response

Current behavior

After migrating from v5 to v6 I get an unusual error, the console displays absolutely nothing, but errors occur in compilation:

from build Attempted import error: 'unstable_useIsFocusVisible' is not exported from '@mui/utils' (imported as 'useIsFocusVisible').

ERROR in ./node_modules/@mui/lab/node_modules/@mui/base/useButton/useButton.js 36:6-23
export 'unstable_useIsFocusVisible' (imported as 'useIsFocusVisible') was not found in '@mui/utils' (possible exports: HTMLElementType, chainPropTypes, clamp, deepmerge, elementAcceptingRef, elementTypeAcceptingRef, exactProp, formatMuiErrorMessage, getDisplayName, getValidReactChildren, globalStateClasses, integerPropType, internal_resolveProps, isGlobalState, isPlainObject, ponyfillGlobal, refType, unstable_ClassNameGenerator, unstable_Timeout, unstable_capitalize, unstable_composeClasses, unstable_createChainedFunction, unstable_debounce, unstable_deprecatedPropType, unstable_extractEventHandlers, unstable_generateUtilityClass, unstable_generateUtilityClasses, unstable_getReactNodeRef, unstable_getScrollbarSize, unstable_isFocusVisible, unstable_isGlobalState, unstable_isMuiElement, unstable_ownerDocument, unstable_ownerWindow, unstable_requirePropFactory, unstable_resolveComponentProps, unstable_setRef, unstable_unsupportedProp, unstable_useControlled, unstable_useEnhancedEffect, unstable_useEventCallback, unstable_useForkRef, unstable_useId, unstable_useLazyRef, unstable_useOnMount, unstable_useSlotProps, unstable_useTimeout, usePreviousProps, visuallyHidden)
ERROR in ./node_modules/@mui/lab/node_modules/@mui/base/useSlider/useSlider.js 222:6-23
export 'unstable_useIsFocusVisible' (imported as 'useIsFocusVisible') was not found in '@mui/utils' (possible exports: HTMLElementType, chainPropTypes, clamp, deepmerge, elementAcceptingRef, elementTypeAcceptingRef, exactProp, formatMuiErrorMessage, getDisplayName, getValidReactChildren, globalStateClasses, integerPropType, internal_resolveProps, isGlobalState, isPlainObject, ponyfillGlobal, refType, unstable_ClassNameGenerator, unstable_Timeout, unstable_capitalize, unstable_composeClasses, unstable_createChainedFunction, unstable_debounce, unstable_deprecatedPropType, unstable_extractEventHandlers, unstable_generateUtilityClass, unstable_generateUtilityClasses, unstable_getReactNodeRef, unstable_getScrollbarSize, unstable_isFocusVisible, unstable_isGlobalState, unstable_isMuiElement, unstable_ownerDocument, unstable_ownerWindow, unstable_requirePropFactory, unstable_resolveComponentProps, unstable_setRef, unstable_unsupportedProp, unstable_useControlled, unstable_useEnhancedEffect, unstable_useEventCallback, unstable_useForkRef, unstable_useId, unstable_useLazyRef, unstable_useOnMount, unstable_useSlotProps, unstable_useTimeout, usePreviousProps, visuallyHidden)
ERROR in ./node_modules/@mui/lab/node_modules/@mui/base/useSwitch/useSwitch.js 49:6-23
export 'unstable_useIsFocusVisible' (imported as 'useIsFocusVisible') was not found in '@mui/utils' (possible exports: HTMLElementType, chainPropTypes, clamp, deepmerge, elementAcceptingRef, elementTypeAcceptingRef, exactProp, formatMuiErrorMessage, getDisplayName, getValidReactChildren, globalStateClasses, integerPropType, internal_resolveProps, isGlobalState, isPlainObject, ponyfillGlobal, refType, unstable_ClassNameGenerator, unstable_Timeout, unstable_capitalize, unstable_composeClasses, unstable_createChainedFunction, unstable_debounce, unstable_deprecatedPropType, unstable_extractEventHandlers, unstable_generateUtilityClass, unstable_generateUtilityClasses, unstable_getReactNodeRef, unstable_getScrollbarSize, unstable_isFocusVisible, unstable_isGlobalState, unstable_isMuiElement, unstable_ownerDocument, unstable_ownerWindow, unstable_requirePropFactory, unstable_resolveComponentProps, unstable_setRef, unstable_unsupportedProp, unstable_useControlled, unstable_useEnhancedEffect, unstable_useEventCallback, unstable_useForkRef, unstable_useId, unstable_useLazyRef, unstable_useOnMount, unstable_useSlotProps, unstable_useTimeout, usePreviousProps, visuallyHidden)

I can't tell if the problem is with my code or the @mui library. Could someone give me some valuable tips on how to debug this?

Expected behavior

No response

Context

No response

Your environment

npx @mui/envinfo

``` System: OS: Linux 6.8 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish) Binaries: Node: 20.14.0 - /usr/local/bin/node npm: 10.8.1 - /usr/local/bin/npm pnpm: Not Found Browsers: Chrome: 127.0.6533.72 npmPackages: @emotion/react: ^11.13.3 => 11.13.3 @emotion/styled: ^11.13.0 => 11.13.0 @mui/base: 5.0.0-dev.20240529-082515-213b5e33ab @mui/core-downloads-tracker: 6.1.0 @mui/icons-material: ^6.1.0 => 6.1.0 @mui/lab: ^6.0.0-alpha.14 => 6.0.0-dev.240424162023-9968b4889d @mui/material: ^6.1.0 => 6.1.0 @mui/private-theming: 6.1.0 @mui/styled-engine: 6.1.0 @mui/styles: ^6.1.0 => 6.1.0 @mui/system: ^6.1.0 => 6.1.0 @mui/types: 7.2.16 @mui/utils: 6.1.0 @mui/x-charts: ^7.17.0 => 7.17.0 @mui/x-charts-vendor: 7.16.0 @mui/x-date-pickers: ^7.17.0 => 7.17.0 @mui/x-internals: 7.17.0 @mui/x-tree-view: ^7.17.0 => 7.17.0 @types/react: 18.3.7 react: ^18.3.1 => 18.3.1 react-dom: ^18.3.1 => 18.3.1 typescript: ^4.9.5 => 4.9.5 ```

Search keywords: unstable_useIsFocusVisible, utils

R3D347HR4Y commented 2 months ago

Just got the exact same problem, I have one goddamn package that's locking up my entire project because of this...

stabor705 commented 2 months ago

Encountered the same issue. As a temporary workaround, I fixed it by yarn patching @mui/base and changing every .*useIsFocusVisible import to .*isFocusVisible.

sai6855 commented 2 months ago

@stabor705 @R3D347HR4Y @DaveITpl Can you anyone of you share codesandbox which reproduces the issue?

mnajdova commented 2 months ago

Which package is showing this error? What version do you use? A reproduction could help us track the issue.

mnajdova commented 2 months ago

@mui/base is not used as a dependency anymore in @mui/material or @mui/lab, so looks like this is related to an older version maybe?

mfalthaw commented 2 months ago

Hook is exported as unstable_isFocusVisible and imported as unstable_useIsFocusVisible. Note the i.

MUI Dependencies

    "@mui/icons-material": "^6.1.1",
    "@mui/lab": "^6.0.0-beta.10",
    "@mui/material": "^6.1.1",
    "@mui/x-data-grid": "^7.17.0",
    "@mui/x-date-pickers": "^7.17.0",

Console Error

✘ [ERROR] No matching export in "node_modules/@mui/utils/esm/index.js" for import "unstable_useIsFocusVisible"

    node_modules/@mui/base/useButton/useButton.js:5:44:
      5 │ ... as useForkRef, unstable_useIsFocusVisible as useIsFocusVi...
        ╵                    ~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] No matching export in "node_modules/@mui/utils/esm/index.js" for import "unstable_useIsFocusVisible"

    node_modules/@mui/base/useSlider/useSlider.js:5:222:
      5 │ ... as useForkRef, unstable_useIsFocusVisible as useIsFocusVi...
        ╵                    ~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] No matching export in "node_modules/@mui/utils/esm/index.js" for import "unstable_useIsFocusVisible"

    node_modules/@mui/base/useSwitch/useSwitch.js:5:85:
      5 │ ... as useForkRef, unstable_useIsFocusVisible as useIsFocusVi...
        ╵                    ~~~~~~~~~~~~~~~~~~~~~~~~~~

Location /node_modules/@mui/base/useButton/useButton.js

Error Line import { unstable_useForkRef as useForkRef, unstable_useIsFocusVisible as useIsFocusVisible } from '@mui/utils';

Export from node_modules/@mui/utils/esm/index.js export { default as unstable_isFocusVisible } from "./isFocusVisible/index.js";

oliviertassinari commented 2 months ago

This looks related to #43538.

It seems that the problem is simply about the version of @mui/lab used. We fixed https://github.com/mui/material-ui/pull/42768 way too late. It's now in our major playbook to not make this mistakes again https://www.notion.so/mui-org/React-Major-version-release-process-0178410ef26941e6a4f333f80ded127a?pvs=4#de3394f7ae2049c6a6aad52a22fb6005.

As a user of Material UI v6, saving this should simply be about using @mui/lab to be at minimum @mui/lab@6.0.0-beta.8. The migration guide is wrong, it should talk about it https://mui.com/material-ui/migration/upgrade-to-v6/#quality-of-life-improvements.

guytepper commented 2 months ago

Hey @oliviertassinari, After upgrading to the latest versions (excluding @mui/x), I still experience a similar issue - although @mui/lab is set to 6.0.0-beta.10.

Those are my mui packages:

    "@mui/icons-material": "^6.1.1",
    "@mui/lab": "^6.0.0-beta.10",
    "@mui/material": "^6.1.1",
    "@mui/x-data-grid-pro": "6.2.0",
    "@mui/x-date-pickers-pro": "6.2.0",

Build error output

```zsh ✘ [ERROR] No matching export in "node_modules/@mui/material/node_modules/@mui/system/esm/cssVars/index.js" for import "prepareTypographyVars" node_modules/@mui/material/styles/createThemeWithVars.js:5:25: 5 │ import { prepareCssVars, prepareTypographyVars, createGetColorSchemeSelector } from '@mui/system/cssVars'; ╵ ~~~~~~~~~~~~~~~~~~~~~ ✘ [ERROR] No matching export in "node_modules/@mui/material/node_modules/@mui/system/esm/cssVars/index.js" for import "createGetColorSchemeSelector" node_modules/@mui/material/styles/createThemeWithVars.js:5:48: 5 │ import { prepareCssVars, prepareTypographyVars, createGetColorSchemeSelector } from '@mui/system/cssVars'; ╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ✘ [ERROR] No matching export in "node_modules/@mui/lab/node_modules/@mui/utils/esm/index.js" for import "unstable_useIsFocusVisible" node_modules/@mui/lab/node_modules/@mui/base/useButton/useButton.js:5:44: 5 │ import { unstable_useForkRef as useForkRef, unstable_useIsFocusVisible as useIsFocusVisible } from '@mui/utils'; ╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~ ✘ [ERROR] No matching export in "node_modules/@mui/lab/node_modules/@mui/utils/esm/index.js" for import "unstable_useIsFocusVisible" node_modules/@mui/lab/node_modules/@mui/base/useSlider/useSlider.js:5:222: 5 │ ...tCallback as useEventCallback, unstable_useForkRef as useForkRef, unstable_useIsFocusVisible as useIsFocusVisible, visuallyHidden } from '@mui/utils'; ╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~ ✘ [ERROR] No matching export in "node_modules/@mui/lab/node_modules/@mui/utils/esm/index.js" for import "unstable_useIsFocusVisible" node_modules/@mui/lab/node_modules/@mui/base/useSwitch/useSwitch.js:5:85: 5 │ import { unstable_useControlled as useControlled, unstable_useForkRef as useForkRef, unstable_useIsFocusVisible as useIsFocusVisible } from '@mui/utils'; ╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~ ```

jonesmac commented 2 months ago

I had the same error and it was because I had mui/material at 6.x but mui/x-tree-view at 6.17.0. Once I upgraded tree-view to 7.18.0 the errors went away.

github-actions[bot] commented 2 months ago

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.

DaveITpl commented 2 months ago

After the latest updates I still have the same problem. Unfortunately in sandboxes I was not able to prepare the error to open, so I prepared a test repository with all the configuration from my project, but without the code. After installing the yarn install packages and running the yarn start project the same error should be visible in the compilation errors.

https://github.com/DaveITpl/mui6-test-project

mariojsnunes commented 1 month ago

I have the same issue with "@mui/base": "^5.0.0-beta.X". It happens because npm can't find the exact dependency of @mui/utils anymore, so it defaults to the latest, which doesn't have _unstable_useIsFocusVisible_.

Was able to temporarily solve the issue by using "@mui/base": "next".

tndong799 commented 1 month ago

i have the same issue with yarn. i try install and build by npm then it oke.

mnajdova commented 1 month ago

I believe it's similar issue to https://github.com/mui/material-ui/issues/44096. It should be fixed by https://github.com/mui/material-ui/issues/44096#issuecomment-2410507433.

DiegoAndai commented 1 month ago

Hey, @mariojsnunes! May I ask which version you used when the bug presented itself? The latest @mui/base version, 5.0.0-beta.58 shouldn't have this issue, as the updated unstable_isFocusVisible is used, for example: https://unpkg.com/browse/@mui/base@5.0.0-beta.58/useButton/useButton.js#:~:text=unstable_isFocusVisible. If you are using 5.0.0-beta.58 and the issue is still present, may I ask you for the entire error log?

DoWhileGeek commented 1 month ago

experiencing the same issue 💀

DiegoAndai commented 1 month ago

An updated @mui/base version 5.0.0-beta.59 was released, which should've fixed this issue. Please use this latest version.

If you encounter the same issue in 5.0.0-beta.59, or a version higher than that, feel free to reopen the issue, but please provide the entire error log if you do so.

github-actions[bot] commented 1 month ago

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

[!NOTE] @DaveITpl How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

Ilenog commented 1 month ago

Hello, I still have this issue with these versions of mui.

    "@mui/base": "5.0.0-beta.59",
    "@mui/icons-material": "^6.1.5",
    "@mui/lab": "^6.0.0-beta.13",
    "@mui/material": "^6.1.5",
    "@mui/x-data-grid": "^7.21.0",

Here is the error.

✘ [ERROR] No matching export in "node_modules/@mui/utils/esm/index.js" for import "unstable_useIsFocusVisible"

    node_modules/@mui/lab/node_modules/@mui/base/useButton/useButton.js:5:44:
      5 │ import { unstable_useForkRef as useForkRef, unstable_useIsFocusVisible as useIsFocusVisible } from '@mui/utils';
        ╵                                             ~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] No matching export in "node_modules/@mui/utils/esm/index.js" for import "unstable_useIsFocusVisible"

    node_modules/@mui/lab/node_modules/@mui/base/useSlider/useSlider.js:5:222:
      5 │ ...e_useEventCallback as useEventCallback, unstable_useForkRef as useForkRef, unstable_useIsFocusVisible as useIsFocusVisible, visuallyHidden, clamp } from '@mui/utils';
        ╵                                                                               ~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] No matching export in "node_modules/@mui/utils/esm/index.js" for import "unstable_useIsFocusVisible"

    node_modules/@mui/lab/node_modules/@mui/base/useSwitch/useSwitch.js:5:85:
      5 │ import { unstable_useControlled as useControlled, unstable_useForkRef as useForkRef, unstable_useIsFocusVisible as useIsFocusVisible } from '@mui/utils';
        ╵                                                                                      ~~~~~~~~~~~~~~~~~~~~~~~~~~

Ilenog commented 1 month ago

Turns out it works fine with "@mui/lab": "6.0.0-beta.13" installed vs "@mui/lab": "^6.0.0-beta.13".

oliviertassinari commented 1 month ago

I'm reopening, the migration guide for the lab looks wrong https://mui.com/material-ui/migration/upgrade-to-v6/#quality-of-life-improvements. @mui/lab needs to be at least @mui/lab@6.0.0-beta.8 to work.

github-actions[bot] commented 1 month ago

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

[!NOTE] @DaveITpl How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

aarongarciah commented 1 month ago

I'm reopening, the migration guide for the lab looks wrong https://mui.com/material-ui/migration/upgrade-to-v6/#quality-of-life-improvements. @mui/lab needs to be at least @mui/lab@6.0.0-beta.8 to work.

@oliviertassinari after merging https://github.com/mui/material-ui/pull/44256, do you think it's worth updating the migration guide?

mui / material-ui