javascript 尝试使用“glidejs”时出现“default is not a constructor”错误

xpszyzbs  于 2023-01-24  发布在  Java
关注(0)|答案(1)|浏览(214)

下面的代码:

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>
)};

呈现此组件时,它会引发以下错误:

TypeError: _glidejs_glide__WEBPACK_IMPORTED_MODULE_3__.default is not a constructor

此外,我正在使用的软件包(与此问题相关)包括:

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

我到底犯了什么错?

e4eetjau

e4eetjau1#

看起来Glide使用了现已失效的module声明(请参见this answer)。
从他们的package.json

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

根据Webpack文档,这应该仍然可以工作,但似乎有其他错误。
要暂时解决此问题,可以使用以下方法

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

请注意,@types/glidejs__glide仅定义以下类型:

  • dist/glide.js,以及
  • dist/glide.modular.esm.js

相关问题