React 构建失败，错误导出“experimental_sx”（重新导出为“experimental_sx”）

Question

我的 React 项目构建管道失败并出现以下错误：

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

我该如何解决这个问题？

Answer 1

这可能是由于错误定义的版本的传递依赖造成的。我可以通过将所有 @mui/*软件包更新到最新版本来解决该问题。

截至 2022 年 12 月 14 日：

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

如果这不能解决问题，您可以尝试删除yarn.lock或package-lock.json并重新安装依赖项。

用纱线：

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

使用 npm：

$ yarn install

Answer 2

正如预发布者所说：“MUI 由于内部版本不兼容而中断”。

我沿着依赖关系树走下去，发现无论出于何种原因，npm 安装了错误版本的@mui/system.

虽然这是一个相当奇怪的解决方法，但您可以通过手动添加然后删除来解决问题@mui/system

npm install @mui/system@5.10.15
npm uninstall @mui/system@5.10.15

检查npm list @mui/system给定

• 前

  

• 后

  

Answer 3

有一个新版本：https://github.com/mui/material-ui/releases/tag/v5.11.0

它说@mui/system 中有一个重大变化。