Not installing DragDrop plugin

[echan00]

I recently migrated to webpacker in my rails app so that I can start using packages like uppy.

I am trying to figure out why the code below doesn't work:

//  app/javascripts/src/javascript/my_scripts.js
const Uppy = require('@uppy/core')
const DragDrop = require('@uppy/drag-drop')
const ProgressBar = require('@uppy/progress-bar')

const uppyOne = new Uppy({debug: true, autoProceed: true}).use(DragDrop, { target: '.UppyDragDrop-One' })

This is the console error I receive:

[Uppy] [23:51:11] Not installing DragDrop
Plugin.js:165 Uncaught Error: Invalid target option given to DragDrop. Please make sure that the element 
      exists on the page, or that the plugin you are targeting has been installed. Check that the <script> tag initializing Uppy 
      comes at the bottom of the page, before the closing </body> tag (see https://github.com/transloadit/uppy/issues/1042).
    at DragDrop.mount (Plugin.js:165)
    at DragDrop.install (index.js:204)
    at Uppy.use (index.js:901)
    at Object.<anonymous> (uppy.js:5)
    at __webpack_require__ (bootstrap b1b6bcd48b7210f8b245:19)
    at Object.<anonymous> (application.js:1)
    at __webpack_require__ (bootstrap b1b6bcd48b7210f8b245:19)
    at bootstrap b1b6bcd48b7210f8b245:62
    at bootstrap b1b6bcd48b7210f8b245:62

[kvz]

Can you show the HTML?

[echan00]

My HTML is crowded with a lot of code, but the key is it contains the snippet below?

# app/views/visitor/index.html.erb
<div class="UppyDragDrop-One" style="width:100px;height:100px;border: 1px solid;"></div>
<div class="UppyDragDrop-One-Progress"></div>

Are there any other webpack plugins that are possibly required as well?

[echan00]

Okay, I found out what the problem is. My javascript code needs to be after the HTML. I have all my webpack code initialized at the beginning in my rails layout file:

<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>