如何在rails上使用uppy插件和webpacker

Question

我正试图在rails上使用uppy和webpacker，我在使用uppy时遇到了问题：

//  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' })

这是我收到的控制台错误：

[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

我发现问题是因为在rails中，你通常链接到布局文件头部的所有JS文件，但链接到带有class'的元素。UppyDragDrop"尚未渲染。

要解决此问题，您需要在显示带有DragDrog元素的元素后，通过javascript_pack_tag单独链接到javascript。