"TypeError: Cannot call a class as a function" in Vue

This issue has been tracked since 2021-09-06.

I'm getting the following error message when trying to implement simple keyboard into my page:

TypeError: Cannot call a class as a function

The stack trace is:

vue.esm.js?a026:1897 TypeError: Cannot call a class as a function
    at b (index.js?dd7f:12)
    at t (index.js?dd7f:12)
    at resolveAsyncComponent (vue.esm.js?a026:3695)
    at createComponent (vue.esm.js?a026:3209)
    at _createElement (vue.esm.js?a026:3431)
    at createElement (vue.esm.js?a026:3362)
    at vm._c (vue.esm.js?a026:3500)
    at Proxy.render (eval at ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"3bf25218-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/ProdList.vue?vue&type=template&id=0a25844f& (0.js:69), <anonymous>:242:11)
    at VueComponent.Vue._render (vue.esm.js?a026:3557)
    at VueComponent.updateComponent (vue.esm.js?a026:4064)

Based on your (broken) Vue example (https://hodgef.com/simple-keyboard/editor/?d=hodgef/vue-simple-keyboard/tree/master), my implementation looks as follows (reduced example):

<template>
  <div>
    <CModal id="on-screen-keyboard"
        :show.sync="showOnScreenKeyboard">

      <Keyboard @onChange="onChange" @onKeyPress="onKeyPress" :input="input" />

    </CModal>
  </div>
</template>

<script>
import Keyboard from 'simple-keyboard';

export default {
  components: {Keyboard},
  data() {
    input: ''
  }
  methods: {
            onChange(input) {
                this.input = input;
            },
            onKeyPress(button) {
                console.log("button", button);
            },
            onInputChange(input) {
                this.input = input.target.value;
            },
  }
}
</script>

Any idea, why this doesn't work?

hodgef wrote this answer on 2021-09-06

Hello @AnReZa, could you provide a test github repo showing your issue?

The sandbox in question hasn't been updated recently, therefore I suspect a breaking change in CodeSandbox. I have filed the issue codesandbox/codesandbox-client#6105 with their team. Edit: The Codesandbox team fixed the issue and the Vue demos should be accessible now.

I will reopen this as soon as I get a repro regarding your error above.

Thanks,
Francisco Hodge

More Details About Repo
Owner Name hodgef
Repo Name simple-keyboard
Full Name hodgef/simple-keyboard
Language JavaScript
Created Date 2018-03-02
Updated Date 2022-12-06
Star Count 1738
Watcher Count 20
Fork Count 130
Issue Count 0

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date