0

I have the following code:

import Glide from "@glidejs/glide";

const SectionSlider = () => {
const UNIQUE_CLASS = "random_string"
let MY_GLIDEJS = useMemo(() => {
    return new Glide(`.${UNIQUE_CLASS}`, {
      perView: itemPerRow,
      gap: 32,
      bound: true,
      breakpoints: {
        1280: {
          perView: itemPerRow - 1,
        },
        1024: {
          gap: 20,
          perView: itemPerRow - 1,
        },
        768: {
          gap: 20,
          perView: itemPerRow - 2,
        },
        640: {
          gap: 20,
          perView: itemPerRow - 3,
        },
        500: {
          gap: 20,
          perView: 1.3,
        },
      },
    });
  }, [UNIQUE_CLASS]);

  useEffect(() => {
    setTimeout(() => {
      MY_GLIDEJS.mount();
    }, 100);
  }, [MY_GLIDEJS, UNIQUE_CLASS]);

return (
    <div className={`${UNIQUE_CLASS} flow-root`}>
    ...
    </div>
)};

When rendering this component it throws this error:

TypeError: _glidejs_glide__WEBPACK_IMPORTED_MODULE_3__.default is not a constructor

Additionally the packages I am using (related with this issue) are:

"dependencies": {
    "@glidejs/glide": "^3.6.0",
    "react": "18.2.0",
...
"devDependencies": {
    "@types/glidejs__glide": "^3.6.0",

What is my mistake exactly?

dearn44
  • 3,198
  • 4
  • 30
  • 63

1 Answers1

0

Looks like Glide uses the now defunct module declaration (see this answer).

From their package.json

"module": "dist/glide.esm.js",

According to Webpack documentation, this should still work but something else seems wrong. I'd try raising a bug.

To work around this for now, you can use the following

import Glide from "@glidejs/glide/dist/glide.modular.esm" // may need ".js"

Note that @types/glidejs__glide only defines types for:

  • dist/glide.js, and
  • dist/glide.modular.esm.js
Phil
  • 157,677
  • 23
  • 242
  • 245
  • This is giving me the warning: 1Could not find a declaration file for module `@glidejs/glide/dist/glide.esm.js'.`, but even if I still run it, there doesn't seem to be a change, I still get the exact same error. But if this is not a mistake on my code maybe I should create an issue with them. – dearn44 Jan 23 '23 at 04:27
  • Are you using Typescript? Your question is tagged [tag:javascript] so I didn't think that would be an issue – Phil Jan 23 '23 at 04:28
  • Yes I am, I completely forgot to add that tag!!! – dearn44 Jan 23 '23 at 04:28
  • Might be time to find a new, modern carousel library – Phil Jan 23 '23 at 04:29
  • I was afraid that would be the answer. It's probably the same for "react-dates" which I also chose for some reason. – dearn44 Jan 23 '23 at 04:30
  • @dearn44 I found the TS problem. There's no type definitions for `glide.esm.js`. Have updated my answer – Phil Jan 23 '23 at 04:34
  • I'm afraid that both with and without the`.js` ending, its the exact same error message. – dearn44 Jan 23 '23 at 04:40
  • Note that I changed it from `dist/glide.esm.js` to `dist/glide.modular.esm.js`. Only the latter has type definitions – Phil Jan 23 '23 at 04:41
  • FYI it works fine for me in a Node `"type": "module"` build. Haven't tried with Webpack yet but that shouldn't make a difference – Phil Jan 23 '23 at 04:42
  • 1
    Correct. Images are not switching at all, but at least the website can render now. That's a start and a reason to use some other slider. – dearn44 Jan 23 '23 at 04:47