[DateRangePicker] v5.alpha.25 rollup build error

[michael-land]

Rollup build raise exception.

Error: Build failed with 1 error:
node_modules/@material-ui/lab/DateRangePicker/DateRangePickerViewDesktop.js:8:29: error: No matching export for import "DateRangePickerDayProps"

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

https://unpkg.com/@material-ui/lab@5.0.0-alpha.25/DateRangePicker/DateRangePickerViewDesktop.js

Expected Behavior 🤔

DateRangePickerDayProps should not appear in js file, use type import instead?

Your Environment 🌎

`npx @material-ui/envinfo`

System:
OS: macOS 10.15.6
Binaries:
Node: 14.7.0 - /var/folders/7w/t3q6v18575b1rncctdm639040000gn/T/fnm-shell-3712643/bin/node
Yarn: 1.22.10 - /usr/local/bin/yarn
npm: 6.14.7 - /var/folders/7w/t3q6v18575b1rncctdm639040000gn/T/fnm-shell-3712643/bin/npm
Browsers:
Chrome: 88.0.4324.150
Edge: Not Found
Firefox: 84.0.2
Safari: 14.0
npmPackages:
@emotion/react: 11.1.5 => 11.1.5
@emotion/styled: 11.1.5 => 11.1.5
@material-ui/core: 5.0.0-alpha.25 => 5.0.0-alpha.25
@material-ui/icons: 5.0.0-alpha.24 => 5.0.0-alpha.24
@material-ui/lab: 5.0.0-alpha.25 => 5.0.0-alpha.25
@material-ui/styled-engine: 5.0.0-alpha.25
@material-ui/styles: 5.0.0-alpha.25
@material-ui/system: 5.0.0-alpha.25
@material-ui/types: 5.1.7
@material-ui/unstyled: 5.0.0-alpha.25
@material-ui/utils: 5.0.0-alpha.25
@types/react: 17.0.1 => 17.0.1
react: 17.0.1 => 17.0.1
react-dom: 17.0.1 => 17.0.1
typescript: 4.1.5 => 4.1.5

  Don't forget to mention which browser you used.
  Output from `npx @material-ui/envinfo` goes here.

[oliviertassinari]

@xiaoyu-tamu Interesting, thanks for raising. I have broken it in #24621. It might actually be a bug with @babel/preset-typescript. However, I also think that the current source is wrong. We don't spread an upper case variable to an element:

https://github.com/mui-org/material-ui/blob/9abcfc1c6df384109268f93db221db1a7da26112/packages/material-ui-lab/src/DateRangePicker/DateRangePickerViewDesktop.tsx#L32

I would start with this fix:

diff --git a/packages/material-ui-lab/src/DateRangePicker/DateRangePickerViewDesktop.tsx b/packages/material-ui-lab/src/DateRangePicker/DateRangePickerViewDesktop.tsx
index 1014d71fa5..0ed440c98e 100644
--- a/packages/material-ui-lab/src/DateRangePicker/DateRangePickerViewDesktop.tsx
+++ b/packages/material-ui-lab/src/DateRangePicker/DateRangePickerViewDesktop.tsx
@@ -29,9 +29,9 @@ export interface ExportedDesktopDateRangeCalendarProps<TDate> {
   calendars?: 1 | 2 | 3;
   /**
    * Custom renderer for `<DateRangePicker />` days. @DateIOType
-   * @example (date, DateRangePickerDayProps) => <DateRangePickerDay {...DateRangePickerDayProps} />
+   * @example (date, dateRangePickerDayProps) => <DateRangePickerDay {...dateRangePickerDayProps} />
    */
-  renderDay?: (date: TDate, DateRangePickerDayProps: DateRangePickerDayProps<TDate>) => JSX.Element;
+  renderDay?: (date: TDate, dateRangePickerDayProps: DateRangePickerDayProps<TDate>) => JSX.Element;
 }

 interface DesktopDateRangeCalendarProps<TDate>

apply it everywhere and normalize the same pattern with the date picker:

