下面的代码:
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",
我到底犯了什么错?
1条答案
按热度按时间e4eetjau1#
看起来Glide使用了现已失效的
module
声明(请参见this answer)。从他们的
package.json
根据Webpack文档,这应该仍然可以工作,但似乎有其他错误。
要暂时解决此问题,可以使用以下方法
请注意,
@types/glidejs__glide
仅定义以下类型:dist/glide.js
,以及dist/glide.modular.esm.js