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