How use Dropzone in my Laravel app with Gulp / Require?

Question

I have a Laravel app and I will use an external javascript library, DropzoneJS. I use Gulp for generating 1 single app.js file.

This is my simple gulpfile.js:

// gulpfile.js    
var elixir = require('laravel-elixir');
require("laravel-elixir-webpack");
elixir(function(mix) {
    mix.webpack('app.js');
});

My first step: install Dropzone with npm install dropzone

My second step is to "include" dropzone to my app.js file:

//app.js
require('./bootstrap');
require('dropzone');

$(function () {

   // Here the default dropzone code:
   var myDropzone = new Dropzone(document.body, { 
        url: "/target-url", // Set the url
       // etc.
});

Now I run gulp. Now I see that Dropzone is included in my app.js file.

But why I run my website I get this error :-(

Dropzone is not defined (in app.js)

How can I use this Dropzone method in my $(function(){ }) or inline in my website?

Answer 1

require('./bootstrap');

window.Dropzone = require('dropzone');

$(function () {
   // Here the default dropzone code:
    var myDropzone = new Dropzone(document.body, {
        url: "/target-url"
    });
});

This should work.