I’m working on a React project that utilizes a custom component library. This library is showcased using Storybook and built with Vite in its Library Mode.

In the vite.config.js all peerDependencies are defined as rollupOptions external. Within this library, there’s a Date Picker component that leverages the MUI X Date Picker. However, I encounter an error when trying to use this library in my project:

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

The custom date picker component is encapsulated within a LocalizationProvider and the @mui/x-date-pickers package is included just once in the entire project.

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

snippet of 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: "cc-ui",
            formats: ["es", "umd"],
            fileName: (format) => `cc-ui.${format}.js`,
        },
        rollupOptions: {
            external: Object.keys(packageJson.peerDependencies),
        },
    },
});

Example custom component

import { Box } from "@mui/system";
// import necessary because build process runs into `DesktopDatePickerProps<Date> error Type 'Date' does not satisfy the constraint 'never'`
// https://mui.com/x/react-date-pickers/base-concepts/#typing-of-the-date
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;

Has anyone had the same problem and may know a solution or is there something else I need to consider?

If the Custom Date Picker is wrapped with the LocalizationProvider, the component works. It seems that the reference to the package @mui/x-date-pickers is set incorrectly.