Version 1.11.10 - dayjs_esm__webpack_imported_module_0__.default)(...).utc is not a function

[Gnyblast]

Describe the bug
I was using Dayjs in my angular projects and I was having "dayjs": "1.11.8" which was working OK with my previous projects since I was having "allowSyntheticDefaultImports": true. A new project I created suddently I started to get error below:

dayjs_esm__webpack_imported_module_0__.default)(...).utc is not a function

I spent significant amount of time comparing the following files between the projects that works and new project that does not:

• package.json
• angular.json
• app.module.ts
• tsconfig.josn
• tsconfig.app.json

and everything was exactly the same. I tried removing node_modules and package.lock.json then run npm install but that also didn't help.

The last resort I tried npm list | grep dayjs then I found out that they are using two different minor versions since I was having ^ at the beginning of the dependency version declaration of package.json

I tried to search and not create a ticket if this was raised but couldn't find anything. Is this expected to work like that? If yes, in order to stick with the latest version what should be done?

I'm using "allowSyntheticDefaultImports": true in my tsconfig.json and importing like import * as dayjs from 'dayjs'

I tried using "esModuleInterop": true and also tried importing like import dayjs from 'dayjs' but nothing was helpful.

Expected behavior
v1.11.8 -> with "allowSyntheticDefaultImports": true works as import * as dayjs from 'dayjs'
v1.11.10 -> with "allowSyntheticDefaultImports": true does not work as import * as dayjs from 'dayjs'

Information

• Day.js Version [e.g. v1.11.10]
• OS: Ubuntu 22.04
• Browser Chrome Version 122.0.6261.128 (Official Build) (64-bit)
• Time zone: GMT+03:00

[ikeyan]

@Gnyblast the value of dayjs_esm__webpack_imported_module_0__.default)(...) part is a dayjs instance, so the error message means the dayjs instance has no utc method.

From the doc https://day.js.org/docs/en/plugin/utc you have to run the following code or something like that to enable utc method.

// rewritten from require to import syntax
import utc from 'dayjs/plugin/utc';
dayjs.extend(utc);

Typescript thinks there's utc method probably because there's that import statement somewhere in the project, which adds the utc method at type level, but you have to call the dayjs.extend function before using the utc method.