dayjs

dayjs copied to clipboard

We want to make some changes to make Day.js modern and in a standard JS way.

And this would be a breaking change because of these changes below:

Make TypeScript definition the same behavior as JS code

Update types/index.d.ts to export default dayjs;

Mark the correct ES6 Module entry

Update package.json "module" to "esm/index", (won't introduce in "dayjs", see https://github.com/iamkun/dayjs/issues/1281#issuecomment-754381268)

Publish a new NPM package, maybe "dayjs-esm" to ship an ESM module with package.json module entry pointed to. ref https://github.com/iamkun/dayjs/issues/1242#issuecomment-734321931

I currently have some problem with 2. update TS definition.

In the current Day.js, while we import some plugin like isLeapYear, it will update the TS definition to add a new method .isLeapYear, so that TS could know that dayjs().isLeapYear is corrent.

checking this: https://github.com/iamkun/dayjs/blob/dev/types/plugin/isLeapYear.d.ts

However, after I changing types/index.d.ts to export default dayjs, the above code does not work at all.

I don't know TS much and need some help, pls.✋🏼

I currently have some problem with 2. update TS definition.

In the current Day.js, while we import some plugin like isLeapYear, it will update the TS definition to add a new method .isLeapYear, so that TS could know that dayjs().isLeapYear is corrent.

checking this: https://github.com/iamkun/dayjs/blob/dev/types/plugin/isLeapYear.d.ts

However, after I changing types/index.d.ts to export default dayjs, the above code does not work at all.

I don't know TS much and need some help, pls.✋🏼

Because the original type definitions use Named Exports (via export =) so everything in the dayjs namespace can be imported.

For Default Exports, it's needed to import by import default from because there only have one export. TS has no extra magic on ES Modules, just share its concept.

I wanna point out, the recent typescript changes done in 1.10 actually broke in my project with the way that it was documented online on how to install/use dayjs in angular

import * as updateLocale from 'dayjs/plugin/updateLocale'
import * as relativeTime from 'dayjs/plugin/relativeTime'
import * as LocalizedFormat from 'dayjs/plugin/localizedFormat'
import * as dayjs from 'dayjs'
dayjs.extend(LocalizedFormat)
dayjs.extend(relativeTime)
dayjs.extend(updateLocale)
dayjs.locale('is')

Error: "export 'extend' (imported as 'dayjs') was not found in 'dayjs'

So there already has been breaking changes, especially with usage on typescript so might as well just push these changes over since people are gonna have to update their projects

@TheThing said to hear this, however, seems in 1.10.x there's no typescript change as far as I cloud tell.

I wanna point out, the recent typescript changes done in 1.10 actually broke in my project with the way that it was documented online on how to install/use dayjs in angular

import * as updateLocale from 'dayjs/plugin/updateLocale'
import * as relativeTime from 'dayjs/plugin/relativeTime'
import * as LocalizedFormat from 'dayjs/plugin/localizedFormat'
import * as dayjs from 'dayjs'
dayjs.extend(LocalizedFormat)
dayjs.extend(relativeTime)
dayjs.extend(updateLocale)
dayjs.locale('is')

Error: "export 'extend' (imported as 'dayjs') was not found in 'dayjs'

So there already has been breaking changes, especially with usage on typescript so might as well just push these changes over since people are gonna have to update their projects

@TheThing I have the same issue. did you fixed yours? How?

I tried something like this:

import dayjs, { extend } from 'dayjs'

I wanna point out, the recent typescript changes done in 1.10 actually broke in my project with the way that it was documented online on how to install/use dayjs in angular

import * as updateLocale from 'dayjs/plugin/updateLocale'
import * as relativeTime from 'dayjs/plugin/relativeTime'
import * as LocalizedFormat from 'dayjs/plugin/localizedFormat'
import * as dayjs from 'dayjs'
dayjs.extend(LocalizedFormat)
dayjs.extend(relativeTime)
dayjs.extend(updateLocale)
dayjs.locale('is')

Error: "export 'extend' (imported as 'dayjs') was not found in 'dayjs' So there already has been breaking changes, especially with usage on typescript so might as well just push these changes over since people are gonna have to update their projects

@TheThing I have the same issue. did you fixed yours? How?

I tried something like this:

import dayjs, { extend } from 'dayjs'

I just made the version in package.json hard value to the last known working version: 1.9.7 like so: "dayjs": "1.9.7",

If dayjs is gonna add breaking changes without increasing their major version, I might as well just lock the version :)

@TheThing said to hear this, however, seems in 1.10.x there's no typescript change as far as I cloud tell.

According to 1.10.0 logs this was changed:

