Search code examples
javascripttypescriptvue.jskonvajs

Vue Typescript Konva. Canvas onClick throws "Uncaught SyntaxError: Function statements require a function name"

I doubt this is a Konva specific question but since I am using the library as the basis of my example I wanted to include the bare minimum of my code to replicate this.

Whenever the onMouseDownHandler (and in my full code onMouseUpHandler as well) is fired by clicking on the canvas the error "Uncaught SyntaxError: Function statements require a function name" is thrown in my google dev tools console as shown below. Gif

From reading the docs I have written this using the correct syntax. Any help would be greatly appreciated as I have spent many an hour trying to resolve this.

<template>
  <v-stage
    ref="stage"
    class="konva-stage"
    :config="stageSize"
    :onMouseDown="onMouseDownHandler"
  />
</template>

<script lang="ts">
import Vue from 'vue'
import { Prop } from 'vue-property-decorator'
import Component, { mixins } from 'vue-class-component'
import Konva from 'konva'

@Component({
  name: 'MapCanvas'
})

export default class MapButtons extends Vue {
  stageSize = {
    width: window.innerWidth,
    height: window.innerHeight
  }

  onMouseDownHandler (e: any) : void {
    console.log('mouse down')
  }

}
</script>
<style scoped lang="scss">
.konva-stage {
  background-color: white;
  width: 100%;
  height: 100%;
  position: absolute;
}
</style>
Solution

  • Fixed it myself!

      <v-stage
    ref="stage"
    class="konva-stage"
    :config="stageSize"
    :onMouseDown="onMouseDownHandler" <-- NOT THIS
    @mousedown="onMouseDownHandler" <-- THIS
  />