Import from react-datepicker duplicates date-fns modules

[alexandrchebotar]

Describe the bug Because of direct import from date-fns/[module] when you import react-datepicker with es6 import you add that modules to bundle. Same time if you import something from date-fns or other library that uses date-fns, for example date-fns-tz, you add to bundle modules from date-fns/esm. As a result you duplicate some date-fns modules.

To Reproduce Steps to reproduce the behavior:

1. Import react-datepicker:

import DatePicker from "react-datepicker";

2. Import something from date-fns:

import { parseISO } from "date-fns";
import { format, utcToZonedTime } from 'date-fns-tz';

3. Make build.
4. See duplicated modules in bundle.

Expected behavior import DatePicker from "react-datepicker" should add modules from date-fns/esm/

Screenshots

Additional context React Date Picker version - 3.6.0.

[tu4mo]

This is a bug in date-fns.

[alexandrchebotar]

@tu4mo these are different issues.

[tu4mo]

@AlexandrChebotar Oh, sorry. Was looking at the wrong thing.

[himynameistimli]

@AlexandrChebotar have you found a temporary workaround to force the use of a common date-fns module?

[magiskboy]

I hope that this issue will be resolved in near future

[magiskboy]

I think rc-picker uses star import for all locales of date-fns so this leads to growing bundle size https://github.com/react-component/picker/blob/master/src/generate/dateFns.ts#L26

[gabycperezdias]

Any updates on this?

[ThenTech]

Looking through https://github.com/date-fns/date-fns/issues/2207 and verifying that treeshaking should work in my project, I think the "duplication" mentioned here is just because react-datepicker actually does import all those date-fns functions? Or am I missing something else?

Refer to the date_utils.js file where 57 functions are imported, used and re-exported in some way to be used elsewhere.