Upgrade React 18+ support and replace sortable tree patch

[Copilot]

• Investigate CI/build failure logs and reproduce npm run dev
• Fix webpack dev build (enable optional chaining/class properties plugins in node_modules transpilation)
• Integrate @dnd-kit/core for draggable columns and adjust tests/docs
• Run targeted tests and dev server verification (screenshot: https://github.com/user-attachments/assets/a9bbb8ca-e674-484b-ae7f-5becbca685c9)

Original prompt

Upgrade this package to React 18. Displace use of the react-sortable-tree-patch-react-17 package with the dnd-kit/core package.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[Copilot]

Pull request overview

This PR upgrades the package to require React 18+ (dropping support for React 16 and 17) and removes the deprecated react-sortable-tree-patch-react-17 dependency. The PR claims to replace the sortable tree package with @dnd-kit/core, but this replacement is incomplete as @dnd-kit/core has been added without any code integration.

Changes:

• Updated peer dependencies to require React 18+ (React 19 compatible)
• Removed react-sortable-tree-patch-react-17 and its transitive dependencies
• Added @dnd-kit/core dependency (though not used in code)
• Updated README to document the React 18+ breaking change

Reviewed changes

Copilot reviewed 2 out of 3 changed files in this pull request and generated 1 comment.

File	Description
package.json	Updated peer dependencies to React 18+, removed react-sortable-tree-patch-react-17, added @dnd-kit/core
package-lock.json	Reflected dependency changes including removal of sortable tree and addition of dnd-kit packages
README.md	Added documentation noting React 18+ requirement as a breaking change

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The @dnd-kit/core dependency has been added but is not used anywhere in the codebase. The existing drag-and-drop functionality uses react-dnd and react-dnd-html5-backend (which remain in dependencies). If the intention was to replace react-dnd with @dnd-kit/core, the implementation is incomplete. If @dnd-kit/core is not needed, it should be removed to avoid unnecessary dependencies.

Suggested change

"@dnd-kit/core": "^6.3.1",

[yi-nuo426]

@copilot npm run dev fails to build. Fix this.

ERROR in multi core-js/stable regenerator-runtime/runtime ./examples/Router/index.js
Module not found: Error: Can't resolve 'regenerator-runtime/runtime' in '/Users/l/code/mui-datatables'

ERROR in multi (webpack)-dev-server/client?http://localhost:5050 (webpack)/hot/dev-server.js core-js/stable regenerator-runtime/runtime ./examples/Router/index.js
Module not found: Error: Can't resolve 'regenerator-runtime/runtime' in '/Users/l/code/mui-datatables'

ERROR in ./node_modules/@mui/system/Grid/createGrid.js 108:37
Module parse failed: Unexpected token (108:37)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     const size = parseResponsiveProp(sizeProp, theme.breakpoints, val => val !== false);
|     const offset = parseResponsiveProp(offsetProp, theme.breakpoints);
>     const columns = inProps.columns ?? (level ? undefined : columnsProp);
|     const spacing = inProps.spacing ?? (level ? undefined : spacingProp);
|     const rowSpacing = inProps.rowSpacing ?? inProps.spacing ?? (level ? undefined : rowSpacingProp);

ERROR in ./node_modules/@mui/material/styles/shouldSkipGeneratingVar.js 10:37
Module parse failed: Unexpected token (10:37)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   return !!keys[0].match(/(cssVarPrefix|colorSchemeSelector|modularCssLayers|rootSelector|typography|mixins|breakpoints|direction|transitions)/) || !!keys[0].match(/sxConfig$/) ||
|   // ends with sxConfig
>   keys[0] === 'palette' && !!keys[1]?.match(/(mode|contrastThreshold|tonalOffset)/);
| }

