Could not find a declaration file for module 'vue-html-to-paper'

Question

I am trying to get a sample project working with HTML to PDF but I keep getting an error saying.

Could not find a declaration file for module 'vue-html-to-paper'

However, it is in my node_modules

index.js

import Vue from 'vue'
import VueRouter, { RouteConfig } from 'vue-router'
import VueHtmlToPaper from 'vue-html-to-paper';

Vue.use(VueHtmlToPaper);
Vue.use(VueRouter)

component

<template>
<div>
    <div>
        <h2>I am a H2 tag</h2>
    </div>
     <!-- SOURCE -->
    <div id="printMe">
      <h1>Print me!</h1>
      <div>&#x25A0; &#x25A0; &#x25A0; &#x25A0; &#x25A0; &#x25A0;</div>
    </div>
    <!-- OUTPUT -->
    <!-- https://printjs.crabbly.com/ -->
    <button @click="print">Click to print!</button>

</div>

</template>

<script lang="ts">
import Vue from 'vue';
import VueHtmlToPaper from 'vue-html-to-paper';

export default class TestComponent extends Vue {

  print () {
      // Pass the element id here
      this.$htmlToPaper('printMe');
    }

}
</script>

I have deleted the node_modules a few times to no avail. Has anyone run into this issue before with this package?

package.json file

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "docx": "^5.4.1",
    "vue": "^2.6.11",
    "vue-html-to-paper": "^1.3.1", <---- here
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },

Answer 1

Are you sure the package is installed (aka: can you post your package.json)? It seems your editor is giving some kind of warning/error by underlining the package name which might suggest something is off there.

Secondly: if you already import the package and register it with Vue in index.js, there is no need of importing it again in the component.

Answer 2

The vue-html-to-paper package doesn't have any type declaration files (*.d.ts), so your app will have to declare the module itself. That is, to resolve the Could not find a declaration file error, declare the vue-html-to-paper module by adding the folowing line to src/shims-vue.d.ts:

declare module 'vue-html-to-paper';

To augment the Vue prototype with the plugin's $htmlToPaper() method, create src/vue-html-to-paper.d.ts with these contents:

import Vue from 'vue';

interface HtmlToPaperOptions {
  name: string;
  specs: string[];
  replace: boolean;
  styles: string[];
}

declare module 'vue/types/vue' {
  interface Vue {
    $htmlToPaper: (el: Element, localOptions?: Partial<HtmlToPaperOptions>, cb?: () => boolean) => void;
  }
}

export {}

...and then restart VS Code's TypeScript Language Service (or just restart the IDE itself) to load the new type declarations file.