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.

[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 date-fns/date-fns#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.