[lab][LoadingButton] Importing nonexistent function

[diegocolombo]

Steps to reproduce

When using LoadingButton from @mui/lab, it tries to import unstable_useIsFocusVisible from @mui/utils.
I took a look into the exported functions, and there is no such unstable_useIsFocusVisible. What is exported is unstable_isFocusVisible.

This lead to the following trace

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

Import trace for requested module:
./node_modules/@mui/base/useSlider/useSlider.js
./node_modules/@mui/base/useSlider/index.js
./node_modules/@mui/base/index.js
./node_modules/@mui/lab/useAutocomplete/index.js
./node_modules/@mui/lab/index.js

Current behavior

No response

Expected behavior

No response

Context

No response

Your environment

npx @mui/envinfo

  System:
    OS: macOS 14.5
  Binaries:
    Node: 20.11.0 - ~/.nvm/versions/node/v20.11.0/bin/node
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.0/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 128.0.6613.113
    Edge: Not Found
    Safari: 17.5
  npmPackages:
    @emotion/react: ^11.13.0 => 11.13.3
    @emotion/styled: ^11.13.0 => 11.13.0
    @mui/base:  5.0.0-beta.42
    @mui/core-downloads-tracker:  6.0.0
    @mui/icons-material: ^6.0.0 => 6.0.0
    @mui/lab: ^6.0.0-beta.8 => 6.0.0-dev.240424162023-9968b4889d
    @mui/material: ^6.0.0 => 6.0.0
    @mui/material-nextjs: ^6.0.0 => 6.0.0
    @mui/material-pigment-css: ^6.0.0 => 6.0.0
    @mui/private-theming:  6.0.0
    @mui/styled-engine:  6.0.0
    @mui/system:  6.0.0
    @mui/types:  7.2.16
    @mui/utils:  6.0.0
    @pigment-css/react:  0.0.20
    @types/react:  18.2.48
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0

Search keywords: lab, useIsFocusVisible

[ZeeshanTamboli]

Please provide a minimal reproduction. It helps us troubleshoot. A live example would be perfect. This StackBlitz sandbox template may be a good starting point.

[jeremiemv]

I am experiencing the same issue when upgrading to v6.

   @mui/icons-material ------------------------- ◯ ^5.16.7 ------                  ◉ ^6.0.1 -------
   @mui/lab ------------------------------------ ◯ ^5.0.0-alpha.…                  ◉ 6.0.0 --------
   @mui/material ------------------------------- ◯ ^5.16.7 ------                  ◉ ^6.0.1 -------

Run yarn run build:dev
Creating an optimized production build...
Failed to compile.

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

    "build:dev": "env-cmd -f config/.env.dev react-scripts build",

Only use of @mui/lab is for a ButtonLoader component.

import styled from "@emotion/styled";
import LoadingButton from "@mui/lab/LoadingButton";

interface IStyles {
  height?: string;
  fontWeight?: string;
  margin?: string;
  fontSize?: string;
}

export const ButtonLoader = styled(LoadingButton)`
  height: ${({ height }: IStyles) => (height ? height : "48px")};
  font-weight: ${({ fontWeight }: IStyles) => (fontWeight ? fontWeight : "500")};
  margin: ${({ margin }: IStyles) => margin || "0px"};
  font-size: ${({ fontSize }: IStyles) => (fontSize ? fontSize : "16px")};
  border-radius: 24px;
  padding: 0 25px 0 25px;
`;

[ZeeshanTamboli]

Can someone share a live example where it errors? I can't reproduce it here: https://stackblitz.com/edit/vitejs-vite-qpegzl?file=src%2FApp.tsx&terminal=dev.

[IsaacInsoll]

Hello fellow humans,
I hit this same problem, but my fellow workmate, TheSchemaMaster saved the day by changing our deps slightly:

was: @mui/lab": "^6.0.0-dev.240424162023-9968b4889d which didn't work
now: "@mui/lab": "6.0.0-beta.8" and it builds fine in vite 🚀

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