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.

[ghost]

A re-porduction link or repo will be better

[antony]

I get the same issue. I think it might be related to this: #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 fixes 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.

[hitautodestruct]

If anyone is having a similar issue with node I just had to add the extension to the utc import.
My project is vanilla js and it kept trying to import the typescript version of the utc plugin.

I'm running nodejs 14.x

TL;DR

import dayjs from "dayjs";
import utc from "dayjs/plugin/utc.js"; // <------ Notice the .js

dayjs.extend(utc)

[NoelBaron]

If anyone is having a similar issue with node I just had to add the extension to the utc import.
My project is vanilla js and it kept trying to import the typescript version of the utc plugin.

I'm running nodejs 14.x

TL;DR

import dayjs from "dayjs";
import utc from "dayjs/plugin/utc.js"; // <------ Notice the .js

dayjs.extend(utc)

This is the correct answer for node

[Mhorvilleur13]

How can I export dayjs.extend(isToday)? Sorry I am a beginner and I am trying to export isToday() to multiple files.

[yonario]

How can I export dayjs.extend(isToday)? Sorry I am a beginner and I am trying to export isToday() to multiple files.

Try stack overflow. Your question is off topic.

[alexkuc]

For me, I was able to get this working with the following:

import dayjs from 'dayjs'

With TypeScript version 4.6.4 and DayJS version 1.11.3.

I use Vite with the following TypeScript config:

...
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
...