Vue-dropzone: Does not work with runtime-only build

[bobmoff]

At least i get this error:

bundle.js:4420 [Vue warn]: You are using the runtime-only build of Vue where the template option is not available. Either pre-compile the templates into render functions, or use the compiler-included build. 
(found in component <dropzone>)

Error: Invalid dropzone element.

Do you know if it should work without the standalone template compiler ?

[rowanwins]

Hi @bobmoff

Good question re the run-time only build, I've never actually looked at it to be honest. I've always been a bit confused by the run-time only build. I'll do a bit of digging about how to distribute components in a suitable format for both and report back.

Cheers

[rowanwins]

Gday @bobmoff

So I've done a little bit of digging around.

Perhaps try and pull in the .vue file directly, something like
import Dropzone from './node_modules/vue2-dropzone/src/index.vue' // rather than import Dropzone from 'vue2-dropzone'
Does that make any difference?
Cheers

[bobmoff]

I have switched to using cloudinaries own widget for uploading, but will later on probably go back to our custom solution so I will check this out when that times comes. Thanks for sharing!

[rowanwins]

Hi @bobmoff

This issue was addressed by @ndarilek and has been released to npm as version 2.1.7

Cheers

[pdipax]

Hi @rowanwins and @ndarilek,
I have the same issue with last version 2.2.4.
In npm run dev mode I get this message:
You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
Error: Invalid dropzone element.

Any idea?
Best regards, P.

[karlhorky]

The solution was similar to what @romanwins wrote above. Import Dropzone from:

import Dropzone from 'vue2-dropzone/src/index.vue'
// instead of this:
import Dropzone from 'vue2-dropzone'

And you may need to install the less and less-loader packages to your devDependencies (and maybe restart webpack):

npm install --save-dev less less-loader

[Kuchiriel]

@karlhorky Tried your tip, doesn't working here, when webpack compiles, it returns this error:

ERROR in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./node_modules/vue2-dropzone/src/index.vue
Module build failed: ReferenceError: Unknown plugin "transform-runtime" specified in "/home/trevor/Projects/FaceTest/frontend/node_modules/vue2-dropzone/.babelrc" at 0, attempted to resolve relative to "/home/trevor/Projects/FaceTest/frontend/node_modules/vue2-dropzone"

[Kuchiriel]

_"Solved"_ adding "babel-plugin-transform-runtime", "babel-preset-es2015" and "babel-preset-stage-2" to devDependencies in packages.json as well as add a line: "plugins": ["transform-runtime"], in .babelrc.

Now webpack isn't returning any error, but my whole app doesn't show. ;-;

:C

[rowanwins]

Hi @Kuchiriel

Stayed tuned for version 3 of this component which is a complete rewrite, hopefully it'll be out in the next week or so.

[Kuchiriel]

Hi @rowanwins

Great news, thank you very much!