MUI X DateRangePicker：不提供名为"DateRange"的导出

Question

大家好，

我对MUI X包有一个问题，特别是DateRangePicker。关于DateRangePicker的文档有点不清楚，我无法自己解决这个问题。它抛出如下错误:

Uncaught SyntaxError: The requested module @mui_x-date-pickers-pro_DateRangePicker.js' does not provide an export named 'DateRange'

听起来很公平，模块不会导出它。但是，看看这里由MUI提供的示例，实现是相同的。包括所需的和已安装的包;

import { DateRangePicker, DateRange } from '@mui/x-date-pickers-pro/DateRangePicker';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
const [value, setValue] = React.useState<DateRange<Date>>([null, null]);
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DateRangePicker
startText="Check-in"
endText="Check-out"
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={(startProps, endProps) => (
<React.Fragment>
<TextField {...startProps} />
<Box sx={{ mx: 2 }}> to </Box>
<TextField {...endProps} />
</React.Fragment>
)}
/>
</LocalizationProvider>

下面是我的package.json;

"@mui/x-date-pickers": "latest",
"@mui/x-date-pickers-pro": "latest",
"@types/react": "latest",
"@types/react-dom": "latest",
"date-fns": "latest",
"@types/react": "latest",
"@types/react-dom": "latest",

但是这个问题仍然存在。我不知道为什么，因为它遵循文档和确切的示例。然而，我不能让它工作。我在一个单独的项目中尝试了它，得到了相同的结果。我忽略了什么?

Answer 1

似乎文档在这一点上是不正确的。从@mui/x-date-date-picker-pro导出日期范围

import { DateRange } from "@mui/x-date-pickers-pro"

另一个示例如下:

import * as React from 'react';
import dayjs, { Dayjs } from 'dayjs';
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateRangeCalendar } from '@mui/x-date-pickers-pro/DateRangeCalendar';
import { DateRange } from '@mui/x-date-pickers-pro';
export default function DateRangeCalendarValue() {
const [value, setValue] = React.useState<DateRange<Dayjs>>([
dayjs('2022-04-17'),
dayjs('2022-04-21'),
]);
return (
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DemoContainer components={['DateRangeCalendar', 'DateRangeCalendar']}>
<DemoItem label="Uncontrolled calendar">
<DateRangeCalendar
defaultValue={[dayjs('2022-04-17'), dayjs('2022-04-21')]}
/>
</DemoItem>
<DemoItem label="Controlled calendar">
<DateRangeCalendar
value={value}
onChange={(newValue) => setValue(newValue)}
/>
</DemoItem>
</DemoContainer>
</LocalizationProvider>
);
}

Answer 2

您需要安装:

npm install @mui/lab

如何导入:

import DateRangePicker from '@mui/lab/DateRangePicker';

Answer 3

npm I @mui/x-date-pickers

尝试安装这个包。