After setting up a slider library called Hooper in VueJS 3, I imported it locally 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>
I encountered an issue while trying to import hooper (import { Hooper, Slide } from 'hooper'). There are three dots under the word "hooper", indicating:
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)
In addition, an error appeared on the console stating:
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)