`Cannot find module... swap-background` and `addOn is not a constructor`

[Samuel Neff]

I'm having trouble getting this to work with Qwik (similar to React, uses JSX, Vite).

With an import as per the README I get this:

import AccordionSlider, { Autoplay, Buttons, SwapBackground } from 'accordion-slider-js';

Cannot find module '{redacted}/node_modules/accordion-slider-js/src/add-ons/swap-background/swap-background'

The file is there though.

~/{redacted}/node_modules/accordion-slider-js/src/add-ons/swap-background
main > $ ls
swap-background.js

If I change my import to use a relative path then I get this error:

import AccordionSlider, { Autoplay, Buttons, SwapBackground } from '../../../node_modules/accordion-slider-js/src/core/accordion-slider.js';

addOn is not a constructor

Instantiation code:

// ...

        galleryRef.value = new AccordionSlider(
          `#${ galleryId }`,
          {
            addOns: [
              Autoplay,
              Buttons,
            ],
            width: '100vw',
            height: '300px',
            autoplay: true,
            openedPanelSize: '90%',
            closePanelsOnMouseOut: false,
            keyboardOnlyOnFocus: true,
            buttons: true,
            visiblePanels: 3,

          }
        );

The slider looks wonderful. I hope I can get it to work and appreciate any help.

tsconfig.json (relevant portions)

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "target": "ES2017",
    "module": "ES2022",
    "lib": ["es2022", "DOM", "WebWorker", "DOM.Iterable"],
    "jsx": "react-jsx",
    "jsxImportSource": "@builder.io/qwik",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "isolatedModules": true
  }
}

[Samuel Neff]

I was able to get it working with some changes. I exposed the addons on window and rebuilt the project referencing the bundle that now included the add-ons. I'm sure it's not the right way to get it working, but it's working.

I was also doing something wrong on the Qwik side. I needed to use useVisibleTask$ to make sure the code ran on the client and not at build time.

I made a fork with my changes. I don't think they're helpful to others but maybe.

I did write a TypeScript definition file and can make a PR for that if it'd be helpful.

master...samuelneff:accordion-slider-js-bundled:master

Thanks!

Sam