Error on constructor

[massimiliamanto74]

I have a ts project with webpack. I have installed the package with npm: npm i @tarekraafat/autocomplete.js. I have add the library in my file: import { autoComplete } from "@tarekraafat/autocomplete.js"; I try to create a autocomplete using demo example:

const autoCompleteJS = new autoComplete({
      placeHolder: "Search for Food...",
      data: {
        src: [
          "Sauce - Thousand Island",
          "Wild Boar - Tenderloin",
          "Goat - Whole Cut",
        ],
        cache: true,
      },
      resultItem: {
        highlight: true,
      },
      events: {
        input: {
          selection: (event) => {
            const selection = event.detail.selection.value;
            autoCompleteJS.input.value = selection;
          },
        },
      },
    });

I receive this error: Uncaught TypeError: _tarekraafat_autocomplete_js__WEBPACK_IMPORTED_MODULE_0__.autoComplete is not a constructor

• [ ] System Information

  • [ ] Browser type and version: Chrome Version 93.0.4577.63
  • [ ] OS type and version: MacOs Big Sur version 11.5.2
  • [ ] WINDOWS: be sure to indicate which terminal you're using -- (i.e., cmd.exe, powershell, git- bash, cygwin, Ubuntu via windows subsystem for linux, etc...): teminale shz inside visaul studio
  • [ ] Node version (IF applicable) v14.17.0
  • [ ] Any error messages that may be in the console where you ran npm start
  • [ ] Any error messages in the JS console: Uncaught TypeError: _tarekraafat_autocomplete_js__WEBPACK_IMPORTED_MODULE_0__.autoComplete is not a constructor

• [ ] Describe the bug When I call const autoCompleteJS = new autoComplete({options}) the error below return

• [ ] To Reproduce Steps to reproduce the behavior: <!-- Example below-!> Open the app

• [ ] Expected behavior Create the autocomplete

• [ ] Screenshots or GIF's (optional, but HIGHLY RECOMMENDED) If applicable, add screenshots to help explain your problem.

• [ ] Additional context (optional) Add any other context about the problem here.

[folknor]

autoComplete.js is compiled as an umd module, which means webpack sometimes gets confused. There's a few silly things you can try;

const autoComplete = require("@tarekraafat/autocomplete.js")
const autoComplete = require("@tarekraafat/autocomplete.js/dist/autoComplete")
import { autoComplete } from "@tarekraafat/autocomplete.js/dist/autoComplete"
import { autoComplete } from "@tarekraafat/autocomplete.js/src"

I use the last one. But I don't use webpack, I use parcel nightlies.

Or you need to use library: { type: 'umd' } }: https://webpack.js.org/guides/author-libraries/#expose-the-library

https://jameshfisher.com/2020/10/04/what-are-umd-modules/ https://stackoverflow.com/questions/50435253/webpack-imported-module-is-not-a-constructor