diff --git a/docs/src/pages/components/date-picker/CustomDay.tsx b/docs/src/pages/components/date-picker/CustomDay.tsx
index df041d3bbd..209a644f17 100644
--- a/docs/src/pages/components/date-picker/CustomDay.tsx
+++ b/docs/src/pages/components/date-picker/CustomDay.tsx
@@ -37,10 +37,10 @@ export default function CustomDay() {
   const renderWeekPickerDay = (
     date: Date,
     _selectedDates: Date[],
-    PickersDayComponentProps: PickersDayProps<Date>,
+    pickersDayProps: PickersDayProps<Date>,
   ) => {
     if (!value) {
-      return <PickersDay {...PickersDayComponentProps} />;
+      return <PickersDay {...pickersDayProps} />;
     }

     const start = startOfWeek(value);
@@ -52,7 +52,7 @@ export default function CustomDay() {

     return (
       <PickersDay
-        {...PickersDayComponentProps}
+        {...pickersDayProps}
         disableMargin
         className={clsx({
           [classes.highlight]: dayIsBetween,
diff --git a/packages/material-ui-lab/src/DateRangePicker/DateRangePickerViewDesktop.tsx b/packages/material-ui-lab/src/DateRangePicker/DateRangePickerViewDesktop.tsx
index 1014d71fa5..0ed440c98e 100644
--- a/packages/material-ui-lab/src/DateRangePicker/DateRangePickerViewDesktop.tsx
+++ b/packages/material-ui-lab/src/DateRangePicker/DateRangePickerViewDesktop.tsx
@@ -29,9 +29,9 @@ export interface ExportedDesktopDateRangeCalendarProps<TDate> {
   calendars?: 1 | 2 | 3;
   /**
    * Custom renderer for `<DateRangePicker />` days. @DateIOType
-   * @example (date, DateRangePickerDayProps) => <DateRangePickerDay {...DateRangePickerDayProps} />
+   * @example (date, dateRangePickerDayProps) => <DateRangePickerDay {...dateRangePickerDayProps} />
    */
-  renderDay?: (date: TDate, DateRangePickerDayProps: DateRangePickerDayProps<TDate>) => JSX.Element;
+  renderDay?: (date: TDate, dateRangePickerDayProps: DateRangePickerDayProps<TDate>) => JSX.Element;
 }

 interface DesktopDateRangeCalendarProps<TDate>
diff --git a/packages/material-ui-lab/src/DayPicker/PickersCalendar.tsx b/packages/material-ui-lab/src/DayPicker/PickersCalendar.tsx
index 277885f131..69d17a33ee 100644
--- a/packages/material-ui-lab/src/DayPicker/PickersCalendar.tsx
+++ b/packages/material-ui-lab/src/DayPicker/PickersCalendar.tsx
@@ -25,7 +25,7 @@ export interface ExportedCalendarProps<TDate>
   renderDay?: (
     day: TDate,
     selectedDates: Array<TDate | null>,
-    DayComponentProps: PickersDayProps<TDate>,
+    pickersDayProps: PickersDayProps<TDate>,
   ) => JSX.Element;
   /**
    * Enables keyboard listener for moving between days in calendar.
@@ -195,7 +195,7 @@ function PickersCalendar<TDate>(props: PickersCalendarProps<TDate> & WithStyles<
             {utils.getWeekArray(currentMonth).map((week) => (
               <div role="row" key={`week-${week[0]}`} className={classes.week}>
                 {week.map((day) => {
-                  const dayProps: PickersDayProps<TDate> = {
+                  const pickersDayProps: PickersDayProps<TDate> = {
                     key: (day as any)?.toString(),
                     day,
                     isAnimating: isMonthSwitchingAnimating,
@@ -222,10 +222,10 @@ function PickersCalendar<TDate>(props: PickersCalendarProps<TDate> & WithStyles<
                   };

                   return renderDay ? (
-                    renderDay(day, selectedDates, dayProps)
+                    renderDay(day, selectedDates, pickersDayProps)
                   ) : (
-                    <div role="cell" key={dayProps.key}>
-                      <PickersDay {...dayProps} />
+                    <div role="cell" key={pickersDayProps.key}>
+                      <PickersDay {...pickersDayProps} />
                     </div>
                   );
                 })}
diff --git a/packages/material-ui-lab/src/MobileDatePicker/MobileDatePicker.test.tsx b/packages/material-ui-lab/src/MobileDatePicker/MobileDatePicker
.test.tsx
index d0352a066c..bb0af3c5c4 100644
--- a/packages/material-ui-lab/src/MobileDatePicker/MobileDatePicker.test.tsx
+++ b/packages/material-ui-lab/src/MobileDatePicker/MobileDatePicker.test.tsx
@@ -244,8 +244,8 @@ describe('<MobileDatePicker />', () => {
         open
         value={adapterToUse.date('2018-01-01T00:00:00.000')}
         onChange={() => {}}
-        renderDay={(day, _selected, DayComponentProps) => (
-          <PickersDay {...DayComponentProps} data-testid="test-day" />
+        renderDay={(day, _selected, pickersDayProps) => (
+          <PickersDay {...pickersDayProps} data-testid="test-day" />
         )}
       />,
     );

For the long term:

• I think that renderDay shouldn't be a render function but a regular slot inside the components prop.
• We could report the bug inside Babel but I'm not sure it will be worth our time. It's the first time and only we face this issue. I'm also glad it failed, so we could fix the argument name.

[callmeberzerker]

I've tried to address your points @oliviertassinari in the PR. If you have any remarks please tell me. Thanks!