Ошибка подключения плагинов | Vue

Пытаюсь подключить библиотеку Hooper. Сделал все, как написано у них на сайте:

1. npm i hooper
2. import { Hooper, Slide } from 'hooper'
3. components: { Hooper, Slide }

Но возникает ошибка:

Uncaught TypeError: vue__WEBPACK_IMPORTED_MODULE_0__.default is not a constructor
    at eval (hooper.esm.js?7e04:172)
    at Module../node_modules/hooper/dist/hooper.esm.js (chunk-vendors.js:1106)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (Main.vue?cd56:25)
    at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader-v16/dist/index.js?!./src/views/Main.vue?vue&type=script&lang=js (app.js:950)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (Main.vue?f132:1)
    at Module../src/views/Main.vue?vue&type=script&lang=js (app.js:1161)

Перепробовал все советы в интернете, но не помогает. И самое главное, что так вообще со всеми плагинами, какие бы не использовал.

    <template>
    <div>
        <div id="search__wrap" v-bind:class="{ header: true, active: search_state }">
            <div @click="toggleSearch" class="icon">
                <svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="7.5" cy="7.5" r="6.5" stroke="white" stroke-width="2"></circle>
                    <line x1="12.7071" y1="12.2929" x2="18.7071" y2="18.2929" stroke="white" stroke-width="2"></line>
                </svg>
            </div>
            <input class="search" type="text">
        </div>
        <hooper>
            <slide>
                slide 1
            </slide>
            <slide>
                slide 2
            </slide>
            ...
        </hooper>
    </div>
</template>

<script>


import { Hooper, Slide } from 'hooper';

    export default {
        data: () => ({
            search_state: false
        }),
        created() {
            document.addEventListener('click', (e) => {
                if (!document.getElementById('search__wrap').contains(e.target) && this.search_state === true) this.toggleSearch();
            })
        },
        name: "Main",
        methods: {
            toggleSearch () {
                this.search_state = !this.search_state
            }
        },
        components: {
            Hooper,
            Slide
        }
    }
</script>