[SOLVED] ReferenceError uppy is not defined

I implement shrine gem with cropperjs and uppy in rails,

I refer to Usage of shrine Image Cropping and Example code

Then I implemented code, seemingly code is correct,

But I got some errors Module not found: Error: Can't resolve 'cropbox' 2 and above errors,

I searched similar issues and tried some solutions still I can't use shrine gem,

Would you like to help me?

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, {
    target: formGroup,
   })
  .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, {
    aspectRatio: 1,
    viewMode: 1,
    guides: false,
    autoCropArea: 1.0,
    background: false,
    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', media: 'all', '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>

I moved code position

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', media: 'all', 'data-turbolinks-track': 
 'reload' %>
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 
'reload' %>
<%= javascript_pack_tag 'application' %>
<%= javascript_pack_tag 'app' %>
<%= javascript_pack_tag 'cropbox' %>
<%= javascript_pack_tag 'fileUpload'%>

And also I moved file input application.js to app.js