Dropzone: 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 [email protected]
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 [email protected] 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
https://github.com/webpack/webpack/issues/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.