Webpack Javascript - Uncaught TypeError: autoComplete is not a constructor

Podívejme se na tuto modelovou situaci - mám nějaký javascript balíček a pak nějaký javascript kód, který s ním pracuje. Vše funguje v pořádku, ale my chceme využít webpack a pak nastane chyba Uncaught TypeError: autoComplete is not a constructor . Co s tím?

 

Mějme tento kód

< script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.7/dist/autoComplete.min.js">< /script>
< script >
    const autoCompleteJS = new autoComplete({
        selector: () => inputElem,

a pokud chceme použít webpack a provedeme instalaci balíčku

npm i @tarekraafat/autocomplete.js

a do webpacku dame

import '@tarekraafat/autocomplete.js';

a pak uděláme rebuild

npx webpack

a pak upravíme náš javascript kód tak, že dáme pryč

< script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.7/dist/autoComplete.min.js">< /script>

a zavoláme předtím funkční javascript kód

< script">
    const autoCompleteJS = new autoComplete({
        selector: () => inputElem,

tak dostaneme chybu

code/:990 Uncaught TypeError: autoComplete is not a constructor at code/:990:28

 

Řešení

Do webpacku dáme jen

import './components/mapAutocomplete.js';

a obsah souboru mapAutocomplete.js bude:

import autoComplete from '@tarekraafat/autocomplete.js/dist/autoComplete';

const autoCompleteJS = new autoComplete({
    selector: () => inputElem,

a pak uděláme rebuild

npx webpack

 

a vše funguje na jedničku :-)