引入@mui/x-date-pickers遇useSyncExternalStore未找到错误求助

问题原因 #

当前使用的@mui/x-date-pickers版本依赖React 18新增的useSyncExternalStore Hook，但React 17并没有内置这个API，导致导入失败。

解决方案 #

方案1：降级@mui/x-date-pickers到兼容React 17的版本

@mui/x-date-pickers v6及以上版本要求React 18，而v5.x系列完全支持React 17。执行以下命令安装兼容版本：

# npm
npm install @mui/x-date-pickers@^5.0.0

# yarn
yarn add @mui/x-date-pickers@^5.0.0

注意：安装后需确保项目中@mui/material、@emotion/react、@emotion/styled等依赖的版本与@mui/x-date-pickers v5匹配，避免版本冲突。

方案2：添加useSyncExternalStore polyfill（不降级包）

如果不想降级组件版本，可以通过polyfill补全React 17缺失的API：

1. 安装polyfill包：

# npm
npm install use-sync-external-store

# yarn
yarn add use-sync-external-store

2. 在项目入口文件（如src/index.js或src/main.jsx）的最顶部导入polyfill：

import 'use-sync-external-store/shim';

额外注意事项（针对v5版本） #

使用@mui/x-date-pickers v5时，需要手动配置日期适配器，比如选择date-fns作为适配库：

1. 安装依赖：

npm install @mui/x-date-pickers/AdapterDateFns date-fns@^2.0.0

2. 在组件中使用时包裹LocalizationProvider：

import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { useState } from 'react';

function MyDatePicker() {
  const [value, setValue] = useState(null);
  
  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DatePicker label="选择日期" value={value} onChange={setValue} />
    </LocalizationProvider>
  );
}

内容的提问来源于stack exchange，提问作者user23417605