没有定义ReferenceError uppy

我用cropperjs和uppy实现了神殿中的宝石，

我指的是Usage of shrine Image Cropping和Example code

然后我实现了代码，看似代码是正确的，

但是我遇到了一些错误Module not found: Error: Can't resolve 'cropbox' 2 及以上错误，

我搜索了类似的问题，并尝试了一些解决方案，但仍然无法使用神社宝石，

您想帮我吗？

application.js：

//= require popper
//= require bootstrap-sprockets
//= require_tree .

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")


function fileUpload(fileInput) {
 var formGroup = fileInput.parentNode
 var hiddenInput = document.querySelector('.upload-data')
 var imagePreview = document.querySelector('.image-preview img')

formGroup.removeChild(fileInput)

 var uppy = Uppy.Core({
    autoProceed: true,restrictions: {
     allowedFileTypes: fileInput.accept.split(','),}
   })
  .use(Uppy.FileInput,{
    target: formGroup,locale: { strings: { chooseFiles: 'Choose file' } },})
  .use(Uppy.Informer,})
  .use(Uppy.ProgressBar,{
    target: imagePreview.parentNode,})
  .use(Uppy.ThumbnailGenerator,{
    thumbnailWidth: 600,})
  .use(Uppy.XHrupload,{
    endpoint: '/upload',})

uppy.on('upload-success',function (file,response) {
  imagePreview.src = response.uploadURL

  var uploadedFileData = JSON.stringify(response.body['data'])

  hiddenInput.value = uploadedFileData

  var copper = new Cropper(imagePreview,{
    aspectRatio: 1,viewMode: 1,guides: false,autoCropArea: 1.0,background: false,crop: function (event) {
    data = JSON.parse(hiddenInput.value)
    data['metadata']['crop'] = event.detail
    hiddenInput.value = JSON.stringify(data)
     }
    })
  })
}

 document.querySelectorAll('input[type="file"]').forEach(function (fileInput) {
  fileUpload(fileInput)
})

cropbox.js：

import 'cropperjs/dist/cropper.css';

import Cropper from 'cropperjs'

function cropbox(image,url,{ onCrop }) {
 image.src = url

   new Cropper(image,zoomable: false,crop: event => onCrop(event.detail)
  })
}

export default cropbox

fileUpload.js：

import cropbox from 'cropbox'

  uppy.on('upload-success',(file,response) => {
   // retrieve uploaded file data
    const uploadedFileData = response.body['data']

    // set hidden field value to the uploaded file data so that it's submitted
    // with the form as the attachment
    hiddenInput.value = JSON.stringify(uploadedFileData)

    cropbox(imagePreview,response.uploadURL,{
      onCrop(detail) {
        let fileData = JSON.parse(hiddenInput.value)
        fileData['metadata']['crop'] = detail
        hiddenInput.value = JSON.stringify(fileData)
      }
    })
  })

form.html.erb：

<%= form_with model: @blog_form,url: user_blogs_path,local: true do |f| %>

 <div class="field">
  <%  f.label :title %>
  <%= f.text_field :title %>
 </div>

<div class="field">
<%  f.label :content %>
<%= f.text_area :content %>
</div>

<div class="field ">
<%  f.label :user_id %>
<%= f.hidden_field :user_id,value: current_user.id %>
</div>

<div class ="field form-group">
<%= f.fields_for  :photos,Photo.new do |photos_fileds|  %>

<%= photos_fileds.label :image,class: "form-control" %>
<%= photos_fileds.hidden_field :image,class: "upload-data",value: 
photos_fileds.object.cached_image_data %>
<%= photos_fileds.file_field  :image,class: "form-control  ",id: "select-files"%><br/>
<div class="image-preview">
<img id="image" src="<%= photos_fileds.object.image_url(:medium) %>" height="300" class="rounded"  >
</div>

<% end %>

</div>



  <%= f.submit "create",class: "btn btn-primary" %>
 <% end %>

application.html.erb：

  <!DOCTYPE html>
 <html>
   <head>
    <title>Prottype2</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

   <%= stylesheet_link_tag 'application',media: 'all','data-turbolinks-track': 'reload' %>
   <%= stylesheet_pack_tag 'application','data-turbolinks-track': 'reload' %>
   <%= javascript_pack_tag 'application' %>
   <%= javascript_pack_tag 'cropbox' %>
   <%= javascript_pack_tag 'fileUpload'%>

   <script src="https://transloadit.edgly.net/releases/uppy/v1.6.0/uppy.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.js"></script>

   <link href="https://transloadit.edgly.net/releases/uppy/v1.6.0/uppy.min.css" rel="stylesheet" />
   <link href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.css" rel="stylesheet" 
 />

  </head>

  <body>


   <p class="notice"><%= notice %></p>
   <p class="alert"><%= alert %></p>

   <%= yield %>


  </body>
</html>

我移动了代码位置

application.html.erb：

<script src="https://transloadit.edgly.net/releases/uppy/v1.6.0/uppy.min.js"> 
</script>
<script 
src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.js"> 
</script>

<link href="https://transloadit.edgly.net/releases/uppy/v1.6.0/uppy.min.css" 
rel="stylesheet" />
<link 
href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.css" 
rel="stylesheet" />

<%= stylesheet_link_tag 'application','data-turbolinks-track': 
 'reload' %>
<%= stylesheet_pack_tag 'application','data-turbolinks-track': 
'reload' %>
<%= javascript_pack_tag 'application' %>
<%= javascript_pack_tag 'app' %>
<%= javascript_pack_tag 'cropbox' %>
<%= javascript_pack_tag 'fileUpload'%>

我也将文件输入application.js移到了app.js

没有定义ReferenceError uppy

iCMS 回答：没有定义ReferenceError uppy

大家都在问