Dropzone is not a constructor

[mPisano]

import * as Dropzone from 'dropzone';

this.zone = new (Dropzone)(this.targetElement, {url: this.url || 'unspecified-url', acceptedFiles: 'application/pdf' });

Unhandled rejection TypeError: Dropzone is not a constructor

What did you do???? These changes should not be n a .1 release

i've gone back to:
npm i dropzone@5.7.2
and all is working now

[enyo]

What package manager?

[mPisano]

It's an Aurelia TS App build with NPM\Node\Gulp served by IIS running in the Browser\Chrome

Just upgrading (ie npm update) breaks the project
and if I try NPM i dropzone@5.7.3 or ,4 ,5 ,6 .... they all fail since .2 which is what's running now.

HTH, Thanks
Mike

[enyo]

Are you sure you tested the latest release as well? v5.7.6?

[mPisano]

Yes, just rolled forward again

here is 5.7.6 call to the constructor

here is 5.7.2

The older way finds the function, the newer seems to be a module?

[enyo]

I'll try to find some time to investigate this tomorrow. The file should be a UMD. If you're not doing anything wrong (which I'm assuming is the case, since what you're describing seems rather straight forward and it has worked before) I'll make sure it's solved quickly.

[mPisano]

Also in my config.js

paths: {
"dropzone": "../node_modules/dropzone/dist/dropzone-amd-module",

Thanks,
Mike

[enyo]

I don't think it will make a difference, but could you try to change the path to point to
dropzone directly (without -amd-module)

[mPisano]

yea... tried that - didnt see, to matter, it found it but was still a "Module" and not the Function like prior.

[leonp5]

I can confirm the problem of @mPisano.
5.7.2 works but above not.

[graycrow]

The following import works for me.

import Dropzone from "dropzone/dist/dropzone-amd-module";

[mPisano]

Thanks @leonp5 - Glad I'm not crazy

I can also confirm that @graycrow "import" works, but I also needed to remove the Typings shim

//declare module 'dropzone' {
//}

Now it compiles and works.
Ill test it the old way once @enyo posts a fix

[enyo]

What about import Dropzone from "dropzone/dist/dropzone";?

They should be identical.

[mPisano]

yes, either dropzone or dropzone-amd-module works as long as you "import Dropzone from x"

also if I use the original "import * from dropzone" and I intentionally call the default constructor, it also works

this.zone = new (Dropzone.default)(this.targetElement, {url: this.url || 'unspecified-url', acceptedFiles: 'application/pdf' });
objhect is created, and the original

this.zone = new (Dropzone)(this.targetElement, {url: this.url || 'unspecified-url', acceptedFiles: 'application/pdf' });
Failes with DropZone is not a constructor

So the underlying issue seems to be this new build can't find the default constructor although you can see from the picture above that it's in the module? I think it's related to the following:

see:
https://stackoverflow.com/questions/36388766/unexpected-uncaught-typeerror-xxx-is-not-a-constructor-errors-with-babel-and
and
webpack/webpack#706

HTH
MIke

[enyo]

Thank you so much @mPisano ! That saved me a ton of researching. I'll release it tomorrow.

In the future I'll pack an es module file separately to this, unrelated to modules so it can be imported without the AMD stuff.

[enyo]

Could you please share more of your build process, I'm not able to reproduce it.

I've created a sample project with this dependency:

  "dependencies": {
    "dropzone": "5.7.6"
  }

I then used a simple webpack config:

// webpack.config.js
const path = require("path");

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist"),
  },
};

And inside my src/index.js I have:

import Dropzone from "dropzone";
// Works as well:
// import { Dropzone } from "dropzone";

console.log(new Dropzone("#foo"));

This works as expected

[mPisano]

It is a SPA using AureliaJS
written in TS
using NPM\Node for packages
bundled with Gulp

[enyo]

Can you provide a bare minimum project that I can use (or link me to one) so I can test it out?

[leonp5]

@enyo
I use Dropzone inside a Bootstrap Keen Template. So i'm not really able to share something.
Maybe you can request access to there Github Repo. Normally you do it via this form but maybe they give you access without a order ID because you are maintaing a plugin they use.
They call Dropzone for example in their inbox template. You can see it here
In the DevTools of your browser you can see at the bottom of the page, that there is imported a inbox.js. Inside this file they call Dropzone which they previously imported in their plugins.js like this

window.Dropzone = require('dropzone/dist/dropzone.js')
require('@/src/js/vendors/plugins/dropzone.init.js')

While inside the dropzone.init.js there is only one line: Dropzone.autoDiscover = false;

Maybe this helps.

[7iomka]

For @leonp5 and others (actual for latest version of plugin):

window.Dropzone = require('dropzone').default; 

[leonp5]

@7iomka thanks for your hint.
I initialized Dropzone as you proposed with window.Dropzone = require('dropzone').default;
When i try to post a form without a file i get the the following error:

 myDropzone.defaultOptions is undefined

that comes because of this workaround to make post without file possible:

submitButton.addEventListener('click', (e) => {
            e.preventDefault()
            if (myDropzone.getQueuedFiles().length === 0) {
                // Creating this blob makes dropzone work even if there is no file attached
                const blob = new Blob()
                blob.upload = { 'chunked': myDropzone.defaultOptions.chunking }
                myDropzone.uploadFile(blob)
            }
            else {
                myDropzone.processQueue()
            }
        })

Got it from this Stackoverflow post, second answer.

Do you have a hint for this scenario? Or somebody else?

[xhafan]

Version 5.9.3 gives me Uncaught TypeError: dropzone__WEBPACK_IMPORTED_MODULE_0__ is not a constructor with webpack. Had to revert it back to 5.7.2 . My constructor call:

const dropzone = new Dropzone(uploaderElement,
        {
            addRemoveLinks: true,
            url: resourceApiUrl,
            ...
        });

[enyo]

@xhafan It's very likely because your import is incorrect.

Make sure you use:

const { Dropzone } = require("dropzone"); using Object destructuring

or simply: const Dropzone = require("dropzone").default;

[enyo]

Dropzone v6.0.0-beta.1 has just been pushed and it has a predictable behaviour in regards to this:

ECMAScript / JavaScript module: import Dropzone from "dropzone";
CommonJS module: const { Dropzone } = require("dropzone");

or you use the dropzone-min.js file directly which will provide a window.Dropzone global.

[smandal92]

Error getting in console: ---
DropzoneComponent.html:1 ERROR TypeError: Dropzone is not a constructor
at dropzone.directive.js:58:1
at webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388:1)
at webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run (zone.js:138:1)
at webpackJsonp.../../../core/esm5/core.js.NgZone.runOutsideAngular (core.js:4708:48)
at webpackJsonp.../../../../ngx-dropzone-wrapper/dist/lib/dropzone.directive.js.DropzoneDirective.ngOnInit (dropzone.directive.js:57:1)
at checkAndUpdateDirectiveInline (core.js:12411:1)
at checkAndUpdateNodeInline (core.js:13935:1)
at checkAndUpdateNode (core.js:13878:1)
at debugCheckAndUpdateNode (core.js:14771:50)
at debugCheckDirectivesFn (core.js:14712:1)

Added in .ts file in angular project:
import { DropzoneModule, DROPZONE_CONFIG, DropzoneConfigInterface, DropzoneComponent } from 'ngx-dropzone-wrapper';

Angular version: "@angular/core": "^5.2.4",

Can you give any idea how to fix this issue.
Thankyou in advance