• add ES6 Module Support, package.json module point to "esm/index.js" (#1298) (f63375d), closes #598 #313

I jsut assumed that broke previous old typescript loading

@TheThing said to hear this, however, seems in 1.10.x there's no typescript change as far as I cloud tell.

According to 1.10.0 logs this was changed:

• add ES6 Module Support, package.json module point to "esm/index.js" (#1298) (f63375d), closes #598 #313

I jsut assumed that broke previous old typescript loading

@TheThing Sorry for the inconvenience.

This must be an unexpected change. But this still confused me, why a esm update leads to a typescript error. I'll need some time to check this out.

@TheThing said to hear this, however, seems in 1.10.x there's no typescript change as far as I cloud tell.

According to 1.10.0 logs this was changed:

• add ES6 Module Support, package.json module point to "esm/index.js" (#1298) (f63375d), closes #598 #313

I jsut assumed that broke previous old typescript loading

@TheThing Sorry for the inconvenience.

This must be an unexpected change. But this still confused me, why a esm update leads to a typescript error. I'll need some time to check this out.

lol, it was slightly annoying to find out my build was failling but what can you do :b

Also I ran a few tests and you are right, the problem is weird but it might have something to do with module detection and/or babel in angular where at least I am using it.

Comparing the output of this in node:

import * as dayjs from 'dayjs'

console.log(dayjs)

between both versions provide identical output:

PS D:\NFP\nfp\kisildalur> npm install [email protected]
PS D:\NFP\nfp\kisildalur> node test.mjs
(node:4284) ExperimentalWarning: The ESM module loader is experimental.
[Module] {
  default: [Function: v] {
    extend: [Function (anonymous)],
    locale: [Function: D],
    isDayjs: [Function: m],
    unix: [Function (anonymous)],
    en: { name: 'en', weekdays: [Array], months: [Array] },
    Ls: { en: [Object] },
    p: {}
  }
}
PS D:\NFP\nfp\kisildalur> npm install [email protected]
PS D:\NFP\nfp\kisildalur> node test.mjs
(node:14660) ExperimentalWarning: The ESM module loader is experimental.
[Module] {
  default: [Function: v] {
    extend: [Function (anonymous)],
    locale: [Function: D],
    isDayjs: [Function: m],
    unix: [Function (anonymous)],
    en: { name: 'en', weekdays: [Array], months: [Array] },
    Ls: { en: [Object] },
    p: {}
  }
}

However when running angular run or angular build, it will fail when 1.10.1 is installed:

import * as updateLocale from 'dayjs/plugin/updateLocale'
import * as relativeTime from 'dayjs/plugin/relativeTime'
import * as LocalizedFormat from 'dayjs/plugin/localizedFormat'
import * as dayjs from 'dayjs'
dayjs.extend(LocalizedFormat)
dayjs.extend(relativeTime)
dayjs.extend(updateLocale)
dayjs.locale('is')

ERROR in ./app/app/app.module.ts 98:0-12
"export 'extend' (imported as 'dayjs') was not found in 'dayjs'
"export 'extend' (imported as 'dayjs') was not found in 'dayjs'
ERROR in ./app/app/app.module.ts 100:0-12
ERROR in ./app/app/app.module.ts 101:0-12
"export 'locale' (imported as 'dayjs') was not found in 'dayjs'
ERROR in ./app/app/app.module.ts 102:0-18
"export 'updateLocale' (imported as 'dayjs') was not found in 'dayjs'

so I decided to check the output of both from the angular build by doing something like this and checking the output in browser as opposed to in node like I did previously:

import * as dayjs from 'dayjs'
console.log(dayjs)

That's when we get a difference:

More fun facts.

This doesn't work in 1.10.1 in angular:

import dayjs from 'dayjs'

ERROR in app/app/app.module.ts:16:8 - error TS1259: Module '"D:/NFP/nfp/kisildalur/node_modules/dayjs/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flag

16 import dayjs from 'dayjs'
          ~~~~~

  node_modules/dayjs/index.d.ts:3:1
    3 export = dayjs;
      ~~~~~~~~~~~~~~~
    This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.

However this will make it work

import * as inbetweener from 'dayjs'
let stupidtypescript:any = inbetweener
const dayjs = stupidtypescript.default
dayjs.extend(LocalizedFormat)
dayjs.extend(relativeTime)
dayjs.extend(updateLocale)
dayjs.locale('is')

lol

@bboydflo this is how you fix that stupid error xD

This change in 1.10.1 add ES6 Module Support, package.json module point to "esm/index.js" (#1298) (f63375d)

really has an unexpected breaking change, and that's of course not what we want.

I am planning to revert this change in the next release 1.10.2 and delete the "module" entry.

Besides, maybe there's no need for Day.js to support ESM bundle, this would only introduce some conflict but no benefits in the tree shaking. A better way might be a separate npm package (like "dayjs-esm") to ship an ESM package.

1.10.2 has reverted the bc, tested ok on my side

Just released v1.10.2 to revert the esm module entry.

Let leave this breaking change to v2.0.0

@iamkun the issue discussed here is the same I have reported at the end of November: https://github.com/iamkun/dayjs/issues/1242 I imagine it's an issue with TypeScript definitions in the ESM bundle. Maybe you should ask some TS experts for help you with the definitions? Anyway, ESM bundle with proper tree-shaking is pretty important for everyone who cares about their app production bundle size.

@hakimio yes, that's why I listed the second thing to do is to

Publish a new NPM package, maybe "dayjs-esm" to ship an ESM module with package.json module entry pointed to

Maybe this is related to all things happening with the latest release of dayjs and using TS. I apologize if I write this within this issue and I'm happy to open a new issue if this does not belong here.

Current Environment

package.json

dependencies: {
 ...
 "dayjs": "^1.10.3",
 "typescript": "^4.1.2",
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "sourceMap": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
    "build",
    "scripts",
    "acceptance-tests",
    "src/setupTests.ts",
    "src/reportWebVitals.ts",
    "tailwind.config.js"
  ]
}

index.tsx

import dayjs from 'dayjs';

const creationDay = dayjs(createdAt);

Observed behavior

ERROR: TypeError: dayjs__WEBPACK_IMPORTED_MODULE_11___default(...) is not a function

As a workaround I can export namespace dayjs in *.d.ts but then I do not get all of the properties such as fromNow(), ...

Is there a solution to this, or is the next release fixes this?

I'm going to +1 here to say that unfortunately this dayjs update broke the build (while preparing a 1.0 release) and we had to lock the version to 1.9.6 (I saw someone had success with 1.9.7 too).

Thanks for doing better TypeScript support and also for the dayjs package itself, @iamkun. OSS does not get enough positive support - thanks for doing this for all of us who use the package on many projects and only come to Github to figure out what broke the build.

Thanks!

@alexsorokoletov THX, you can use the latest version of Day.js which has reverted this error change.

Publish a new NPM package, maybe "dayjs-esm" to ship an ESM module with package.json module entry pointed to. ref #1242 (comment)

For 2.0, I think ESM should be the default. That is the way the whole world is moving. Then we could create dayjs-umd or whatever if it's really necessary to have multiple packages

Any news on this 2.0 version ?

Hi, I'm working on a plugin in which add a property to "OptionType". like dayjs(new Date(), { isCool: true }). I manage to override this with JS but I got stuck in the typing part. I search a bit and apparently add a property with declaration merging is not easy(possible!?) to do.

export interface OptionObj {
  locale?: string,
  format?: string,
  utc?: boolean
}

this is the change that makes things easier. Is there a better solution? I can help with the new version <333

@always-maap did you find a solution to your problem? I think I'm possibly having the same one (#1605)

@always-maap did you find a solution to your problem? I think I'm possibly having the same one (#1605)

yes indeed, this is the code example.

https://www.github.com/zoomit-org/Dayjs-Jalali-Plugin/tree/master/index.d.ts

ask me any questions you want, I'm available

@JesusTheHun I'm refactoring dayjs using TypeScript.

There will be the following changes.

• TypeScript friendly. I will refactor all the code using TypeScript.
• Support ESM, UMD

Repo: https://github.com/sxzz/dayjs/tree/next

At this very early stage, some features and plugins have not been implemented.

Breaking Change

• dayjs.locale(preset, object, isLocal) => dayjs.locale(preset, isLocal, object)
• drop node < 14.17.0
• private property (starts with $ or _)

v2.0 branch https://github.com/iamkun/dayjs/tree/next

v2.0 branch https://github.com/iamkun/dayjs/tree/next

Could we get a dist-tag in npm for this since there's a branch now please?

@vhscom It is still very early in the process and there may be potential bugs, and unit tests, plugins and locales have not yet been migrated.

@iamkun WDYT? We can release 2.0.0-alpha.0 by now?

Before opening an issue @iamkun, I was wondering about something concerning using DayJS in the context of TS.

If we take a look at the docs for a functionality such as 'from now', we can see the following in the documentation:

var relativeTime = require('dayjs/plugin/relativeTime') dayjs.extend(relativeTime)

Being new to TS and ES6 modules, it took me a good while to figure out that I had to do the following to make it work:

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

dayjs.extend(relativeTime);

What would think of creating an issue with the intent of extending the documentation (fantastic work btw) to correct this? And if I'm incorrect and there are some clear indications somewhere for TS, please let me know!

I am trying this in a React project (JS not TS) and it does not work. I get the error TypeError: dayjs__WEBPACK_IMPORTED_MODULE_5___default.a.unix(...).utc is not a function

My code is: import dayjs from "dayjs"; export const unixToDate = (unix, format = "YYYY-MM-DD") => { return dayjs.unix(unix).utc().format(format); };

@yohanelly95 Are you using version 2.0.0-alpha.0? If so, please provide the reproduction repo.