VueJS/Typescript error: Cannot find module 'my-module' or its corresponding type declarations

Question

I have a Vue2 setup with Nuxt and Typescript. I'm trying to install the vue-slick-carousel module using yarn but Typescript is giving me the error: "Cannot find module 'vue-slick-carousel' or its corresponding type declarations". Typescript newbie over here: This issue happens when I try to import the module in my component:

<script lang="ts">
  import Vue from 'vue'
  import { VueSlickCarousel } from 'vue-slick-carousel'
 
  export default Vue.extend({
     components: {
       VueSlickCarousel
     }
     ...
  })
</script>

Contents of tsconfig.json file:

{

"compilerOptions": {
    "target": "ES2018",
    "module": "ESNext",
    "moduleResolution": "Node",
    "lib": [
      "ESNext",
      "ESNext.AsyncIterable",
      "DOM"
    ],
    "esModuleInterop": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noEmit": true,
    "experimentalDecorators": true,
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./*"
      ]
    },
    "types": [
      "@types/node",
      "@nuxt/types",
      "nuxt-i18n"
    ]
  },
  "exclude": [
    "node_modules",
    ".nuxt",
    "dist"
  ]
}

And my vue-shim.d.ts file, not sure what to add there:

import Vue from 'vue'
declare module 'vue/types/vue' {
  interface Vue {
    $i18n: {
      locale:string,
      locales:{code:string, name:string, file:string}[]
    }
  }
}

I know the issue comes from Typescript not being able to find the module types. I found a library called "@types/slick-carousel" that installs the types but I'm not sure what to do next. Do I need to manually define the types?

Answer 1

in tsconfig.json add @types/slick-carousel to types:

  "types": [
      "@types/node",
      "@nuxt/types",
      "nuxt-i18n",
      "@types/slick-carousel"
    ]