如何在Webpacker上使用Uppy插件

Question

I'm trying to use uppy with webpacker on rails, I am having trouble getting uppy to 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})
uppyOne.use(DragDrop, { target: '.UppyDragDrop-One' })

This is the console error I'm receiving:

[Uppy] [23:29:46] 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:6)
    at __webpack_require__ (bootstrap a698a4c3b9adcd1bf843:19)
    at Object.<anonymous> (application.js:1)
    at __webpack_require__ (bootstrap a698a4c3b9adcd1bf843:19)
    at bootstrap a698a4c3b9adcd1bf843:62
    at bootstrap a698a4c3b9adcd1bf843:62

Answer 1

I found out the problem is because in rails you usually link to all JS files up in the head of the layout file but the element with class '.UppyDragDrop' has yet to be rendered.

To resolve, you need to separately link to the javascript via javascript_pack_tag after the element with the DragDrog element is presented.