Mysterious VueKonva Component with TypeScript

After successfully configuring TypeScript for my Vue 2 project, I encountered a problem with my VueKonva plugin. Upon launching the app, I received the error message below.

I attempted to resolve the issue by adding "vue-konva" to the types section in the tsconfig.json file without success. Additionally, creating a vue-konva.d.js file did not provide a solution either. Can someone assist me in identifying my mistake?

Failed to compile.

src/main.ts:8:3
TS2769: No overload matches this call.
  ...

The code from main.ts is shown below:

import Vue from "vue";
import App from "@/App.vue";
import VueKonva from 'vue-konva';

Vue.use(VueKonva);

new Vue({
  VueKonva,
  render: h => h(App)
}).$mount("#app");

In the tsconfig.json file:

{
  "compilerOptions": {
    "target": "esnext",
    ...
    ],
    "types": [
      "vue-konva",
      "vuetify",
      "webpack-env"
    ],
    ...
  },
  "include": [
    ...
  ],
  "exclude": [
    "node_modules"
  ]
}

Answer №1

Your issue has been correctly identified by the error message.

  >  8 |   VueKonva,
       |   ^^^^^^^^

For information on how to use VueKonva, refer to the project documentation.

import { createApp } from 'vue';
import App from './App.vue';
import VueKonva from 'vue-konva';

const app = createApp(App);
app.use(VueKonva);
app.mount('#app');

Below is a functional example for Vue v3

const { createApp } = Vue 

const app = createApp({
data() {
  return {
    configKonva: {
      width: 200,
      height: 200,
    },
    configCircle: {
      x: 100,
      y: 100,
      radius: 70,
      fill: 'red',
      stroke: 'black',
      strokeWidth: 4,
    }
  }
}});
app.use(VueKonva);
app.mount('#app');
<div id="app">
  <v-stage ref="stage" :config="configKonva">
    <v-layer ref="layer">
      <v-circle :config="configCircle"></v-circle>
    </v-layer>
  </v-stage>
</div>
<!--1. Link Vue Javascript & Konva-->
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="790f0c1c394a574b574d4e">[email protected]</a>/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d0bbbfbea6b190e8fee4fee3">[email protected]</a>/konva.min.js"></script>
<!--2. Link VueKonva Javascript -->
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7a0c0f1f571115140c1b3a49544a5448">[email protected]</a>/umd/vue-konva.js"></script>

UPDATE

  1. Vue v2 does not have the $mount method.
  2. Avoid placing the plugin within the App definition

Your code:

new Vue({
  // this is not necessary -> VueKonva,
  render: h => h(App)
}) // this is not necessary -> .$mount("#app");

Here is a functioning example for Vue v2

Vue.use(VueKonva)

new Vue({
  el: '#app',
  data() {
    return {
      configKonva: {
        width: 200,
        height: 200,
      },
      configCircle: {
        x: 100,
        y: 100,
        radius: 70,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 4,
      }
    }
  }
})
<div id="app">
  <v-stage ref="stage" :config="configKonva">
    <v-layer ref="layer">
      <v-circle :config="configCircle"></v-circle>
    </v-layer>
  </v-stage>
</div>
<!--1. Link Vue Javascript & Konva-->
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="513a3e3f273011697f657f62">[email protected]</a>/konva.min.js"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4c3a39290c7e627b627d78">[email protected]</a>/dist/vue.min.js"></script>
<!--2. Link VueKonva Javascript -->
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d0a6a5b5fdbbbfbea6b190e2fee1fee7">[email protected]</a>/umd/vue-konva.js"></script>

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

Is there a way to programmatically retrieve the 'title' attribute of a route as it updates during navigation?

Scenario and Issue I have set up various routes in my app-routing.module like this: // imports const routes: Routes = [ { path: 'home', title: 'Home Route', component: HomeComponent }, { path: 'other', title: 'Other ...

Is it possible to initialize ckeditor with a base64 encoded string?

Is there a way to open ckeditor using a base64 string as data? <ckeditor [editor]="Editor" data="Base64String???"> Alternatively, are you aware of any base64 docx viewers for angular? Thank you in advance! ...

Tips for transitioning from Angular to Angular 2: Overcoming key challenges

Our current Angular project is highly developed, but with the emergence of Angular 2 and its advanced features and improved performance, we are considering migrating our existing work. However, we are concerned about the potential challenges that may ari ...

Is it advisable to pass useSelector to useState in React?

Hey everyone, I've got a question about preferences for a specific method: When working with a React functional component in TypeScript that retrieves values from Redux State using useSelector, which approach do you prefer? 1) const campaign = us ...

