TypeError: dayjs_1.default is not a function

[dockleryxk]

When updating the dayjs package from 1.8.0 to 1.8.3, I'm getting this error.

I changed my import from import * as dayjs from 'dayjs'; to import dayjs from 'dayjs'; which let me compile, but this error what this result.

Here is the line of code for the error:

const today = dayjs().format('YYYY-MM-DD');

[adamfoerster]

same error here

[iamkun]

Bug confirmed. We changed index.d.ts from export = dayjs; to export default dayjs.

TS expert help wanted.

[iamkun]

Seems add "esModuleInterop": true, to tsconfig would solve this issue, but should a better way.

[andreasvirkus]

What were the benefits of that change? Couple of reasons why to avoid default exports:
https://basarat.gitbooks.io/typescript/docs/tips/defaultIsBad.html

[iamkun]

Just released v1.8.4 to revert this change. Please remain using

import * as dayjs from 'dayjs'

in a TypeScript project.

And discussion still welcome

[tsiq-jeremy]

I also saw this issue when tsconfig had this set "allowSyntheticDefaultImports": true,.

[iamkun]

@tsiq-jeremy Your Day.js version and TS version, please.

[tsiq-jeremy]

Ahh actually it was a bit more complicated I'm realizing then what I wrote. Basically when you have a library compiling with tsconfig allowSyntheticDefaultImports and then a consuming application that does not use that setting, we got that error. Both the library and consuming application had dayjs as dependencies. Using TS 3.0.3 and dayjs 1.8.9.

I think I may write this all up in a separate issue, but I think a root cause to this is when using tsconfig allowSyntheticDefaultImports you have to then change how you import dayjs from import * as dayjs from 'dayjs'; to import dayjs from 'dayjs'; .

Looks like adding export as namespace dayjs; to the .d.ts file could would allow you to import dayjs both ways. Seems like what React and other libraries do. This allows for importing dayjs the same way regardless of if you have that tsconfig variable set.

[danawoodman]

This is an issue for me in a Next.js project. On the server side when rendering a React component I get:

TypeError: dayjs__WEBPACK_IMPORTED_MODULE_0___default(...)(...).fromNow is not a function

Works on the client rendering cycle of Next.js but not the Node side.

Adding the following to my tsconfig.json did not fix the issue:

    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,

Using 1.8.29

Have to use a different date library till this is resolved 😢

[iamkun]

@danawoodman a reproduction demo repo, please?

[danawoodman]

@iamkun I figured it out, it was because I imported the "relativeTime" extension in my entry point but didn't import it where I was using it. I just assumed that it would work at the entry point but moving it right next to the code in question fixed it:

import dayjs from "dayjs"
import relativeTime from "dayjs/plugin/relativeTime"

dayjs.extend(relativeTime)

console.log(dayjs(new Date("jan 1, 2020").fromNow())

[ivictbor]

Had the same issue after update to webpack5, probably will help someone also: https://hinty.io/devforth/fix-webpack-imported-module-is-not-a-function-for-webpack5/

[AndresAusecha]

This exception is still thrown, when you use dayjs in tests triggered by Jest you get it sometimes even tho the app in real-time works perfectly.

Weird issue

[ylahssini]

Same issue for me, the weird thing is that in the first time is working, i don't know why is show me this error.
i use the last version of dayjs which is 1.10.4

[JesusTheHun]

@AndresAusecha exactly that, my tests fail because of that error.

jest 26
dayjs 1.10.4

[JesusTheHun]

Can I put a bounty on this bug ? I set it to 100$

• PR must be accepted by @iamkun
• Both import dayjs from 'dayjs' and import * as dayjs from 'dayjs' must work
• TypeError should be resolved (see v1.9.2 crashes with "TypeError: t is not a function" #1132)

[Lonli-Lokli]

@iamkun Why this issue closed?

[thomasFjorstad]

TypeError: dayjs is not a function when running test from react-test-library.

[vagoel]

My jest tests are failing because its is unable to recognize dayjs

In the file , i have used dayjs like this -

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

dayjs.extend(relativeTime);

Only the tests are failing , functionality is working fine.

[JesusTheHun]

This repo feels forsaken.

[rogerprz]

allowSyntheticDefaultImports

So they should be set to false to fix the issue?

[rogerprz]

I'm still getting the same error in end of 2021. Any new ideas?

[JesusTheHun]

I'm still getting the same error in end of 2021. Any new ideas?

Yes, I moved to Luxon, bigger package size but at least it doesn't f*** up my tests.

[rogerprz]

My jest tests are failing because its is unable to recognize dayjs

In the file , i have used dayjs like this -

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

dayjs.extend(relativeTime);

Only the tests are failing , functionality is working fine.

same

[hixus]

At least for me the issue was importing dayjs directly import dayjs from "dayjs"; in test file. Instead I should have used my lib file that adds the plugins import dayjs from "src/lib/dayjs";

# src/lib/dayjs.ts
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";

dayjs.extend(relativeTime);

export default dayjs;

Don't know why the types in the app worked but jest behaviour also seems correct.

[nicohagen]

Using default imports

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

in the tested module instead import * as ... did the trick for me.

[sohammondal]

I was facing this issue as well. I added allowSyntheticDefaultImports: true in tsconfig.json & import dayjs from 'dayjs' worked for me.

[yohanelly95]

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); };

[VRedondo-zz]

Facing similar issue

My code is

import dayjs from 'dayjs';

const createdAt = dayjs.utc(review.createdDt || '')

TypeError: dayjs__WEBPACK_IMPORTED_MODULE_1__.utc is not a function

tsconfig is already had allowSyntheticDefaultImports: true

dayjs version 1.10.4

[Vanessa-Ap-Ferreira]

