Every time I attempt to utilize `glidejs`, I encounter the error message stating that "default is not a constructor."

Here is the code snippet I am working with:

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

After trying to render this component, an error occurred:

TypeError: _glidejs_glide__WEBPACK_IMPORTED_MODULE_3__.default is not a constructor

In relation to this issue, here are the relevant packages I am using:

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

I am trying to pinpoint my mistake, could you please assist me in identifying it?

Answer №1

It appears that Glide is utilizing the outdated module declaration (refer to this response).

As indicated in their package.json

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

Even though, based on Webpack documentation, it should still function as intended but it seems there could be another issue at play. I would recommend reporting a bug.

In the meantime, you can implement the following workaround:

import Glide from "@glidejs/glide/dist/glide.modular.esm" // potentially requiring ".js"

Please note that @types/glidejs__glide solely provides types for:

  • dist/glide.js
  • dist/glide.modular.esm.js

Answer №2

Utilize this technique to enhance the image navigation experience

import Glide, { Controls, Breakpoints } from '@glidejs/glide/dist/glide.modular.esm'

Include these extra parameters when setting up your Glide instance for improved control functionality

new Glide('.glide').mount({ Controls, Breakpoints })

For more information, visit

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can you please explain the purpose of this function?

I came across this code snippet on a website and I'm curious about its function and purpose. While I'm familiar with PHP, HTML, CSS, and JavaScript, I haven't had the chance to learn JQUERY and AJAX yet. Specifically, I'm interested in ...

Using parameters in NativeScript-Vue

I'm having trouble passing parameters to another route in Nativescript. Every time I try, it shows up as undefined. I am using the nativescript-vue-navigator. On my current screen, I have this function call: this.$navigator.navigate('/map' ...

Error encountered when trying to access children components in Typescript, even though React.FC is being

I am facing an issue with a child component that has the following structure: interface ChildProps extends AnotherInterface{ route: string, exitAction: ActionCreatorWithoutPayload, } const ChildComponent:FC<ChildProps> = ({title, shape, rout ...

Getting the error message "Unable to initialize 'variable' before use" when working with the useState callback function in React

I'm facing an issue while attempting to implement a callback function with the useState hook in my code snippet below: export default function DropdownMenu(props) { const [isDropdownOpen, setDropdownOpen] = useState(false); const [options, se ...

Issue with Ajax reload functions malfunctioning

Embarking on a new journey, I am diving headfirst into the world of web development. As an artist and writer, I have recently delved into the realm of creating a project that integrates a cms, project manager, and database front-end using php, mysql, and j ...

A guide on accessing and merging values in an array of objects using index positions in node.js

I have retrieved a collection from MongoDB and stored it in an array using a foreach loop. Now, I need to iterate through this array and format the output as shown below. Each member object should be correctly associated with the "lead" field based on thei ...

Is there a specific method that can be implemented in Node.js to compare two strings and identify the common words or letters?

Looking for a solution: var str1="CodingIsFun"; var str2="ProgrammingRocks"; Is there any function that can provide a true value or flag in this case? ...

Display two images consecutively within a single img tag

My goal is to display two images using a single <img /> tag. The first small image will be loaded and shown using the src attribute, while the second large image will be contained within the data-src attribute. Only one image will be displayed at a t ...

The application was not functioning properly due to an issue with the getSelectors() function while utilizing @ngrx/entity to

Currently, I am facing an issue with implementing a NgRx store using @ngrx/entity library. Despite Redux Devtools showing my collection loaded by Effect() as entities properly, I am unable to retrieve any data using @ngrx/entity getSelectors. Thus, it seem ...

Is there a way to set the default timezone for the entire application to something like 'UTC' using JavaScript and Angular?

I'm currently developing a Hotel application where customers communicate using UTC. I have completed most of the work but everywhere I used the date object like so => new Date(). Before running the application, I need to change my local timezone to ...

Customize the datepicker locale in Valor

Currently, I am working with Angular2 and typescript alongside the Valor datepicker. Unfortunately, the datepicker does not have the necessary locale built-in. After some research, I discovered that the essential JavaScript file containing the locale infor ...

Discovering the Active Modal Form in BootStrap: Uncovering the Open Modal Form using JavaScript/jQuery

There are a total of 5 modal forms on my page. My goal is to identify the specific Id of the currently active one. One possible solution involves checking if $('#myModal').hasClass('in');. However, this method requires me to repeat the ...

Change the rectangle's position by rotating another rectangle

I am facing a challenge with two rectangles that have pivots attached to them, The task at hand is to align the green rectangle's position based on the rotation of the red rectangle. The desired outcome should resemble the image provided: Despite t ...

Concealing the BrowserStack key within Karma

Currently in the process of developing a JavaScript application, I am running tests using Karma on BrowserStack with the assistance of the karma-browserstack-runner. According to the guidelines, the accessKey and username should be included in the karma co ...

gulp-watch does not monitor files that are newly created or deleted

Currently working on a task: gulp.task('assetsInject', function () { gulp.src(paths.index) .pipe(plugins.inject( gulp.src(paths.scripts, {read: false}), { addRootSlash: false } ...

Following the latest update to the query-string library, the test:ci process is now encountering errors

The current development environment is utilizing next.js version 13. An issue has arisen after updating the query-string library to version 8.1, causing the test:ci to fail at a specific point. Here are the details of the failure: before "query- ...

flexible reaction mechanism for Uploadify

Welcome I am working on a project that involves utilizing two forms within tabs in Ext-JS. Additionally, I am implementing the jQuery framework for my main JavaScript programming tasks. Lastly, I have a global JavaScript object instance (singleton) named ...

Tips for accessing a DOM element's ::before content using JavaScript

Is there a way to retrieve the content of a DOM element's ::before pseudo-element that was applied using CSS3? I've attempted several methods without success, and I'm feeling very confused! // https://rollbar.com/docs/ const links = docum ...

Angular rxjs Distinctions

Coming from AngularJS to Angular, I'm still trying to wrap my head around rxjs observable. For example: User.ts export class User { id?:any; username:string; password:string; } Using <User[]> myUser(header: any) { const url = `${this.mainUr ...

Subdomain triggers 504 Gateway Timeout error in NextJS

Having set up two deployments of identical NextJS codebase on Digital Ocean's App Platform, each pointing to different domain names and databases, I've encountered varying behavior between the two servers. Server 1, running on https://example.com ...