The declaration file for the module 'vue-html-to-paper' was not located

Struggling to make a sample project work with HTML to PDF, but encountering an error message stating:

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

Even though it resides 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>

https://i.sstatic.net/9UMNE.png

Reinstalled node_modules multiple times without success. Any insights on dealing with this issue related to the 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

Have you confirmed that the package is indeed installed? Could you provide your package.json for further assistance? It appears that your editor is flagging some sort of issue with the package name, indicating a potential problem.

Additionally, if you have already imported and registered the package in index.js with Vue, there should be no need to import it again within the component.

Answer №2

When using the vue-html-to-paper package, you may encounter an issue where there are no type declaration files (*.d.ts) available. In order to address this, you will need to manually declare the module within your application. This involves adding a line to your src/shims-vue.d.ts file:

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

In order to extend the Vue prototype with the plugin's $htmlToPaper() method, create a new file called src/vue-html-to-paper.d.ts with the following 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 {}

After creating this new type declarations file, make sure to restart VS Code's TypeScript Language Service or your IDE in order to load the changes.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I call a method from a class using Typescript when getting an error saying that the property does not exist on the

Below is a service definition: export class MyService { doSomething(callbacks: { onSuccess: (data: Object) => any, onError: (err: any) => any }) { // Function performs an action } } This service is utilized in a component as shown be ...

javascript identify dissimilarities within arrays

Working on an Angular 2 application and attempting to identify the difference between two arrays (last seven days and missing dates within the last seven days). Everything works fine when initializing the array through a string, like in example code 1. How ...

Error: Combining objects that are not defined is not allowed

While running $ quasar dev on my Vue project, I encountered the following error: ~/project/node_modules/webpack-merge/dist/index.js:63 throw new TypeError("Merging undefined is not supported"); ^ [ TypeError: Mer ...

What sets asyncData apart from methods in Nuxt.js?

I am currently utilizing asyncData to fetch data from an API, however it is restricted to pages and cannot be used in components. On the other hand, methods can be used in both pages and components. As these two methods function similarly, I am consider ...

Display the current date in YYYY/MM/DD format using a single method in React and TypeScript

Is there a better way to retrieve YYYY/MM/DD data using just one method? I attempted the following: date = created_at // from API const sendDate = `${String((date.getMonth() + 1)).padStart(2, '0')}${String(date.getDate()).padStart(2, '0&apos ...

Mocking callback or nested function with jest

My code snippet looks like this: public async waitForElementSelected(element: WebdriverIO.Element) { /** * Maximum number of milliseconds to wait for * @type {Int} */ const ms = 10000; await browser.waitUntil(async () =>{ ...

Utilize useState and useEffect to efficiently sort through an item list based on its current state

I am currently working on an application where I have a list of items and I need to create a details page for each item when clicked. I am facing some challenges in implementing this functionality using useState, useEffect, and typescript. I have previousl ...

Achieve validation of numerous variables without the need for a string of if-else

If we have three variables, such as firstName, lastName, and email, how can we check if they are empty or not without using multiple if else blocks? let firstName = "John"; let lastName = "Doe"; let email = "john.doe@example.com"; if (firstName.trim() == ...

Need help in setting the default TIME for the p-calendar component in Angular Primeng version 5.2.7?

In my project, I have implemented p-calendar for selecting dates and times. I have set [minDate]="dateTime" so that it considers the current date and time if I click on Today button. However, I would like the default time to be 00:00 when I click ...

Creating JPEG images with specified dimensions. How can you add W x H sizing to an image?

I have been searching for a Deno/TypeScript code snippet that can create basic images with dimensions embedded on them. I have provided an example of the code below, which generates images in JPEG format, base64, and dataURL. The code works by adding RGB ...

Is there a way to differentiate between a plain object and a class instance in Typescript?

Specifically, I am looking to differentiate between primitive types and plain objects versus class instances. let x = {y:5} // this is acceptable class X { y = 5; } let x = new X(); // this is not permissible ...

There is no overload that matches this call in Next.js/Typescript

I encountered a type error stating that no overload matches this call. Overload 1 of 3, '(props: PolymorphicComponentProps<"web", FastOmit<Omit<AnchorHTMLAttributes, keyof InternalLinkProps> & InternalLinkProps & { ...; ...

Unable to utilize the data-placed value in the template; only the props value is functional

I am utilizing the value from props and changing the class based on it. Below is the code that is currently working: <div class="modal" :class="{'is-active': aa}" > However, when I attempt to make a check based on the value of isActive fr ...

Guide on merging non-modular JavaScript files into a single file with webpack

I am trying to bundle a non-modular JS file that uses jQuery and registers a method on $.fn. This JS must be placed behind jQuery after bundling. Here is an example of the structure of this JS file: (function($){ $.fn.splitPane = ... }(JQuery) If y ...

Vite HMR causes Vue component to exceed the maximum number of recursive updates

After making changes to a nested component in Vue and saving it, I noticed that the Vite HMR kept reloading the component, resulting in a warning from Vue: Maximum recursive updates exceeded... Check out the online demo on stackblitz. Make a change in Chi ...

Using a combination of Vue.js and AJAX to make requests within a v-for loop, all while

I have a set of data (todos array) that displays in my model, and I am rendering this data in a list. I am trying to implement a functionality on the list that whenever click on any item on the list, the selected variable's value should be updated wi ...

Function that observes with the pipe syntax

Is it possible to apply map, switchMap, or any other operator in conjunction with a function that outputs an observable? The objective here is to transform the result of the observable function and utilize that value during the subscription to another ob ...

Passing parent props to child components in Vue.js - A comprehensive guide!

Trying to understand the process of passing a prop from parent to child components. If I include the prop attribute with the #id within the child component tag, like Image cid="488484-49544894-584854", it functions correctly. However, I am interested in u ...

What is the significance of requiring a specific string in a Typescript Record when it is combined with a primitive type in a union?

I am facing an issue with the following data type: type ErrorMessages = Record<number | 'default', string>; When I declare a variable like const text: ErrorMessages = {403: 'forbidden'}, Typescript points out that default is miss ...

Discovering appropriate variable names within Vue components

I need to find all occurrences of specific variable names within my Vue components. I have a list of variables in my program and I want to check which components each variable is being used in. Here's an example: let x = ['test_one', &apos ...