Seems add "esModuleInterop": true, to tsconfig would solve this issue, but should a better way.

I need to buy you a beer

[yimmymoore]

I have tried all the suggestions in this thread. Warning to anyone trying to publish a typescript npm package artifact in azure with this. It works like a charm in the artifact repo, but once distributed to your development-repo it just wont work anymore. Just use a different library.

[JamesScript]

For anyone else coming to this with a similar issue to me, my problem was that the dayjs.extend(minMax) code was being called in the parent of the component I was testing. So when running the app the dayjs.max method existed, but the test suite only imported the component and not its parent, therefore the plugin wasn't being applied to dayjs.

[keeganteetaert]

This works for me when I export the plugins along with the default.

// dayjs.ts
import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
import isTomorrow from 'dayjs/plugin/isToday';
import isToday from 'dayjs/plugin/isTomorrow';
import relativeTime from 'dayjs/plugin/relativeTime';

dayjs.extend(utc);
dayjs.extend(isToday);
dayjs.extend(isTomorrow);
dayjs.extend(relativeTime);

export {
  dayjs, 
  utc, isToday, isTomorrow, relativeTime, // important to not get compiling errors when using these plugins
};

This then works in another file

// anotherFile.js
import { dayjs } from './dayjs';
dayjs.utc();

[merajseraji]

@iamkun any news about update and fix this bug dude?
is it fix in Dayjs 2.0 alpha?

Don't make us look for another package!😥

[CasuallyCaffeinated]

Any update on fixing this? I'm working in a JS React Native project. This is really quite frustrating.

 FAIL  src/utils/__tests__/isDateSameOrAfter.test.js
  isDateSameOrAfter()
    when the date string passed as a param, is BEFORE today's date
      ✕ isDateSameOrAfter() return false (1 ms)

    TypeError: t is not a function

       9 |
      10 | export const isDateSameOrAfter = (date) => {
    > 11 |     dayjs.extend(isSameOrAfter);
         |           ^
      12 |     return dayjs().isSameOrAfter(date);
      13 | };
      14 |

      at Function.extend (node_modules/dayjs/dayjs.min.js:1:6551)
      at isDateSameOrAfter (src/utils/day-js/isDateSameOrAfter.js:11:11)
      at Object.<anonymous> (src/utils/__tests__/isDateSameOrAfter.test.js:10:45)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        1.139 s

[Mng12345]

Same error with version v1.11.6!

[BrunoQuaresma]

The error that I see on VSCode when using import * as dayjs from "dayjs" is:

Type 'typeof import("/project/node_modules/dayjs/index.d.ts")' has no call signatures.

import * as dayjs from "dayjs"

export function createDayString(time: string): string {
  return dayjs().to(dayjs(time))
}

[rombat]

Same issue here, in a React project:
TypeError: dayjs__WEBPACK_IMPORTED_MODULE_30___default.a.endOf is not a function
version: 1.11.7

[gsben]

Seems add "esModuleInterop": true, to tsconfig would solve this issue, but should a better way.
nice

[tgoulder4]

Just released v1.8.4 to revert this change. Please remain using

import * as dayjs from 'dayjs'

in a TypeScript project.

And discussion still welcome

I now get This expression is not callable. when using dayjs()

Update: I have fixed it:
"allowSyntheticDefaultImports": true, "esModuleInterop": true
import dayjs = require("dayjs"); import duration from "dayjs/plugin/duration"; dayjs.extend(duration); import objectSupport from "dayjs/plugin/objectSupport"; dayjs.extend(objectSupport);
Make sure you're extending plugins as per the docs.

[vallemar]

same error here, nothing works

[master117]

Still facing this issue. Impossible to use jest + ts while using extend.

// Setup DayJS Plugins
import dayjs from "dayjs";
import weekOfYear from "dayjs/plugin/weekOfYear";
import quarterOfYear from "dayjs/plugin/quarterOfYear";
import isoWeek from "dayjs/plugin/isoWeek";

dayjs.extend(weekOfYear);
dayjs.extend(quarterOfYear);
dayjs.extend(isoWeek);

Test suite failed to run

    TypeError: dayjs_1.default.extend is not a function

       5 | import isoWeek from "dayjs/plugin/isoWeek";
       6 |
    >  7 | dayjs.extend(weekOfYear);
         |       ^
       8 | dayjs.extend(quarterOfYear);
       9 | dayjs.extend(isoWeek);
      10 |

when I use

import * as dayjs from "dayjs";

I get a TS error. #1132 (comment)

If I then also add, in tsconfig.json:

  "compilerOptions": {
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,

I get:

Test suite failed to run

    src/a.tsx:61:55 - error TS2349: This expression is not callable.
      Type 'typeof import("bla/node_modules/dayjs/index.d.ts")' has no call signatures.

    61                 As Of: dayjs(a).format("YYYY-MM-DD")
                                                             ~~~~~

      src/dayjs.ts:2:1
        2 import * as dayjs from "dayjs";
          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        Type originates at this import. A namespace-style import cannot be called or constructed, and will cause a failure at runtime. Consider using a default import or import require here instead.

The only way around was to move all my dayJS calls to wrapper functions in a separate file and mock each and every single one. This is unsustainable.

[r-b0rges]

is there a way to skip type errors?

[swimhiking]

wondering how to do unit tests with dayjs, I got dayjs_1.default or dayjs_1.default.extend is not a function error no matter how I try:

jest.mock('dayjs', () => {
const originalModule = jest.requireActual('dayjs');
return {
__esModule: true,
...originalModule,
default: {
dayjs: jest.fn().mockResolvedValue({ default: { extends: jest.fn() } }),
extends: jest.fn(),
},
};
});