dayjs.extend() and dayjs.locale() result in an error when dayjs is imported from ESM bundle

[hakimio]

Describe the bug

Extending with plugins and setting locale doesn't seem to work when using ESM bundle.
Following code produces following errors when used in Angular Typescript project.

import * as dayjs from 'dayjs/esm';
import 'dayjs/esm/locale/en-gb';
import * as customParseFormat from 'dayjs/esm/plugin/customParseFormat';

dayjs.locale('en-gb');
dayjs.extend(customParseFormat);

"export 'extend' (imported as 'dayjs') was not found in 'dayjs/esm'
"export 'locale' (imported as 'dayjs') was not found in 'dayjs/esm'

The code above works fine when importing directly from dayjs instead of dayjs/esm.

Information

• Day.js Version 1.9.6
• Angular v10

[iamkun]

try import dayjs from 'dayjs/esm';

[hakimio]

Then I get the following error:

TS1259: Module '"dayjs/esm/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flag  index.d.ts(3, 1): 
This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.

And no, I don't want to change TS config.

Also, as I have mentioned before, doing import * as dayjs from 'dayjs' instead of import * as dayjs from 'dayjs/esm' works as expected.

[iamkun]

This is a conflict between our es export vs ts export and seems there no way to fix this until we make a breaking change release to make it export the same behavior.

[hakimio]

Do you plan to release v2 with these changes anytime soon?

[iamkun]

Well, at present no plan I am afraid.

[hakimio]

That's unfortunate. This bug makes ES bundle unusable.
Maybe instead of having both commonJS and ES bundles in the same npm package, you could split them. Let's say dayjs and dayjs-esm package for those who need it?

[iamkun]

Seems a nice choice. We'll think about that.

[shayke]

Now in 1.10.0 due to #313
These imports don't work anymore since ESM is used by default:

import * as dayjs from 'dayjs/esm';
import 'dayjs/esm/locale/en-gb';
import * as customParseFormat from 'dayjs/esm/plugin/customParseFormat';

For now i've added an alias in my webpack config if anyone is interested as a workaround:
'dayjs$': path.resolve(path.join(__dirname, 'node_modules/dayjs/dayjs.min.js')),

[danielo515]

I'm using version 1.11.4 and it is very unreliable. Many times I get this type error when extending dayJs with relativeDate. The worst thing is that the error is not predictable, happens from time to time, and refreshing the page one or more times usually fixes it, which is very inconvenient.
I was importing them like import dayjs from 'dayjs' and the same for the relativeDate plugin. I'm now importing them like this:

import dayjs from 'dayjs/esm';
import relativeDate from 'dayjs/esm/plugin/relativeTime';

Let's see if that fixes the issue.

[philipimperato]

Any fix to this?

[hakimio]

@philipimperato v2 which is in alpha stage: #1281

[liziwork]

import relativeTime from 'dayjs/esm/plugin/relativeTime';
import zhCN from 'dayjs/locale/zh-cn';
import dayjs from 'dayjs/esm';

dayjs.locale(zhCN);
dayjs.extend(relativeTime);

export default dayjs;