Vue-dropzone: umd-compatible version

Created on 7 Nov 2017  路  17Comments  路  Source: rowanwins/vue-dropzone

You should compile an actually umd compatible and loadable version for the browser without require so that it can be used with e.g unpkg.com

Most helpful comment

using require('dropzone') it probably gets changed to an import statement

That's what I want ;)
I don't care about the building process of dist/vue2Dropzone.js. I wan't to use vue-dropzone in my project but can't because of require('dropzone').

All 17 comments

Hi @Fohlen

I think the dist version is umd, see here

@rowanwins https://unpkg.com/[email protected]/dist/vue2Dropzone.js tell's you that there's a require statements inside for dropzone. Not quiet umd compatible

@Fohlen @rowanwins We have base library of dropzone where we used require('dropzone)

Webpack can't handle the require() function correctly...

@CinKon that is not entirely true.
@vrajroham I see. Imho you should handle it like this

  • use the dist folder to upload the bundle (which is currently in docs) as vue2-dropzone.min.js
  • use the src folder the way it is currently used
  • include the bundle from the docs, e.g via unpkg or raw GitHub link
  • use the "main" tag of npm to include the src/index.js as the npm version.

After bundling for production, the console tells me either (void 0) is not a function or n is not a function at the point where your dist/vue2Dropzone.js says require('dropzone')

@CinKon which is the fault because of the way the project's webpack.conf.js is configured. Not the fault of webpack itself.

my understanding is that webpack has nothing to do with the building of dist/vue2Dropzone.js, it's all done by rollup.

I think it may be that I need to add some additional config in the rollup commonjs plugin to make sure that the dropzone dependency gets bundled in, and also rather than using require('dropzone') it probably gets changed to an import statement
https://github.com/rowanwins/vue-dropzone/blob/master/rollup.config.js#L20

I'll do some digging because my intention was for the dropzone depency to be bundled in the dist version

using require('dropzone') it probably gets changed to an import statement

That's what I want ;)
I don't care about the building process of dist/vue2Dropzone.js. I wan't to use vue-dropzone in my project but can't because of require('dropzone').

I have the same problem:

[Vue warn]: Error in mounted hook: "Error: Module name "dropzone" has not been loaded yet for context: _. Use require([])
http://requirejs.org/docs/errors.html#notloaded"

found in

---> <VueDropzone>
       <Root>

I have the same problem.
It works on dev server but failed on build

TypeError: n is not a function

I am having the same problem. Is there a resolution for how to bundle this correctly with webpack for production/deployment? Thanks. @Fohlen

@rowanwins Any update on this, even a work around to get webpack building to work as expected? We used vue2-dropzone because it looked like a helpful wrapper, but if it cannot be built and included with webpack it will have cost us time rather than saved us time. Thanks for any guidance. @Fohlen

Hi @bam-tbf

What is the error you're getting?

This is an open source project so anyone is welcome to take a look at the rollup config to try and identify the issue, otherwise you just have to wait for me to have time to do it :)

@rowanwins I am getting the "n is not a function" error that others have encountered. As with the others it happens with a production webpack build, but not with webpack-dev-server. I was hoping a solution had been found but just not posted, but seems like a solution is not yet available. I will also take a look today. Thank you.

Hi various folks

Thanks to some work by @bam-tbf I've now released a new version of this as v3.2.1 . If someone would like to give it a try and check that it works for them that would be great.

Thanks,
Rowan

Closing as im presuming it's resolved

Was this page helpful?
0 / 5 - 0 ratings