Dayjs: Issue when using esm import

[ngohungphuc]

Describe the bug
A clear and concise description of what the bug is.
So I have two issue when using "dayjs": "1.8.14"

The first one if I'm using import like this

import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
import LocalizedFormat from "dayjs/plugin/localizedFormat";

dayjs.utc(lockedAt).locale(localize) .format("lll");

My code is working perfectly fine but angular Cli will throw error
Module "node_modules/dayjs/index" has no default export.

Then I change my code to
import dayjs from "dayjs/esm"; import utc from "dayjs/esm/plugin/utc"; import LocalizedFormat from "dayjs/esm/plugin/localizedFormat";

Then the angular cli not throw any error but the code is not working and I have this error

Cannot read property 'formats' of undefined

What have i done wrong.

[xxyuk]

A re-porduction link or repo will be better

[antony]

I get the same issue. I think it might be related to this: https://github.com/iamkun/dayjs/issues/598

[BingeCode]

Also still having issues with the plugin imports in angular project.
I can use most dayjs functions just fine with import * as dayjs from 'dayjs'.

But when I need to use plugins, I import with import * as weekday from 'dayjs/plugin/weekday, it throws me this error in the browser - even though the compiler recognises the function weekday just fine:

dayjs__WEBPACK_IMPORTED_MODULE_5__(...).month(...).startOf(...).weekday is not a function

I've tried multiple variations of the import statements, but none have seemed to work. I would love to switch from moment.js to dayjs, but I won't be able to use this package until I can use the plugin functions.

[muuvmuuv]

I got the same issue with localization. At the very beginning of my GatsbyJS site I do:

const dayjs = require('dayjs')
require('dayjs/locale/de')
dayjs.locale('de')

Inside my react script I tried these two:

import dayjs from 'dayjs'

const date = new window.Date()
console.log(date) // Tue Oct 01 2019 00:00:00 GMT+0200 (Mitteleuropäische Sommerzeit)
console.log(dayjs(date)) // {$L: "en", $d: Tue Oct 01 2019 00:00:00 GMT+0200 (Mitteleuropäische Sommerzeit), $y: 2019, $M: 9, $D: 1, …}
console.log(dayjs(date).format()) // 2019-10-01T00:00:00+02:00
console.log(dayjs(date).format('LL')) // LL
console.log(dayjs(date).locale('de')) // {$L: "de", $d: Tue Oct 01 2019 00:00:00 GMT+0200 (Mitteleuropäische Sommerzeit), $y: 2019, $M: 9, $D: 1, …}
console.log(dayjs(date).format('LL')) // LL
console.log(dayjs(date).locale('de').format('LL')) // LL

This just outputs LL as a string, no date formatting. When I use dayjs/esm I get an error that the var weekdays is not set.

[ngohungphuc]

Solve by using "dayjs": "^1.8.16"

Add this in tsconfig.json

"allowSyntheticDefaultImports": true,

And use like this

import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
import LocalizedFormat from "dayjs/plugin/localizedFormat";

dayjs.extend(LocalizedFormat);
dayjs.extend(utc);

[revelt]

for posterity, for non-TS setups, if calling the extend (like dayjs.extend(advancedFormat)) breaks your app, the dayjs has to be excluded from webpack externals

[vittoriozamboni]

Got the same issue when using import * as dayjs from 'dayjs'; (non-TS). Using import dayjs from 'dayjs'; solved the issue for me, while keeping dayjs in webpack's externals.

[keul]

For posterity: I have the same issue and none of the fix above worked.

import dayjs from 'dayjs';
import durationPlugin from 'dayjs/plugin/duration';
dayjs.extend(durationPlugin);

In my environment I'm adding dayjs and registering a plugin inside a webpack chunk (so inside a submodule loaded using code splitting).

No way to make it work, I was forced to move the registration in the main chunk.