SSR - Named export 'Splide' not found.

[kinger251285]

Checks

• Not a duplicate.
• Not a question, feature request, or anything other than a bug report directly related to Vue Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

0.6.12

Description

Hi

I am using Laravel, Vue, Inertia & Tailwind. This package is working great apart from server side rendering.

I am importing this package into my vue component like:

import { Splide, SplideSlide, SplideTrack } from '@splidejs/vue-splide';
import '@splidejs/vue-splide/css';

when i run php artisan inertia:start-ssr i get the below error:

file:///var/www/my-project/bootstrap/ssr/assets/Header-DnRd809i.js:4
import { Splide, SplideTrack, SplideSlide } from "@splidejs/vue-splide";
^^^^^^
SyntaxError: Named export 'Splide' not found. The requested module '@splidejs/vue-splide' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@splidejs/vue-splide';
const { Splide, SplideTrack, SplideSlide } = pkg;

at ModuleJob._instantiate (node:internal/modules/esm/module_job:146:21)
at async ModuleJob.run (node:internal/modules/esm/module_job:229:5)
at async ModuleLoader.import (node:internal/modules/esm/loader:473:24)
at async Promise.all (index 0)
at async L (file:///var/www/my-project/node_modules/@inertiajs/vue3/dist/index.esm.js:1:6040)
at async Server.<anonymous> (file:///var/www/my-project/node_modules/@inertiajs/core/dist/server.esm.js:1:527)

This is happening on every one of my VILT projects where i am using vue-splide.

Reproduction Link

No response

Steps to Reproduce

1.Create a new laravel project
2. Install this package via npm
3. Import it into a vue component
...

Expected Behaviour

SSR to run correctly.

[AbdullahAgsar]

if you use vite try this

vite.config.json

`
export default defineConfig({

ssr: {
    noExternal: ['@splidejs/vue-splide'],
}

})
`