Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TypeError: dayjs_1.default is not a function #475

Closed
dockleryxk opened this issue Feb 4, 2019 · 45 comments
Closed

TypeError: dayjs_1.default is not a function #475

dockleryxk opened this issue Feb 4, 2019 · 45 comments
Labels
☢️Bug Something isn't working

Comments

@dockleryxk
Copy link

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
Copy link

same error here

@iamkun iamkun added the ☢️Bug Something isn't working label Feb 5, 2019
@iamkun
Copy link
Owner

iamkun commented Feb 5, 2019

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

TS expert help wanted.

@iamkun
Copy link
Owner

iamkun commented Feb 5, 2019

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

@andreasvirkus
Copy link

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
Copy link
Owner

iamkun commented Feb 5, 2019

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
Copy link

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

@iamkun
Copy link
Owner

iamkun commented Apr 12, 2019

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

@tsiq-jeremy
Copy link

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
Copy link

danawoodman commented Jul 11, 2020

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
Copy link
Owner

iamkun commented Jul 12, 2020

@danawoodman a reproduction demo repo, please?

@danawoodman
Copy link

@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
Copy link

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
Copy link

AndresAusecha commented Apr 26, 2021

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
Copy link

ylahssini commented May 6, 2021

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
Copy link
Contributor

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

jest 26
dayjs 1.10.4

@JesusTheHun
Copy link
Contributor

JesusTheHun commented May 11, 2021

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

@Lonli-Lokli
Copy link

@iamkun Why this issue closed?

@thomasFjorstad
Copy link

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

@vagoel
Copy link

vagoel commented Sep 15, 2021

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

image

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
Copy link
Contributor

This repo feels forsaken.

@rogerprz
Copy link

allowSyntheticDefaultImports

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

@rogerprz
Copy link

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

@JesusTheHun
Copy link
Contributor

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
Copy link

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

image

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
Copy link

hixus commented Dec 26, 2021

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
Copy link

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
Copy link

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

@yohanelly95
Copy link

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
Copy link

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
Copy link

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

I need to buy you a beer

@yimmymoore
Copy link

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
Copy link

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
Copy link

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
Copy link

@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
Copy link

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
Copy link

Same error with version v1.11.6!

@BrunoQuaresma
Copy link

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

Screen Shot 2022-11-14 at 21 09 14

@rombat
Copy link

rombat commented Mar 1, 2023

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
Copy link

gsben commented Mar 16, 2023

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

@tgoulder4
Copy link

tgoulder4 commented Aug 21, 2023

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
Copy link

vallemar commented Nov 4, 2023

same error here, nothing works

@master117
Copy link

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
Copy link

is there a way to skip type errors?

@swimhiking
Copy link

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

@rikez
Copy link

rikez commented Jul 18, 2024

@swimhiking

I'm usingdayjs@1.11.11.

My tests were failing because I have a dependency on rc-picker which also depends on dayjs. To fix, I installed dayJs as a devDependency, and mapped it to the correct entrypoint file in my jest.config.js file.

  moduleNameMapper: {
    "^dayjs$": "<rootDir>/node_modules/dayjs/dayjs.min.js"
  },

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
☢️Bug Something isn't working
Projects
None yet
Development

No branches or pull requests