Next 13 Import Error

[0xtimsb]

On the next 12, it was working fine. But, after upgrading to the next 13, glide gives this error:

Attempted import error: '@glidejs/glide' does not contain a default export (imported as 'Glide').

I'm using use client at top of the file in which I'm importing it. I'm also using typescript in this project with the @types/glidejs__glide package.

[0xtimsb]

I'm also getting this error:

error - TypeError: Cannot use 'in' operator to search for 'getStore' in undefined

[tsalama]

LIkewise!

[renzodamgo]

Hi, this worked for me on Next 13 and typescript:

import Glide, { Options } from "@glidejs/glide";
import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";

export const sliderConfiguration: Partial<Options> = {
  type: "carousel",
  gap: 20,
  perView: 3
};

type CarouselType = {
  children: React.ReactNode;
};

export const Carousel = forwardRef(({ children }: CarouselType, ref) => {
  const sliderRef = useRef<HTMLDivElement>(null);

  useImperativeHandle(ref, () => sliderRef.current);

  useEffect(() => {
    const slider = new Glide(
      sliderRef.current as HTMLElement,
      sliderConfiguration,
    );
    slider.mount();

    return () => {
      slider.destroy();
    };
  }, []);

  return (
    <div className="glide relative md:px-0" ref={sliderRef}>
      <div className="glide__track" data-glide-el="track">
        <ul className="glide__slides">
          { children }
        </ul>
      </div>
    </div>
  );
});

Carousel.displayName = "Carousel";

And you call it like this:

<Carousel photos={GalleryData}>
  {GalleryData.map((gallery) => (
    <img
      className=" object-cover object-center"
      key={gallery.name}
      alt={gallery.name}
      src={gallery.path}
    />
  ))}
</Carousel>

[topzdev]

any fix on this?

Hi, this worked for me on Next 13 and typescript:

import Glide, { Options } from "@glidejs/glide";
import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";

export const sliderConfiguration: Partial<Options> = {
  type: "carousel",
  gap: 20,
  perView: 3
};

type CarouselType = {
  children: React.ReactNode;
};

export const Carousel = forwardRef(({ children }: CarouselType, ref) => {
  const sliderRef = useRef<HTMLDivElement>(null);

  useImperativeHandle(ref, () => sliderRef.current);

  useEffect(() => {
    const slider = new Glide(
      sliderRef.current as HTMLElement,
      sliderConfiguration,
    );
    slider.mount();

    return () => {
      slider.destroy();
    };
  }, []);

  return (
    <div className="glide relative md:px-0" ref={sliderRef}>
      <div className="glide__track" data-glide-el="track">
        <ul className="glide__slides">
          { children }
        </ul>
      </div>
    </div>
  );
});

Carousel.displayName = "Carousel";

And you call it like this:

<Carousel photos={GalleryData}>
  {GalleryData.map((gallery) => (
    <img
      className=" object-cover object-center"
      key={gallery.name}
      alt={gallery.name}
      src={gallery.path}
    />
  ))}
</Carousel>

error still occurred, i hope this issue will be fix soon