Active Storage-Direct Uploader提供语法错误

Question

我的目标是使用Active Storage通过以下方式上传文件：

1-在客户端附加到云之后（在单击“更新”按钮之前）开始上传到云

2-将上传视图与另一个第三方js库（如uppy）集成

来自direct upload rails documentation

  

如果您想通过JavaScript使用直接上传功能   框架，或者您想集成自定义拖放解决方案，   您可以为此目的使用DirectUpload类。收到   您选择的库中的文件，实例化DirectUpload并调用   其创建方法。上载时，Create需要回调   完成。

import { DirectUpload } from "@rails/activestorage"

const input = document.querySelector('input[type=file]')

// Bind to file drop - use the ondrop on a parent element or use a
//  library like Dropzone
const onDrop = (event) => {
  event.preventDefault()
  const files = event.dataTransfer.files;
  Array.from(files).forEach(file => uploadFile(file))
}

// Bind to normal file selection
input.addEventListener('change', (event) => {
  Array.from(input.files).forEach(file => uploadFile(file))
  // you might clear the selected files from the input
  input.value = null
})

const uploadFile = (file) => {
  // your form needs the file_field direct_upload: true, which
  //  provides data-direct-upload-url
  const url = input.dataset.directUploadUrl
  const upload = new DirectUpload(file, url)

  upload.create((error, blob) => {
    if (error) {
      // Handle the error
    } else {
      // Add an appropriately-named hidden input to the form with a
      //  value of blob.signed_id so that the blob ids will be
      //  transmitted in the normal upload flow
      const hiddenField = document.createElement('input')
      hiddenField.setAttribute("type", "hidden");
      hiddenField.setAttribute("value", blob.signed_id);
      hiddenField.name = input.name
      document.querySelector('form').appendChild(hiddenField)
    }
  })
}

我收到此错误消息：

带有“！”在这一行：

   var upload = new !(function webpackMissingModule() { var e = new Error("Cannot find module '@rails/activestorage'"); e.code = 'MODULE_NOT_FOUND'; throw e; }())(file, url);