Dropzone is not defined when used inside a component

Question

Im currently trying to import vue2-dropzone into my Laravel project so it is using Laravel mix.

I am importing it in my bootstrap.js as below:

import vueDropzone from "vue2-dropzone";
Vue.component('vueDropzone', vueDropzone)

I then want to be able to use in one of my components which is inside a file called "CreatePersonalExpense.vue". This component is accessed using Vue router.

Below is a snippet of how it is being used in my component:

<template>

<div class="form-row py-2">
    <div class="col-md-12">
        <h4>Upload</h4>
        <vue-dropzone v-on:vdropzone-sending="sendingFiles" id="drop1" ref="myVueDropzone" @vdropzone-complete-multiple="afterAllFilesUploaded" :options="dropOptions"></vue-dropzone>
    </div>
</div>

</template>

<script>
    export default {

        data() {
            return {
                type: "personal",
                id: "",
                total: "",
                files: {
                },
                dropOptions: {
                    url: '/api/expenses/files',
                    autoProcessQueue: false,
                    uploadMultiple: true,
                    headers: { "x-csrf-token": document.querySelector('meta[name="csrf-token"]').getAttribute('content') },
                    params: {}
                },
                errors: new Errors(),
                form: new Form(),
            }
        },

        components: {
            vueDropzone
        }
}
</script>

However the dropzone is not recognised and I get the error:

Uncaught ReferenceError: vueDropzone is not defined

However if I were to import the dropzone directly into this Vue component by putting import vueDropzone from "vue2-dropzone"; at the beginning of the script tag, dropzone works fine. Why can't I just include it in the bootstrap.js file and have it work for there?

for imported modules, I mostly use `Vue.use('vueDropzone')` – FirstIndex Feb 19 '19 at 13:17 — FirstIndex, Feb 19 '19 at 13:17

score 2 · Accepted Answer · answered Feb 20 '19 at 01:38

If you already register vueDropzone in bootstrap.js, you don't need to register it again in your component. You should remove this in CreatePersonalExpense.vue

components: {
  vueDropzone
}

vueDropzone is an undefined variable. Just remove it and it should work.

score 1 · Answer 2 · answered Feb 19 '19 at 12:45

1

Try defining as below =>

Vue.component('vue-dropzone', vueDropzone)

answered Feb 19 '19 at 12:45

Riddhi

2,174
1
9
17

I still get `vueDropzone is not defined` is not defined. It's strange as I have other components (such as vue2-datepicker) which are defined exactly the same way and work fine. – Gazz Feb 19 '19 at 12:50
try in components => components: { vueDropzone: vueDropzone } – Riddhi Feb 19 '19 at 12:51
Hey i guess this components part should be in bootstrap.js.Just try removing it from your file. – Riddhi Feb 19 '19 at 13:07
for imported modules, I mostly use `Vue.use('vueDropzone')` – FirstIndex Feb 19 '19 at 13:14
@Riddhi I used `components: { vueDropzone: vueDropzone }` in the component's file and `Vue.component('vue-dropzone', vueDropzone)` in the bootstrap js file which didn't work. I also tried `Vue.use('vueDropzone')` in the bootstrap.js file directly under the import but I got the same error. Very strange.. – Gazz Feb 19 '19 at 14:20

Dropzone is not defined when used inside a component

2 Answers2