Changing Vuex store state by using mapped actions within the render function of a Vue component

I have been working on a slider with a modal that should open when an image is clicked. The modal state is stored in my Vuex store, and I need to dispatch an action from the image tag within my render function. While following Vue documentation, I have at ...

Importing TypeScript enums into a Vue or browser context can lead to errors or the need for additional dependencies

I'm encountering a problem when trying to import type definitions from a separate module in my Vue project. Below is the structure of the typedefs I am attempting to import: import { Server, createServer } from "net"; export namespace Testable { ...

The function parameter in Angular's ngModelChange behaves differently than $event

How can I pass a different parameter to the $event in the function? <div class='col-sm'> <label class="col-3 col-form-label">Origen</label> <div class="col-4"> <select ...

Attempting to categorize JSON object elements into separate arrays dynamically depending on their values

Here's the JSON data I'm currently working with: ?$where=camis%20=%2230112340%22 I plan to dynamically generate queries using different datasets, so the information will vary. My main objective is to categorize elements within this array into ...

What is the best way to showcase the data retrieved from axios in a Vuejs table?

I am new to Vuejs and encountered an issue while trying to display user information retrieved from API endpoints using axios. Below is the code snippet for fetching data: import axios from 'axios'; export default { data(){ return{ ...

What is the process for extracting the "user_id" from the token payload and inserting it into the JSON POST form in Django REST with SimpleJWT and Vue3?

After storing access and refresh tokens in my local storage, I have decoded the access token and found the "user_id" in the payload. However, I am struggling to comprehend how to include this "user_id" in a POST request to the REST API. Is it retrieved fro ...

Locating and casting array elements correctly with union types and generics: a guide

My type declarations are as follows: types.ts: type ItemKind = 'A' | 'B'; type ValidItem<TItemKind extends ItemKind = ItemKind> = { readonly type: TItemKind; readonly id: number; }; type EmptyItem<TItemKind extends ...

Angular 2 Component remains persistent when accessed through parameterized routes

Here is my test route with parameter T1: { path: 'Test/:T1', component: TestComponent }, After routing from 'Test/1' to 'Test/2', I noticed that my TestComponent does not reinitialize. Could this be a problem with th ...

Retrieving unique values from an array in VueJS without compromising multiple data elements

Recently delving into VueJS, I have encountered an obstacle in extracting unique values from an array. Within my data array consisting of multiple columns, I aim to retrieve distinct values for checkboxes implementation. My challenge arises when attempting ...

Issue with Prettier AutoFormatting in a project that combines TypeScript and JavaScript codebases

Recently, I've started incorporating TypeScript into an existing JavaScript project. The project is quite large, so I've decided to transition it to TypeScript gradually. Below is a snippet from my eslintrc.js file: module.exports = { parser: ...

Is there a way to showcase a specific chart from Charts.vue within App.vue, even though Charts.vue includes multiple charts in a Vue.js application

I implemented Chartjs to showcase various charts. Within my charts.vue component, I have defined different types of charts. Below is the structure of Charts.vue: <template> <div class="chart-container"> <canvas ref="cha ...

How can you utilize both defineProps with TypeScript and set default values in Vue 3 setup? (Typescript)

Is there a way to use TypeScript types and default values in the "defineProps" function? I'm having difficulty getting it to work. Code snippet: const props = defineProps<{ type?: string color?: 'color-primary' | 'color-danger&a ...

Exploring a JSON Object in TypeScript: A Step-by-Step Guide

I am currently utilizing Angular 7 and have a query that returns JSON data with a specific format: [ { "text": "test 1", "value": "1", "nbr": "1", "children": [ { "text": "test 1_1", ...

Tips for Fixing the 'Maximum Call Stack Exceeded' Issue with 'useClient' in Component

I'm currently working on developing a Next.js application, and I've encountered a problem while trying to implement the useClient hook in one of my components. Whenever I include the useClient hook in my component, I end up receiving a "Maximum c ...

Error: TypeScript cannot find @types declaration for restify-client

Currently, I am attempting to upgrade to the most recent version of restify (6.4.2). Our application is written in TypeScript. The clients have now been separated into their own package starting from the previous version of restify we were using (4.3.2) - ...

Determine through programming whether an ng-content slot has been filled in Angular

I have developed a dynamic Angular component that utilizes content projection and slots in the following way: <div class="content-wrapper"> <div class="short-wrapper" [style.opacity]="expanded ? 0 : 1"> ...