unstable_useIsFocusVisible is not exported from @mui/utils

[DaveITpl]

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]

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

[stabor705]

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

[sai6855]

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

[mnajdova]

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

[mnajdova]

@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]

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]

This looks related to #43538.

It seems that the problem is simply about the version of @mui/lab used. We fixed #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/[email protected]. The migration guide is wrong, it should talk about it https://mui.com/material-ui/migration/upgrade-to-v6/#quality-of-life-improvements.

[guytepper]

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

✘ [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]

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]

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]

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]

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]

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

[mnajdova]

I believe it's similar issue to #44096. It should be fixed by #44096 (comment).

[DiegoAndai]

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/[email protected]/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]

experiencing the same issue 💀

[DiegoAndai]

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]

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]

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]

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

[oliviertassinari]

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/[email protected] to work.

[github-actions]

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]

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/[email protected] to work.

@oliviertassinari after merging #44256, do you think it's worth updating the migration guide?