Flatpickr Date Picker Not Opening in SvelteKit 2

[ethankonk]

I was experiencing an issue with the Flatpickr date picker not opening in my SvelteKit 2 web app. After installing the library via npm, the date picker failed to open due to the Flatpickr CSS file not being automatically included in the project. I believe this is addressed somewhere but I just wanted to highlight a fix to the issue in-case anyone else ends up struggling with it in the future.

Environment

• SvelteKit Version: 2
• Svelte Version: 4.2.7
• Flatpickr Version: Latest (installed via npm)

Solution

The issue was resolved by making the following changes:

Vite Configuration: Update vite.config.js to include this in the plugins array:

copy({
  targets: [
    {
      src: './node_modules/flatpickr/dist/flatpickr.css',
      dest: 'public/build'
    }
  ]
})

Top-Level Layout: Import the Flatpickr CSS file in the +layout.svelte page:

import "flatpickr/dist/flatpickr.css";

And there we go, the date picker should function correctly.

If this is something obvious or already detailed somewhere else, feel free to close or delete this issue. Just thought I'd share what I've learned from my 45 min struggle.

Happy coding!