# Using WebPack Components

**URL:** <https://discourse.aurelia.io/t/using-webpack-components/4045>\
**Category:** Help Requests\
**Created:** [February 16, 2021, 8:17pm UTC](https://discourse.aurelia.io/t/using-webpack-components/4045 "2021-02-16T20:17:51Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![mPisano](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/mpisano/32/1992_2.png) [@mPisano](https://discourse.aurelia.io/u/mPisano)\
**Post date:** [February 16, 2021, 8:17pm UTC](https://discourse.aurelia.io/t/using-webpack-components/4045/1 "2021-02-16T20:17:51Z")

</div>

I have an Aurelia Application built with NPM\Gulp that has been working perfectly. I recently did an NPM update which upgraded all the components including DropZone.  
Dropzone apparently changed it’s build to use WebPack and now Aurelia sees DropZone’s New() Constructor as a Module instead of a function resulting in error " Dropzone is not a constructor"

See some screen shots

> <https://github.com/dropzone/dropzone/issues/1903>
>
> 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...

Interestingly, I also had a similar problem integrating PDFjs; Also built with WebPack… which I gave up on…  
Any Suggestions on how to Require a WebPack component?

---

<div class="post-metadata">

**Author:** ![jbockle](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jbockle/32/607_2.png) [@jbockle](https://discourse.aurelia.io/u/jbockle)\
**Post date:** [February 17, 2021, 12:53am UTC](https://discourse.aurelia.io/t/using-webpack-components/4045/2 "2021-02-17T00:53:03Z")

</div>

are you using js or typescript? have you tried `import Dropzone from 'dropzone'`?

---

<div class="post-metadata">

**Author:** ![mPisano](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/mpisano/32/1992_2.png) [@mPisano](https://discourse.aurelia.io/u/mPisano)\
**Post date:** [February 17, 2021, 1:16am UTC](https://discourse.aurelia.io/t/using-webpack-components/4045/3 "2021-02-17T01:16:56Z")

</div>

I am using TS and I didnt work  
error TS1192: Module ‘“dropzone”’ has no default export.

I also tried  
foo = new Dropzone.dropzone(el., options) in upper and lower case with no success

I’ve always used the AMD build of Dropzone but this new version might just be broke from the author  
I don’t think I have any other dependencies that are built with webpack and didn’t know if there where any known integration issues with Aurela.

Thanks for the help

---

<div class="post-metadata">

**Author:** ![jbockle](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jbockle/32/607_2.png) [@jbockle](https://discourse.aurelia.io/u/jbockle)\
**Post date:** [February 17, 2021, 2:20am UTC](https://discourse.aurelia.io/t/using-webpack-components/4045/4 "2021-02-17T02:20:57Z")

</div>

try setting esModuleInterop to true in your tsconfig (see [docs](https://www.typescriptlang.org/tsconfig#esModuleInterop)), this may break other imports if you are doing `import * as X from 'x'` elsewhere, in which you can change those to `import X from 'x'`

---

<div class="post-metadata">

**Author:** ![graycrow](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/graycrow/32/323_2.png) [@graycrow](https://discourse.aurelia.io/u/graycrow)\
**Post date:** [February 17, 2021, 2:24pm UTC](https://discourse.aurelia.io/t/using-webpack-components/4045/5 "2021-02-17T14:24:56Z")

</div>

I had the exactly same issue a few days ago.  
The following import works fine.  
`import Dropzone from "dropzone/dist/dropzone-amd-module";`