Unhandled promise rejection TypeError: "A is undefined"

[jfustier]

My method :

async print() {
            const el  = this.$refs.printMe;

            const options = {
                type: 'dataURL'
            }

            this.output = await this.$html2canvas(el);

            console.log(this.output);
        },

When print function is executed :

Unhandled promise rejection TypeError: "A is undefined"

Package.json :

{
    "scripts": {
        "serve": "vue-cli-service serve --open",
        "build": "vue-cli-service build",
        "e2e": "node test/e2e/runner.js",
        "lint": "vue-cli-service lint",
        "dev": "vue-cli-service serve --open",
        "lint-fix": "vue-cli-service lint --fix"
    },
    "dependencies": {
        "axios": "^0.18.0",
        "babel-polyfill": "^6.26.0",
        "chart.js": "^2.7.3",
        "npm": "^6.9.0",
        "qrcode": "^1.3.3",
        "register-service-worker": "^1.5.2",
        "v-dialogs": "^2.0.3",
        "vue": "^2.6.6",
        "vue-chartjs": "^3.4.0",
        "vue-color": "^2.7.0",
        "vue-cookies": "^1.5.13",
        "vue-draggable-resizable": "^2.0.0-rc1",
        "vue-html2canvas": "0.0.4",
        "vue-i18n": "^8.8.1",
        "vue-router": "^3.0.2",
        "vue-router-prefetch": "^1.4.0",
        "vue-select": "^3.1.0",
        "vue2-datepicker": "^2.11.0",
        "vue2-transitions": "^0.2.3",
        "vuejs-uploader": "^0.6.5"
    },
    "devDependencies": {
        "@vue/cli-plugin-babel": "^3.4.0",
        "@vue/cli-plugin-eslint": "^3.4.0",
        "@vue/cli-plugin-pwa": "^3.4.0",
        "@vue/cli-service": "^3.4.0",
        "node-sass": "^4.12.0",
        "sass-loader": "^7.1.0",
        "vue-cli-plugin-i18n": "^0.5.1",
        "vue-template-compiler": "^2.6.6"
    },
    "browserslist": [
        "> 1%",
        "last 2 versions",
        "not ie <= 11"
    ]
}

[jofftiquez]

May I see the template?

[jfustier]

I use an another components : https://github.com/mauricius/vue-draggable-resizable

Template

<div v-if="edit" ref="printMe" class="col-lg-6 offset-lg-3 col-md-10 offset-md-1 col-sm-12 mt-3 mb-3 draggableContainer" v-bind:style="{backgroundColor : model.colors.background}">
        <!-- Qrcode -->
        <v-draggable-resizable v-if="model.objects.qrcode.active" ref="qrcode"
                               :x="model.objects.qrcode.x" 
                               :y="model.objects.qrcode.y" 
                               :w="model.objects.qrcode.width"
                               :h="model.objects.qrcode.height"
                               @dragging="onDragQrcode" @resizing="onResizeQrcode" :parent="true">
            <img :src="qrcode" class="QRcode" />

        </v-draggable-resizable>

        <!-- Logo -->
        <v-draggable-resizable v-if="model.objects.logo.active" ref="logo" 
                               :x="model.objects.logo.x" 
                               :y="model.objects.logo.y" 
                               :w="model.objects.logo.width" 
                               :h="model.objects.logo.height" 
                               @dragging="onDragLogo" @resizing="onResizeLogo" :parent="true">

            <p v-if="!model.upload.name" v-bind:style="{color : model.colors.text, fontSize : model.fontSize.text}">Logo</p>
            <img v-else :src="this.$baseURL + '/uploads/' + model.upload.name" alt="Mon logo" />

        </v-draggable-resizable>

        <!-- Title -->
        <v-draggable-resizable v-if="model.objects.title.active" ref="title" 
                               :x="model.objects.title.x" 
                               :y="model.objects.title.y" 
                               :w="model.objects.title.width" 
                               :h="model.objects.title.height" 
                               @dragging="onDragTitle" @resizing="onResizeTitle" :parent="true">
            <p v-if="!model.fields.title" v-bind:class="model.textPositions.title" v-bind:style="{color : model.colors.text, fontSize : model.fontSize.title}">Title</p>

            <p v-else v-bind:class="model.textPositions.title" v-bind:style="{color : model.colors.text, fontSize : model.fontSize.title}">{{ model.fields.title }}</p>
        </v-draggable-resizable>

        <!-- Description -->
        <v-draggable-resizable v-if="model.objects.description.active" ref="description" 
                               :x="model.objects.description.x" 
                               :y="model.objects.description.y" 
                               :w="model.objects.description.width" 
                               :h="model.objects.description.height" 
                               @dragging="onDragDescription" @resizing="onResizeDescription" :parent="true">

            <p v-if="!model.fields.description" v-bind:class="model.textPositions.description" v-bind:style="{color : model.colors.text, fontSize : model.fontSize.text}">Description</p>
            <p v-else v-bind:class="model.textPositions.description" v-bind:style="{color : model.colors.text, fontSize : model.fontSize.text}">{{ model.fields.description }}</p>

        </v-draggable-resizable>

        <!-- Price -->
        <v-draggable-resizable v-if="model.objects.price.active" ref="price" 
                               :x="model.objects.price.x" 
                               :y="model.objects.price.y" 
                               :w="model.objects.price.width" 
                               :h="model.objects.price.height" 
                               @dragging="onDragPrice" @resizing="onResizePrice" :parent="true">

            <p v-bind:class="model.textPositions.price" v-bind:style="{color : model.colors.text, fontSize : model.fontSize.price}">15.00 €</p>

        </v-draggable-resizable>

        <!-- Item name -->
        <v-draggable-resizable v-if="model.objects.itemName.active" ref="itemName" :x="model.objects.itemName.x" 
                               :y="model.objects.itemName.y" 
                               :w="model.objects.itemName.width" 
                               :h="model.objects.itemName.height" 
                               @dragging="onDragItemName" @resizing="onResizeItemName" :parent="true">

            <p v-bind:class="model.textPositions.itemName" v-bind:style="{color : model.colors.text, fontSize : model.fontSize.itemName}">Item name</p>

        </v-draggable-resizable>

        <!-- Reference -->
        <v-draggable-resizable v-if="model.objects.ref.active" ref="ref" 
                               :x="model.objects.ref.x" 
                               :y="model.objects.ref.y" 
                               :w="model.objects.ref.width" 
                               :h="model.objects.ref.height" 
                               @dragging="onDragRef" @resizing="onResizeRef" :parent="true">

            <p v-bind:class="model.textPositions.ref" v-bind:style="{color : model.colors.text, fontSize : model.fontSize.ref}">Reference</p>

        </v-draggable-resizable>
    </div>

[jofftiquez]

Can you add this below the const el = this.$refs.printMe; and show me the output?

console.warn(this.edit, el);

[jfustier]

[jfustier]

uninstall & reinstall have solved this issue for me..

[jofftiquez]

Does it? Good to hear that. I shall close this issue now.