The requested module '@glidejs/glide' does not provide an export named 'default'

[Ahmed-M-Yasser]

I'm using glidejs with sveltekit. It's working perfectly fine in my localhost, but after deployment, I'm getting this error

The requested module '@glidejs/glide' does not provide an export named 'default'

<script> ... import Glide from '@glidejs/glide'; //getting the error here on the deployment server only ... </script>

This is how I'm referencing glide.core.min.css
<svelte:head> <link rel="stylesheet" href="../node_modules/@glidejs/glide/dist/css/glide.core.min.css" /> </svelte:head>

[ericmorand]

This is likely a sveltekit issue. Glide works perfectly fine when imported by a JavaScript module and bundled using browserify or rollup.

[Ahmed-M-Yasser]

The issue is gone once I imported glide like this

<svelte:head>
	<script src="node_modules/@glidejs/glide/dist/glide.min.js"></script>
	<link rel="stylesheet" href="../node_modules/@glidejs/glide/dist/css/glide.core.min.css" />
</svelte:head>

But still, I'm curious to know why it happens with sveltekit when it's imported like this import Glide from '@glidejs/glide';

[Mardoxx]

Also replicable in remix

[rpdave]

I ran into the same problem using Qwik framework. Here is how I solved it.

Problem

Using the documented import like

import Glide from "@glidejs/glide"

Results in the error [vite] The requested module '@glidejs/glide' does not provide an export named 'default'

Analysis

I noted that the file imported with the above import node_modules/.pnpm/@[email protected]/node_modules/@glidejs/glide/dist/glide.js runs an IIFE this was no good or not working.

Solution

Use alternate import from

import Glide from "@glidejs/glide/dist/glide.esm";

If you go to the source of the above file you can see the last line export { Glide as default };

Then you must use your frameworks client side execution model to run the ctor. For Qwik this was to use the hook useOnWindow

export const CustomSlider = component$<CustomSliderProps>(({ images }) => {
  useOnWindow(
    "load",
    $(() => {
      var glide = new Glide(".glide");
      glide.mount();
    }),
  );
....

I hope this helps

NOTE TS will still complain if you are using TS just mock the types by using the declare module '@glidejs/glide';