Can't import module / library in Vue

Question

So i installed a slider library called hooper in VueJS 3, and i import it in my local like this

<template>
  <hooper>
    <slide>1</slide>
    <slide>1</slide>
    <slide>1</slide>
    <slide>1</slide>
    <slide>1</slide>
  </hooper>
</template>
<script>
 import { Hooper, Slide } from 'hooper'
 import 'hooper/dist/hooper.css'

 export default {
  components: {
    Hooper, Slide
  }
 }
</script>

Also i can't import hooper (import { Hooper, Slide } from 'hooper') There are three dots under the word hoope, and it says:

Could not find a declaration file for module 'hooper'. 'c:/Users/nurdi/pkl/template/java-vibes/node_modules/hooper/dist/hooper.js' implicitly has an 'any' type.


Try `npm i --save-dev @types/hooper` if it exists or add a new declaration (.d.ts) file containing `declare module 'hooper';`Vetur(7016)

Also there is an error on the console, it says:

Uncaught TypeError: vue__WEBPACK_IMPORTED_MODULE_0__.default is not a constructor
at eval (hooper.esm.js?7e04:172:1)
at Module../node_modules/hooper/dist/hooper.esm.js (chunk-vendors.js:1393:1)
at __webpack_require__ (app.js:849:30)
at fn (app.js:151:20)
at eval (GuestBook.vue?ed46:64:1)
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/components/GuestBook.vue?vue&type=script&lang=js (app.js:986:1)
at __webpack_require__ (app.js:849:30)
at fn (app.js:151:20)
at eval (GuestBook.vue?9b66:1:1)
at Module../src/components/GuestBook.vue?vue&type=script&lang=js (app.js:1840:1)

Answer 1

I think there are multiple issues in your file:

• Could not find a declaration file [..] is a Typescript error, which is probably happening because the Vue CLI comes with TS out of the box. If you don't use TS, change <script> to <script lang="js">. I recommend always doing this either way.
• Import vue and change export default {} export default Vue.extend({}) to let the app know it's a Vue component.
• Uncaught TypeError: vue__WEBPACK_IMPORTED_MODULE_0__.default is not a constructor usually means a default import could not be found in the file you're referencing. Since you're not trying to import a module default, I can only hope that one of the previous two issues is the cause of this. It could very well be that this issue lies within the library itself.

P.S. I'm used to coding in Vue 2, so it's possible that some of my suggestions don't apply the exact same way in Vue 3.