使用自定义库中MUI日期选择器时出现MUI X本地化上下文错误

问题场景 #

我正在开发一个基于React的自定义组件库，用Storybook做组件展示，采用Vite的库模式构建。在vite.config.js里，所有peerDependencies都被配置为Rollup的external依赖。库中包含一个基于MUI X Date Picker封装的日期选择器组件，但在业务项目中使用这个组件库时，出现如下错误：

Error: MUI X: Can not find the date and time pickers localization context. It looks like you forgot to wrap your component in LocalizationProvider. This can also happen if you are bundling multiple versions of the "@mui/x-date-pickers" package

我已经在项目中用LocalizationProvider包裹了自定义日期选择器，且整个项目只引入了一次@mui/x-date-pickers包：

<LocalizationProvider dateAdapter={AdapterDayjs}>
 <DatePicker />
</LocalizationProvider>

组件库配置信息 #

package.json片段 #

"type": "module",
"exports": {
 ".": {
  "types": "./dist/index.d.ts",
  "import": "./dist/my-ui.es.js",
  "require": "./dist/my-ui.umd.js"
 },
 "./dist/style.css": "./dist/style.css"
},
"main": "./dist/my-ui.umd.js",
"module": "./dist/my-ui.es.js",
"types": "./dist/index.d.ts",
"files": [
 "dist"
],
"peerDependencies": {
 "@emotion/react": "11.11.4",
 "@emotion/styled": "11.11.5",
 "@mui/base": "5.0.0-beta.40",
 "@mui/material": "5.15.20",
 "@mui/system": "5.15.20",
 "@mui/x-date-pickers": "7.7.1",
 "dayjs": "1.11.11",
 "react": "18.3.1",
 "react-dom": "18.3.1",
 "react-hook-form": "7.52.0",
 "react-router-dom": "6.23.1"
},

vite.config.js代码 #

import path from "node:path";

import react from "@vitejs/plugin-react";
import dts from "vite-plugin-dts";
import { defineConfig } from "vitest/config";

import * as packageJson from "./package.json";

export default defineConfig({
    plugins: [
        react(),
        dts({
            include: ["src/lib/"],
            exclude: ["src/**/*.stories.*", "src/**/*.test.*"],
        }),
    ],
    build: {
        lib: {
            entry: path.resolve(__dirname, "src/lib/index.ts"),
            name: "my-ui",
            formats: ["es", "umd"],
            fileName: (format) => `my-ui.${format}.js`,
        },
        rollupOptions: {
            external: Object.keys(packageJson.peerDependencies),
        },
    },
});

自定义日期选择器组件代码 #

import { Box } from "@mui/system";
// 引入该类型是为了解决构建时的类型错误：`DesktopDatePickerProps<Date> error Type 'Date' does not satisfy the constraint 'never'`
import type {} from "@mui/x-date-pickers/AdapterDayjs";
import {
    DatePicker as MuiDatePicker,
    type DatePickerProps as MuiDatePickerProps,
} from "@mui/x-date-pickers/DatePicker";
import { type Dayjs } from "dayjs";
import { type ForwardedRef } from "react";
import { forwardRef } from "react";

export interface DatePickerProps {
    muiDatePickerProps?: Omit<MuiDatePickerProps<Dayjs, false>, "label" | "value">;
}

const DatePicker = forwardRef((props: DatePickerProps, reference: ForwardedRef<typeof Box>) => {
    const {
        muiDatePickerProps,
    } = props;

    return (
        <Box ref={reference}>
            <MuiDatePicker
                {...muiDatePickerProps}
            />
        </Box>
    );
});

DatePicker.displayName = "DatePicker";

export default DatePicker;

临时解决方案 #

我找到一种临时解决方法：从package.json的peerDependencies中移除@mui/x-date-pickers，并在自定义组件内部用LocalizationProvider包裹MUI Date Picker组件：

import { Box } from "@mui/system";
import {
    LocalizationProvider,
} from "@mui/x-date-pickers";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import {
    DatePicker as MuiDatePicker,
    type DatePickerProps as MuiDatePickerProps,
} from "@mui/x-date-pickers/DatePicker";
import  { type Dayjs } from "dayjs";
import { type ForwardedRef} from "react";
import { forwardRef } from "react";


export interface DatePickerProps {
    muiDatePickerProps?: Omit<MuiDatePickerProps<Dayjs, false>, "label" | "value">;
}

const DatePicker = forwardRef((props: DatePickerProps, reference: ForwardedRef<typeof Box>) => {
    const {
        muiDatePickerProps,
    } = props;

    return (
        <Box ref={reference}>
            <LocalizationProvider dateAdapter={AdapterDayjs}>
                <MuiDatePicker
                    {...muiDatePickerProps}
                />
            </LocalizationProvider>
        </Box>
    );
});

DatePicker.displayName = "DatePicker";

export default DatePicker;

疑问 #

有没有人遇到过相同问题并知道更优的解决方案？或者还有其他需要考虑的因素？

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