dayjs plugins not recognized when imported in a separate location

[anthonyma94]

Describe the bug A clear and concise description of what the bug is.

I have a dayjs config file where I extend all the plugins I need for the project:

dayjs.ts

import utc from "dayjs/plugin/utc";
import customParse from "dayjs/plugin/customParseFormat";
import timezone from "dayjs/plugin/timezone";
import minMax from "dayjs/plugin/minMax";
import dayjs from "dayjs";
import isSameOrBefore from "dayjs/plugin/isSameOrBefore";
import isSameOrAfter from "dayjs/plugin/isSameOrAfter";
import duration from "dayjs/plugin/duration";

dayjs.extend(utc);
dayjs.extend(customParse);
dayjs.extend(timezone);
dayjs.extend(minMax);
dayjs.extend(isSameOrAfter);
dayjs.extend(isSameOrBefore);
dayjs.extend(duration);
dayjs.tz.setDefault("America/Toronto");

export default dayjs;

I then import dayjs from this file. However, the plugins are not being recognized when used in a Next JS project:

TypeError: dayjs__WEBPACK_IMPORTED_MODULE_0__.default.duration is not a function

Expected behavior A clear and concise description of what you expected to happen.

The plugins should be recognized properly.

Information

• Day.js Version [e.g. v1.0.0] v1.10.7
• OS: [e.g. iOS] Windows 10
• Browser [e.g. chrome 62] Chrome 98
• Time zone: [e.g. GMT-07:00 DST (Pacific Daylight Time)] GMT -05:00

[zeinabsayyadi]

Describe the bug A clear and concise description of what the bug is.

I have a dayjs config file where I extend all the plugins I need for the project:

dayjs.ts

import utc from "dayjs/plugin/utc";
import customParse from "dayjs/plugin/customParseFormat";
import timezone from "dayjs/plugin/timezone";
import minMax from "dayjs/plugin/minMax";
import dayjs from "dayjs";
import isSameOrBefore from "dayjs/plugin/isSameOrBefore";
import isSameOrAfter from "dayjs/plugin/isSameOrAfter";
import duration from "dayjs/plugin/duration";

dayjs.extend(utc);
dayjs.extend(customParse);
dayjs.extend(timezone);
dayjs.extend(minMax);
dayjs.extend(isSameOrAfter);
dayjs.extend(isSameOrBefore);
dayjs.extend(duration);
dayjs.tz.setDefault("America/Toronto");

export default dayjs;

I then import dayjs from this file. However, the plugins are not being recognized when used in a Next JS project:

TypeError: dayjs__WEBPACK_IMPORTED_MODULE_0__.default.duration is not a function

Expected behavior A clear and concise description of what you expected to happen.

The plugins should be recognized properly.

Information

• Day.js Version [e.g. v1.0.0] v1.10.7
• OS: [e.g. iOS] Windows 10
• Browser [e.g. chrome 62] Chrome 98
• Time zone: [e.g. GMT-07:00 DST (Pacific Daylight Time)] GMT -05:00

you have to import dayjs above all plugins

[zeinabsayyadi]

Hi @iamkun Could you please take a look at this issue? I'm experiencing a similar problem and would appreciate your insight. when using the minMax plugin in a Next and TypeScript project The TypeScript compiler does not recognize the max and min methods added by the plugin on other files.

Steps to Reproduce:

1. Install Day.js and the minMax plugin.
2. Extend Day.js with the minMax plugin.
3. Attempt to use dayjs.max() or dayjs.min() in a TypeScript file.
4. Observe the type error indicating max and min are not recognized.

Expected Behavior: The TypeScript compiler should recognize max and min as valid methods on the Day.js instance when the minMax plugin is extended.

Actual Behavior: The TypeScript compiler reports the following error: Property 'max' does not exist on type 'Dayjs'. Property 'min' does not exist on type 'Dayjs'.

Environment:

Day.js version: 1.11.12 jalaliday version : 2.3.0 TypeScript version: 5.0.4 React: 18.2.0 Next version: 13.4.19 Node.js version: 18.17.0 Operating System: windows 10

tsconfig.json : "compilerOptions": { "target": "es5", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict": true, "forceConsistentCasingInFileNames": true, "noEmit": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "incremental": true, "downlevelIteration": true, "paths": { "@/": ["./src/"] }

Custom dayjs configs : import dayjs from "dayjs"; import "dayjs/locale/fa"; import "dayjs/locale/en"; import jalaliday from "jalaliday"; import minMax from "dayjs/plugin/minMax"; import weekday from "dayjs/plugin/weekday"; import localeData from "dayjs/plugin/localeData"; import duration from "dayjs/plugin/duration"; import relativeTime from "dayjs/plugin/relativeTime"; import advancedFormat from "dayjs/plugin/advancedFormat"; import dateLocale from "antd/lib/date-picker/locale/fa_IR"; import utc from "dayjs/plugin/utc"; dateLocale["lang"]["monthFormat"] = "MMMM";

dayjs.extend(minMax); dayjs.extend(weekday); dayjs.extend(advancedFormat); dayjs.extend(localeData); dayjs.extend(utc); dayjs.extend(jalaliday); dayjs.extend(duration); dayjs.extend(relativeTime);

dayjs.calendar("jalali");

export const date = dayjs; export const locale = dateLocale; export const DEFAULT_DATE_FORMAT = "YYYY/MM/DD HH:mm";