React build failed with error export 'experimental_sx' (reexported as 'experimental

My React Project build pipeline failed with the following error:

$ yarn build:remote
yarn run
$ CI=false react-scripts build
Creating an optimized production build...
Failed to compile.
export 'experimental_sx' (reexported as 'experimental_sx') was not found in '@mui/system' (possible exports: Box, Container, GlobalStyles, Stack, StyledEngineProvider, ThemeProvider, Unstable_Grid, alignContent, alignItems, alignSelf, alpha, backgroundColor, bgcolor, border, borderBottom, borderBottomColor, borderColor, borderLeft, borderLeftColor, borderRadius, borderRight, borderRightColor, borderTop, borderTopColor, borderTransform, borders, bottom, boxSizing, breakpoints, color, colorChannel, columnGap, compose, containerClasses, createBox, createBreakpoints, createContainer, createGrid, createSpacing, createStack, createStyled, createTheme, createUnarySpacing, createUnaryUnit, css, darken, decomposeColor, display, emphasize, flex, flexBasis, flexDirection, flexGrow, flexShrink, flexWrap, flexbox, fontFamily, fontSize, fontStyle, fontWeight, gap, getContainerUtilityClass, getContrastRatio, getGridUtilityClass, getLuminance, getPath, getStackUtilityClass, getStyleFromPropValue, getStyleValue, getThemeProps, getValue, grid, gridArea, gridAutoColumns, gridAutoFlow, gridAutoRows, gridClasses, gridColumn, gridRow, gridTemplateAreas, gridTemplateColumns, gridTemplateRows, handleBreakpoints, height, hexToRgb, hslToRgb, justifyContent, justifyItems, justifySelf, keyframes, left, letterSpacing, lighten, lineHeight, margin, marginKeys, maxHeight, maxWidth, mergeBreakpointsInOrder, minHeight, minWidth, order, padding, paddingKeys, palette, paletteTransform, position, positions, private_safeAlpha, private_safeColorChannel, private_safeDarken, private_safeEmphasize, private_safeLighten, recomposeColor, responsivePropType, rgbToHex, right, rowGap, shadows, shape, shouldForwardProp, sizeHeight, sizeWidth, sizing, sizingTransform, spacing, stackClasses, style, styled, systemDefaultTheme, textAlign, textTransform, top, typography, typographyVariant, unstable_createCssVarsProvider, unstable_createGetCssVar, unstable_createStyleFunctionSx, unstable_defaultSxConfig, unstable_extendSxProp, unstable_getThemeValue, unstable_resolveBreakpointValues, unstable_styleFunctionSx, useTheme, useThemeProps, useThemeWithoutDefault, width, zIndex)
error Command failed with exit code 1.

How do I fix this issue?

CodePudding user response：

There is a new release: https://github.com/mui/material-ui/releases/tag/v5.11.0

It says it has a breaking change in @mui/system.

CodePudding user response：

This is likely due a transitive dependency with a wrongly defined version. I could fix the problem by updating all @mui/* packages to the newest version.

As of 2022-12-14 it's:

    "@mui/icons-material": "5.11.0",
    "@mui/material": "5.11.0",
    "@mui/styles": "5.11.0",

If that doesn't fix the problem, you can try to remove the yarn.lock or package-lock.json and re-install the dependencies.

with yarn:

$ yarn install

with npm:

$ npm install

CodePudding user response：

https://github.com/mui/material-ui/releases/tag/v5.11.0 use older versions

The breaking change is regarding an experimental API:

-import { styled, experimental_sx } from '@mui/material/styles'; import { styled } from '@mui/material/styles';>

I used below versions and fixed this issue:

"@mui/icons-material": "^5.10.17",
"@mui/material": "5.11.0",```

CodePudding user response：

I'm also having trouble with this using material dashboard 2 project