ERROR in ./node_modules/@mui/material/Paper/Paper.js 111:49
Module parse failed: Unexpected token (111:49)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|         '--Paper-shadow': (theme.vars || theme).shadows[elevation],
|         ...(theme.vars && {
>           '--Paper-overlay': theme.vars.overlays?.[elevation]
|         }),
|         ...(!theme.vars && theme.palette.mode === 'dark' && {

ERROR in ./node_modules/@mui/system/breakpoints/breakpoints.js 112:51
Module parse failed: Unexpected token (112:51)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| }
| function createEmptyBreakpointObject(breakpointsInput = {}) {
>   const breakpointsInOrder = breakpointsInput.keys?.reduce((acc, key) => {
|     const breakpointStyleKey = breakpointsInput.up(key);
|     acc[breakpointStyleKey] = {};

ERROR in ./node_modules/@mui/material/AvatarGroup/AvatarGroup.js 114:43
Module parse failed: Unexpected token (114:43)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     slots,
|     slotProps: {
>       surplus: slotProps.additionalAvatar ?? componentsProps?.additionalAvatar,
|       ...componentsProps,
|       ...slotProps

ERROR in ./node_modules/@mui/material/Checkbox/Checkbox.js 138:46
Module parse failed: Unexpected token (138:46)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   };
|   const classes = useUtilityClasses(ownerState);
>   const externalInputProps = slotProps.input ?? inputProps;
|   const [RootSlot, rootSlotProps] = (0, _useSlot.default)('root', {
|     ref,

ERROR in ./node_modules/@mui/material/FormControlLabel/FormControlLabel.js 141:33
Module parse failed: Unexpected token (141:33)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   } = props;
|   const muiFormControl = (0, _FormControl.useFormControl)();
>   const disabled = disabledProp ?? control.props.disabled ?? muiFormControl?.disabled;
|   const required = requiredProp ?? control.props.required;
|   const controlProps = {

ERROR in ./node_modules/@mui/material/FilledInput/FilledInput.js 141:74
Module parse failed: Unexpected token (141:74)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|       style: {
|         '&::after': {
>           borderBottom: `2px solid ${(theme.vars || theme).palette[color]?.main}`
|         }
|       }

ERROR in ./node_modules/@mui/material/ListItemText/ListItemText.js 142:34
Module parse failed: Unexpected token (142:34)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     primary = /*#__PURE__*/(0, _jsxRuntime.jsx)(PrimarySlot, {
|       variant: dense ? 'body2' : 'body1',
>       component: primarySlotProps?.variant ? undefined : 'span',
|       ...primarySlotProps,
|       children: primary

ERROR in ./node_modules/@mui/material/Radio/Radio.js 147:12
Module parse failed: Unexpected token (147:12)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     }
|   }
>   disabled ?? (disabled = false);
|   const ownerState = {
|     ...props,

ERROR in ./node_modules/@mui/utils/isMuiElement/isMuiElement.js 14:24
Module parse failed: Unexpected token (14:24)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   // relevant info - https://github.com/facebook/react/blob/2807d781a08db8e9873687fccc25c0f12b4fb3d4/packages/react/src/ReactLazy.js#L45
|   // eslint-disable-next-line no-underscore-dangle
>   element.type.muiName ?? element.type?._payload?.value?.muiName) !== -1;
| }

ERROR in ./node_modules/@mui/material/BottomNavigationAction/BottomNavigationAction.js 151:25
Module parse failed: Unexpected token (151:25)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|       ...handlers,
|       onClick: event => {
>         handlers.onClick?.(event);
|         handleChange(event);
|       }

ERROR in ./node_modules/@mui/material/TextareaAutosize/TextareaAutosize.js 151:33
Module parse failed: Unexpected token (151:33)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   (0, _useEnhancedEffect.default)(() => {
|     const debouncedHandleResize = (0, _debounce.default)(syncHeight);
>     const textarea = textareaRef?.current;
|     if (!textarea) {
|       return undefined;

ERROR in ./node_modules/@mui/system/styleFunctionSx/extendSxProp.js 15:23
Module parse failed: Unexpected token (15:23)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     otherProps: {}
|   };
>   const config = props?.theme?.unstable_sxConfig ?? _defaultSxConfig.default;
|   Object.keys(props).forEach(prop => {
|     if (config[prop]) {

ERROR in ./node_modules/@mui/material/Input/Input.js 164:37
Module parse failed: Unexpected token (164:37)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     }
|   };
>   const componentsProps = slotProps ?? componentsPropsProp ? (0, _deepmerge.default)(slotProps ?? componentsPropsProp, inputComponentsProps) : inputComponentsProps;
|   const RootSlot = slots.root ?? components.Root ?? InputRoot;
|   const InputSlot = slots.input ?? components.Input ?? InputInput;

ERROR in ./node_modules/@mui/material/AccordionSummary/AccordionSummary.js 169:25
Module parse failed: Unexpected token (169:25)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|       ...handlers,
|       onClick: event => {
>         handlers.onClick?.(event);
|         handleChange(event);
|       }

ERROR in ./node_modules/@mui/utils/useTimeout/useTimeout.js 16:12
Module parse failed: Unexpected token (16:12)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     return new Timeout();
|   }
>   currentId = null;
|
|   /**

ERROR in ./node_modules/@mui/material/Select/SelectInput.js 179:36
Module parse failed: Unexpected token (179:36)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     }
|   }, []);
>   const anchorElement = displayNode?.parentNode;
|   React.useImperativeHandle(handleRef, () => ({
|     focus: () => {

ERROR in ./node_modules/@mui/material/transitions/utils.js 17:40
Module parse failed: Unexpected token (17:40)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   } = props;
|   return {
>     duration: style.transitionDuration ?? (typeof timeout === 'number' ? timeout : timeout[options.mode] || 0),
|     easing: style.transitionTimingFunction ?? (typeof easing === 'object' ? easing[options.mode] : easing),
|     delay: style.transitionDelay

ERROR in ./node_modules/@mui/material/SpeedDialAction/SpeedDialAction.js 180:96
Module parse failed: Unexpected token (180:96)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     }
|   };
>   const [tooltipOpen, setTooltipOpen] = React.useState(externalForwardedProps.slotProps.tooltip?.open);
|   const handleTooltipClose = () => {
|     setTooltipOpen(false);

ERROR in ./node_modules/@mui/material/TablePagination/TablePagination.js 181:32
Module parse failed: Unexpected token (181:32)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   const ownerState = props;
|   const classes = useUtilityClasses(ownerState);
>   const selectProps = slotProps?.select ?? SelectProps;
|   const MenuItemComponent = selectProps.native ? 'option' : TablePaginationMenuItem;
|   let colSpan;

ERROR in ./node_modules/@mui/material/Modal/Modal.js 183:53
Module parse failed: Unexpected token (183:53)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     getSlotProps: getRootProps,
|     ownerState,
>     className: (0, _clsx.default)(className, classes?.root, !ownerState.open && ownerState.exited && classes?.hidden)
|   });
|   const [BackdropSlot, backdropProps] = (0, _useSlot.default)('backdrop', {

ERROR in ./node_modules/@mui/material/Menu/Menu.js 184:27
Module parse failed: Unexpected token (184:27)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|       onKeyDown: event => {
|         handleListKeyDown(event);
>         handlers.onKeyDown?.(event);
|       }
|     }),

ERROR in ./node_modules/@mui/utils/requirePropFactory/requirePropFactory.js 18:45
Module parse failed: Unexpected token (18:45)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   const requireProp = requiredProp => (props, propName, componentName, location, propFullName, ...args) => {
|     const propFullNameSafe = propFullName || propName;
>     const defaultTypeChecker = prevPropTypes?.[propFullNameSafe];
|     if (defaultTypeChecker) {
|       const typeCheckerResult = defaultTypeChecker(props, propName, componentName, location, propFullName, ...args);

ERROR in ./node_modules/@mui/material/internal/SwitchBase.js 190:25
Module parse failed: Unexpected token (190:25)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|       ...handlers,
|       onFocus: event => {
>         handlers.onFocus?.(event);
|         handleFocus(event);
|       },

ERROR in ./node_modules/@mui/material/ButtonBase/TouchRipple.js 195:14
Module parse failed: Unexpected token (195:14)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|       fakeElement = false // For test purposes
|     } = options;
>     if (event?.type === 'mousedown' && ignoringMouseDown.current) {
|       ignoringMouseDown.current = false;
|       return;

ERROR in ./node_modules/@mui/material/GridLegacy/GridLegacy.js 196:34
Module parse failed: Unexpected token (196:34)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|         };
|       }
>       if (zeroValueBreakpointKeys?.includes(breakpoint)) {
|         return {};
|       }

ERROR in ./node_modules/@mui/system/RtlProvider/index.js 19:18
Module parse failed: Unexpected token (19:18)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| }) {
|   return /*#__PURE__*/(0, _jsxRuntime.jsx)(RtlContext.Provider, {
>     value: value ?? true,
|     ...props
|   });

ERROR in ./node_modules/@mui/utils/getReactElementRef/getReactElementRef.js 19:19
Module parse failed: Unexpected token (19:19)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   // 'ref' is passed as prop in React 19, whereas 'ref' is directly attached to children in older versions
|   if (parseInt(React.version, 10) >= 19) {
>     return element?.props?.ref || null;
|   }
|   // @ts-expect-error element.ref is not included in the ReactElement type

ERROR in ./node_modules/@mui/material/IconButton/IconButton.js 202:49
Module parse failed: Unexpected token (202:49)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   } = props;
|   const loadingId = (0, _utils.unstable_useId)(idProp);
>   const loadingIndicator = loadingIndicatorProp ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
|     "aria-labelledby": loadingId,
|     color: "inherit",

ERROR in ./node_modules/@mui/material/StepLabel/StepLabel.js 206:64
Module parse failed: Unexpected token (206:64)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|       children: [children ? /*#__PURE__*/(0, _jsxRuntime.jsx)(LabelSlot, {
|         ...labelProps,
>         className: (0, _clsx.default)(classes.label, labelProps?.className),
|         children: children
|       }) : null, optional]

ERROR in ./node_modules/@mui/material/Snackbar/Snackbar.js 213:29
Module parse failed: Unexpected token (213:29)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|       onClickAway: (...params) => {
|         const event = params[0];
>         handlers.onClickAway?.(...params);
|         if (event?.defaultMuiPrevented) {
|           return;

ERROR in ./node_modules/@mui/material/Unstable_TrapFocus/FocusTrap.js 217:55
Module parse failed: Unexpected token (217:55)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|       // to the first/last tabbable element inside the focus trap
|       if (tabbable.length > 0) {
>         const isShiftTab = Boolean(lastKeydown.current?.shiftKey && lastKeydown.current?.key === 'Tab');
|         const focusNext = tabbable[0];
|         const focusPrevious = tabbable[tabbable.length - 1];

ERROR in ./node_modules/@mui/material/Badge/Badge.js 221:27
Module parse failed: Unexpected token (221:27)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| function getAnchorOrigin(anchorOrigin) {
|   return {
>     vertical: anchorOrigin?.vertical ?? 'top',
|     horizontal: anchorOrigin?.horizontal ?? 'right'
|   };

ERROR in ./node_modules/@mui/material/OutlinedInput/OutlinedInput.js 224:31
Module parse failed: Unexpected token (224:31)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     type
|   };
>   const RootSlot = slots.root ?? components.Root ?? OutlinedInputRoot;
|   const InputSlot = slots.input ?? components.Input ?? OutlinedInputInput;
|   const [NotchedSlot, notchedProps] = (0, _useSlot.default)('notchedOutline', {

ERROR in ./node_modules/@mui/system/sizing/sizing.js 23:37
Module parse failed: Unexpected token (23:37)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   if (props.maxWidth !== undefined && props.maxWidth !== null) {
|     const styleFromPropValue = propValue => {
>       const breakpoint = props.theme?.breakpoints?.values?.[propValue] || _breakpoints.values[propValue];
|       if (!breakpoint) {
|         return {

ERROR in ./node_modules/@mui/system/cssContainerQueries/cssContainerQueries.js 24:28
Module parse failed: Unexpected token (24:28)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   const sorted = Object.keys(css).filter(key => key.startsWith('@container')).sort((a, b) => {
|     const regex = /min-width:\s*([0-9.]+)/;
>     return +(a.match(regex)?.[1] || 0) - +(b.match(regex)?.[1] || 0);
|   });
|   if (!sorted.length) {

ERROR in ./node_modules/@mui/material/Rating/Rating.js 279:24
Module parse failed: Unexpected token (279:24)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     },
|     additionalProps: {
>       style: labelProps?.style,
|       htmlFor: id
|     }

ERROR in ./node_modules/@mui/utils/getActiveElement/getActiveElement.js 28:17
Module parse failed: Unexpected token (28:17)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| function activeElement(doc) {
|   let element = doc.activeElement;
>   while (element?.shadowRoot?.activeElement != null) {
|     element = element.shadowRoot.activeElement;
|   }

ERROR in ./node_modules/@mui/material/PaginationItem/PaginationItem.js 310:32
Module parse failed: Unexpected token (310:32)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   const externalForwardedProps = {
|     slots: {
>       previous: slots.previous ?? components.previous,
|       next: slots.next ?? components.next,
|       first: slots.first ?? components.first,

ERROR in ./node_modules/@mui/material/Popover/Popover.js 312:28
Module parse failed: Unexpected token (312:28)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|       ...handlers,
|       onEntering: (element, isAppearing) => {
>         handlers.onEntering?.(element, isAppearing);
|         handleEntering();
|       },

ERROR in ./node_modules/@mui/material/AppBar/AppBar.js 36:48
Module parse failed: Unexpected token (36:48)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| // var2 is the fallback.
| // Ex. var1: 'var(--a)', var2: 'var(--b)'; return: 'var(--a, var(--b))'
> const joinVars = (var1, var2) => var1 ? `${var1?.replace(')', '')}, ${var2})` : var2;
| const AppBarRoot = (0, _zeroStyled.styled)(_Paper.default, {
|   name: 'MuiAppBar',

ERROR in ./node_modules/@mui/utils/useSlotProps/useSlotProps.js 37:76
Module parse failed: Unexpected token (37:76)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     externalSlotProps: resolvedComponentsProps
|   });
>   const ref = (0, _useForkRef.default)(internalRef, resolvedComponentsProps?.ref, parameters.additionalProps?.ref);
|   const props = (0, _appendOwnerState.default)(elementType, {
|     ...mergedProps,

ERROR in ./node_modules/@mui/system/ThemeProvider/useLayerOrder.js 39:48
Module parse failed: Unexpected token (39:48)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     if (layerOrder) {
|       // Only insert if first child doesn't have data-mui-layer-order attribute
>       if (firstChild && firstChild.hasAttribute?.('data-mui-layer-order') && firstChild.getAttribute('data-mui-layer-order') === id) {
|         return;
|       }

ERROR in ./node_modules/@mui/material/utils/mergeSlotProps.js 40:54
Module parse failed: Unexpected token (40:54)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|         ...defaultSlotPropsValue
|       }) : externalSlotProps;
>       const className = (0, _clsx.default)(ownerState?.className, defaultSlotPropsValue?.className, externalSlotPropsValue?.className);
|       const handlers = extractHandlers(externalSlotPropsValue, defaultSlotPropsValue);
|       return {

ERROR in ./node_modules/@mui/material/SpeedDial/SpeedDial.js 410:27
Module parse failed: Unexpected token (410:27)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|       ...handlers,
|       onKeyDown: event => {
>         handlers.onKeyDown?.(event);
|         handleKeyDown(event);
|       },

ERROR in ./node_modules/@mui/material/SwipeableDrawer/SwipeableDrawer.js 415:98
Module parse failed: Unexpected token (415:98)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|       // if target != swipeArea, and target is not a child of paper ref
|       // if is a child of paper ref, and `allowSwipeInChildren` does not allow it
>       if (disableSwipeToOpen || !(nativeEvent.target === swipeAreaRef.current || paperRef.current?.contains(nativeEvent.target) && (typeof allowSwipeInChildren === 'function' ? allowSwipeInChildren(nativeEvent, swipeAreaRef.current, paperRef.current) : allowSwipeInChildren))) {
|         return;
|       }

ERROR in ./node_modules/@mui/material/ScopedCssBaseline/ScopedCssBaseline.js 41:38
Module parse failed: Unexpected token (41:38)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|       if (selector.startsWith('@')) {
|         colorSchemeStyles[selector] = {
>           colorScheme: scheme.palette?.mode
|         };
|       } else {

ERROR in ./node_modules/@mui/material/styles/createTheme.js 42:60
Module parse failed: Unexpected token (42:60)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|       light: true
|     } : undefined,
>     defaultColorScheme: initialDefaultColorScheme = palette?.mode,
|     ...other
|   } = options;

ERROR in ./node_modules/@mui/utils/useId/useId.js 45:23
Module parse failed: Unexpected token (45:23)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   if (maybeReactUseId !== undefined) {
|     const reactId = maybeReactUseId();
>     return idOverride ?? reactId;
|   }
|

ERROR in ./node_modules/@mui/utils/useForkRef/useForkRef.js 45:48
Module parse failed: Unexpected token (45:48)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     });
|     return () => {
>       cleanups.forEach(refCleanup => refCleanup?.());
|     };
|     // eslint-disable-next-line react-hooks/exhaustive-deps

ERROR in ./node_modules/@mui/system/createTheme/createTheme.js 46:13
Module parse failed: Unexpected token (46:13)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   muiTheme.unstable_sxConfig = {
|     ..._defaultSxConfig.default,
>     ...other?.unstable_sxConfig
|   };
|   muiTheme.unstable_sx = function sx(props) {

ERROR in ./node_modules/@mui/material/InputBase/InputBase.js 472:25
Module parse failed: Unexpected token (472:25)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   inputProps = {
|     ...inputProps,
>     ...(slotProps.input ?? componentsProps.input)
|   };
|   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {

ERROR in ./node_modules/@mui/material/Chip/Chip.js 488:25
Module parse failed: Unexpected token (488:25)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|       ...handlers,
|       onClick: event => {
>         handlers.onClick?.(event);
|         onClick?.(event);
|       },

ERROR in ./node_modules/@mui/material/SvgIcon/SvgIcon.js 48:32
Module parse failed: Unexpected token (48:32)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   display: 'inline-block',
|   flexShrink: 0,
>   transition: theme.transitions?.create?.('fill', {
|     duration: (theme.vars ?? theme).transitions?.duration?.shorter
|   }),

ERROR in ./node_modules/@mui/material/Tabs/Tabs.js 494:22
Module parse failed: Unexpected token (494:22)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   // with CSS improves.
|   const handleScrollbarSizeChange = React.useCallback(scrollbarWidth => {
>     scrollbarOnChange?.(scrollbarWidth);
|     setScrollerStyle({
|       overflow: null,

ERROR in ./node_modules/@mui/utils/resolveProps/resolveProps.js 49:59
Module parse failed: Unexpected token (49:59)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|         }
|       } else if (propName === 'className' && mergeClassNameAndStyle && props.className) {
>         output.className = (0, _clsx.default)(defaultProps?.className, props?.className);
|       } else if (propName === 'style' && mergeClassNameAndStyle && props.style) {
|         output.style = {

ERROR in ./node_modules/@mui/material/Button/Button.js 509:49
Module parse failed: Unexpected token (509:49)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   } = props;
|   const loadingId = (0, _utils.unstable_useId)(idProp);
>   const loadingIndicator = loadingIndicatorProp ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
|     "aria-labelledby": loadingId,
|     color: "inherit",

ERROR in ./node_modules/@mui/material/Autocomplete/Autocomplete.js 520:56
Module parse failed: Unexpected token (520:56)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     ...otherListboxProps
|   } = getListboxProps();
>   const defaultGetOptionLabel = option => option.label ?? option;
|   const getOptionLabel = getOptionLabelProp || defaultGetOptionLabel;
|

ERROR in ./node_modules/@mui/material/CssBaseline/CssBaseline.js 52:40
Module parse failed: Unexpected token (52:40)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|         colorSchemeStyles[selector] = {
|           ':root': {
>             colorScheme: scheme.palette?.mode
|           }
|         };

ERROR in ./node_modules/@mui/material/DialogTitle/DialogTitle.js 57:16
Module parse failed: Unexpected token (57:16)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     ref: ref,
|     variant: "h6",
>     id: idProp ?? titleId,
|     ...other
|   });

ERROR in ./node_modules/@mui/system/createStyled/createStyled.js 58:34
Module parse failed: Unexpected token (58:34)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     return resolvedStyle.flatMap(subStyle => processStyle(props, subStyle, layerName));
|   }
>   if (Array.isArray(resolvedStyle?.variants)) {
|     let rootStyle;
|     if (resolvedStyle.isProcessed) {

ERROR in ./node_modules/@mui/material/useLazyRipple/useLazyRipple.js 59:14
Module parse failed: Unexpected token (59:14)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     return this.mounted;
|   }
>   mountEffect = () => {
|     if (this.shouldMount && !this.didMount) {
|       if (this.ref.current !== null) {

ERROR in ./node_modules/@mui/material/Popper/Popper.js 60:30
Module parse failed: Unexpected token (60:30)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     ...other
|   } = props;
>   const RootComponent = slots?.root ?? components?.Root;
|   const otherProps = {
|     anchorEl,

ERROR in ./node_modules/@mui/system/spacing/spacing.js 61:67
Module parse failed: Unexpected token (61:67)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| const spacingKeys = [...marginKeys, ...paddingKeys];
| function createUnaryUnit(theme, themeKey, defaultValue, propName) {
>   const themeSpacing = (0, _style.getPath)(theme, themeKey, true) ?? defaultValue;
|   if (typeof themeSpacing === 'number' || typeof themeSpacing === 'string') {
|     return val => {

ERROR in ./node_modules/@mui/material/Tooltip/Tooltip.js 620:34
Module parse failed: Unexpected token (620:34)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|       }
|     }];
>     if (PopperProps.popperOptions?.modifiers) {
|       tooltipModifiers = tooltipModifiers.concat(PopperProps.popperOptions.modifiers);
|     }

ERROR in ./node_modules/@mui/material/Slider/Slider.js 642:25
Module parse failed: Unexpected token (642:25)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
|   // support both `slots` and `components` for backward compatibility
>   const RootSlot = slots?.root ?? components.Root ?? SliderRoot;
|   const RailSlot = slots?.rail ?? components.Rail ?? SliderRail;
|   const TrackSlot = slots?.track ?? components.Track ?? SliderTrack;

ERROR in ./node_modules/@mui/material/useAutocomplete/useAutocomplete.js 66:118
Module parse failed: Unexpected token (66:118)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| // Number of options to jump in list box when `Page Up` and `Page Down` keys are used.
| const pageSize = 5;
> const defaultIsActiveElementInListbox = listboxRef => listboxRef.current !== null && listboxRef.current.parentElement?.contains(document.activeElement);
| const MULTIPLE_DEFAULT_VALUE = [];
| function getInputValue(value, multiple, getOptionLabel, renderValue) {

ERROR in ./node_modules/@mui/system/cssVars/prepareCssVars.js 68:17
Module parse failed: Unexpected token (68:17)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|       rule = '[data-%s]';
|     }
>     if (selector?.startsWith('data-') && !selector.includes('%s')) {
|       // 'data-joy-color-scheme' -> '[data-joy-color-scheme="%s"]'
|       rule = `[${selector}="%s"]`;

ERROR in ./node_modules/@mui/material/Fab/Fab.js 68:83
Module parse failed: Unexpected token (68:83)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     boxShadow: (theme.vars || theme).shadows[12]
|   },
>   color: theme.vars ? theme.vars.palette.grey[900] : theme.palette.getContrastText?.(theme.palette.grey[300]),
|   backgroundColor: (theme.vars || theme).palette.grey[300],
|   '&:hover': {

ERROR in ./node_modules/@mui/material/utils/useSlot.js 71:76
Module parse failed: Unexpected token (71:76)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     externalSlotProps: resolvedComponentsProps
|   });
>   const ref = (0, _useForkRef.default)(internalRef, resolvedComponentsProps?.ref, parameters.ref);
|   const LeafComponent = name === 'root' ? slotComponent || rootComponent : slotComponent;
|   const props = (0, _appendOwnerState.default)(elementType, {

ERROR in ./node_modules/@mui/system/createTheme/applyStyles.js 73:28
Module parse failed: Unexpected token (73:28)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   const theme = this;
|   if (theme.vars) {
>     if (!theme.colorSchemes?.[key] || typeof theme.getColorSchemeSelector !== 'function') {
|       return {};
|     }

ERROR in ./node_modules/@mui/material/TablePaginationActions/TablePaginationActions.js 73:41
Module parse failed: Unexpected token (73:41)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
|   };
>   const FirstButton = slots.firstButton ?? _IconButton.default;
|   const LastButton = slots.lastButton ?? _IconButton.default;
|   const NextButton = slots.nextButton ?? _IconButton.default;

ERROR in ./node_modules/@mui/material/styles/createThemeWithVars.js 78:18
Module parse failed: Unexpected token (78:18)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|       palette: {
|         mode,
>         ...scheme?.palette
|       },
|       colorSpace

ERROR in ./node_modules/@mui/system/styleFunctionSx/styleFunctionSx.js 81:44
Module parse failed: Unexpected token (81:44)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|       return null; // Emotion & styled-components will neglect null
|     }
>     const config = theme.unstable_sxConfig ?? _defaultSxConfig.default;
|
|     /*

ERROR in ./node_modules/@mui/material/Typography/Typography.js 82:39
Module parse failed: Unexpected token (82:39)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|       color: (theme.vars || theme).palette[color].main
|     }
>   })), ...Object.entries(theme.palette?.text || {}).filter(([, value]) => typeof value === 'string').map(([color]) => ({
|     props: {
|       color: `text${(0, _capitalize.default)(color)}`

ERROR in ./node_modules/@mui/system/Grid/gridGenerator.js 84:27
Module parse failed: Unexpected token (84:27)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   };
|   (0, _traverseBreakpoints.traverseBreakpoints)(theme.breakpoints, ownerState.columns, (appendStyle, value) => {
>     const columns = value ?? 12;
|     appendStyle(styles, {
|       [selfColumnsVar]: columns,

ERROR in ./node_modules/@mui/material/TabScrollButton/TabScrollButton.js 84:55
Module parse failed: Unexpected token (84:55)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   };
|   const classes = useUtilityClasses(ownerState);
>   const StartButtonIcon = slots.StartScrollButtonIcon ?? _KeyboardArrowLeft.default;
|   const EndButtonIcon = slots.EndScrollButtonIcon ?? _KeyboardArrowRight.default;
|   const startButtonIconProps = (0, _useSlotProps.default)({

ERROR in ./node_modules/@mui/system/cssVars/createCssVarsProvider.js 92:165
Module parse failed: Unexpected token (92:165)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
|     const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
>     const defaultMode = colorSchemes[defaultLightColorScheme] && colorSchemes[defaultDarkColorScheme] ? initialMode : colorSchemes[restThemeProp.defaultColorScheme]?.palette?.mode || restThemeProp.palette?.mode;
|
|     // 1. Get the data about the `mode`, `colorScheme`, and setter functions.

ERROR in ./node_modules/@mui/material/Modal/ModalManager.js 94:31
Module parse failed: Unexpected token (94:31)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|       const parent = container.parentElement;
|       const containerWindow = (0, _ownerWindow.default)(container);
>       scrollContainer = parent?.nodeName === 'HTML' && containerWindow.getComputedStyle(parent).overflowY === 'scroll' ? parent : container;
|     }
|
ℹ ｢wdm｣: Failed to compile.

[yi-nuo426]

@copilot continue / retry.

[Copilot]

@copilot continue / retry.

The dev server now compiles successfully after updating the webpack Babel loader to transpile optional chaining/class properties in MUI dependencies. Screenshot: https://github.com/user-attachments/assets/a9bbb8ca-e674-484b-ae7f-5becbca685c9. Commit: 5d66c40.