Error: Could not find declaration file for module VueJS application

Question

Hi I am using NuxtJS to build a VueJS application. I have installed an image cropping library vue-croppie. I have imported the Vue component as per the documentation like below

import VueCroppie from 'vue-croppie'

However, I am getting the following error on import statement

Could not find a declaration file for module 'vue-croppie'. 'xxx/node_modules/vue-croppie/dist/vue-croppie.cjs.js' implicitly has an 'any' type. Try npm i --save-dev @types/vue-croppie if it exists or add a new declaration (.d.ts) file containing `declare module 'vue-croppie';

I have tried declaring index.d.ts file at the root of my project with following content but id doesn't solve the problem

declare module 'vue-croppie';

I have tried using require like below as suggested on other posts but of no use

const VueCroppie = require('vue-croppie')

I understand this is a Typescript issue but have no knowledge about Typescript. Can somebody throw more light on this. What is happening and how to fix it.

Thanks

Answer 1

The issue was I had not installed the plugin with VueJS app. Here is how to do it.

VueJS

We can use Vue.use to isntall a plugin before it can be used like below

import Vue from 'vue';
import VueCroppie from 'vue-croppie';

Vue.use(VueCroppie)

NuxtJS

In case of NuxtJS it is little different. The plugin is registered globally, here's how.

1. Create a file called vue-croppie.js under plugin folder. And add the following to it

   import Vue from 'vue'
   import VueCroppie from 'vue-croppie'
   
   Vue.use(VueCroppie)
   

2. In your nuxt.config.js add this under plugins

{ src: '~/plugins/vue-croppie.js', ssr: false }

Now, the plugin will be available globally. So there is no need to import and can be used directly.