Skip to content

DayJS and Vite 8 #3037

@softy2k

Description

@softy2k

I have an project using Vue 3 and Vite 7. All is OK.

After I migrate to Vite 8 (version 8.0.0 to 8.0.6) , I got error in Chrome console:

dayjs.js?v=101ff6f2:293 Uncaught TypeError: t is not a function

Try to solve with Claude, and I receive:

The error is on: dayJS.extend(dayjsBusinessDays). This is a classic Vite 8 breaking change — Vite 8 changed how CommonJS modules are interop'd with ESM, and
dayjs-business-days is a CJS package.
In Vite 7, CJS default exports were auto-unwrapped. In Vite 8, the import may come through as { default: fn } instead of fn directly.

You have two options to fix this:

Option 1: Destructure the default export
import { default as dayjsBusinessDays } from "dayjs-business-days";

Option 2 (simpler): Add .default fallback at the extend call

Change in code:
dayJS.extend(dayjsBusinessDays.default || dayjsBusinessDays);

Option 2 is more resilient across Vite versions. But the cleanest approach that also fixes all similar CJS packages at once is to configure Vite 8's legacy CJS
interop. Add this to your vite.config.js:

resolve: {
...
},
optimizeDeps: {
needsInterop: ['dayjs-business-days']
}

However, the most straightforward fix is just fixing the import. Want me to apply Option 1 (change the import) or Option 2 (.default fallback), or the vite config
approach?

Also, you likely have the same issue with dayjs itself and its plugins (utc, isSameOrBefore) — check if those also error. If only dayjs-business-days fails, that's
because dayjs plugins use module.exports = function (direct function export) while dayjs-business-days uses module.exports = { default: function }.

I recommend changing the import to: import { default as dayjsBusinessDays } from "dayjs-business-days";
This explicitly grabs the default export and works correctly with Vite 8's stricter CJS-to-ESM interop.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions