title: Module not found: Error: Can't resolve 'cropbox' 2
body: <p>I asked question  <a href="https://stackoverflow.com/questions/61871451/module-not-found-error-cant-resolve-cropbox">Module not found: Error: Can&#39;t resolve &#39;cropbox&#39;</a><br>
  But I didn't get an answer, so I have to focus on more specific issues and searching in StackOverflow,</p>
  
  <p>So that I get three problem </p>
  
  <p>1  rails doesn't load cropbox.js </p>
  
  <p>2  clopbox.js couldn't  export cropbox function </p>
  
  <p>3  fileUplod.js couldn't import cropbox function</p>
  
  <p>this is the result  what the as one of  the above problem</p>
  
  <p>part of application.html.erb: </p>
  
  <pre><code>&lt;%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %&gt;
  &lt;%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %&gt;
  &lt;%= javascript_pack_tag 'application' %&gt;
  &lt;%= javascript_pack_tag 'cropbox' %&gt;
  &lt;%= javascript_pack_tag 'fileUpload'%&gt; #Here is deleted
  </code></pre>
  
  <p>Intentionally, I don't compile fileUpload
  as a result, rails could load clopbox.js
  So, I narrow down 2 problem </p>
  
  <p>someone would you like to tell me these problems?</p>
  
  <p>Environment:</p>
  
  <p><strong>Rails 6.0.2</strong> <strong>Ruby 2.5.3</strong></p>
  
  <p>app/javascript/packs/fileUpload.js:</p>
  
  <pre><code>import clopbox from './packs/cropbox' **#Here is problem **
  
  
  
   uppy.on('upload-success', (file, response) =&gt; {
  // 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)
    }
  })
  })
  </code></pre>
  
  <p>webpacker.yml:</p>
  
  <pre><code>  # Note: You must restart bin/webpack-dev-server for changes to take effect
  
   default: &amp;default
   source_path: app/javascript
   source_entry_path: packs
   public_root_path: public
   public_output_path: packs
   cache_path: tmp/cache/webpacker
   check_yarn_integrity: false
   webpack_compile_output: true
  
  # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  resolved_paths: []
  
  # Reload manifest.json on all requests so we reload latest compiled packs
  cache_manifest: false
  
  # Extract and emit a css file
  extract_css: false
  
  static_assets_extensions:
    - .jpg
    - .jpeg
    - .png
    - .gif
    - .tiff
    - .ico
    - .svg
    - .eot
    - .otf
    - .ttf
    - .woff
    - .woff2
  
  extensions:
    - .mjs
    - .js
    - .sass
    - .scss
    - .css
    - .module.sass
    - .module.scss
    - .module.css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg
  
  development:
   &lt;&lt;: *default
    compile: true
  
  # Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, 
  and 
  node_modules
  check_yarn_integrity: true
  
  # Reference: https://webpack.js.org/configuration/dev-server/
    dev_server:
    https: false
    host: localhost
    port: 3035
    public: localhost:3035
    hmr: false
    # Inline should be set to true if using HMR
    inline: true
    overlay: true
    compress: true
    disable_host_check: true
    use_local_ip: false
    quiet: false
    pretty: false
    headers:
     'Access-Control-Allow-Origin': '*'
    watch_options:
    ignored: '**/node_modules/**'
  
  
  test:
    &lt;&lt;: *default
    compile: true
  
  # Compile test packs to a separate directory
  public_output_path: packs-test
  
  production:
  &lt;&lt;: *default
  
  # Production depends on precompilation of packs prior to booting for 
  performance.
  compile: false
  
   # Extract and emit a css file
   extract_css: true
  
   # Cache manifest.json for performance
    cache_manifest: true
  </code></pre>
  
  <p>app/javascript/packs/cropbox.js: </p>
  
  <pre><code> 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 =&gt; onCrop(event.detail)
   })
   }
  
  export default cropbox
  </code></pre>
  
  <p>form.html.erb</p>
  
  <pre><code>  &lt;%= form_with model: @blog_form , url: user_blogs_path ,local: true do |f| 
    %&gt;
  
    &lt;div class="field"&gt;
    &lt;%  f.label :title %&gt;
    &lt;%= f.text_field :title %&gt;
    &lt;/div&gt;
  
    &lt;div class="field"&gt;
    &lt;%  f.label :content %&gt;
    &lt;%= f.text_area :content %&gt;
    &lt;/div&gt;
  
    &lt;div class="field "&gt;
     &lt;%  f.label :user_id %&gt;
     &lt;%= f.hidden_field :user_id, value: current_user.id %&gt;
     &lt;/div&gt;
  
     &lt;div class ="field form-group"&gt;
     &lt;%= f.fields_for  :photos, Photo.new do |photos_fileds|  %&gt;
  
     &lt;%= photos_fileds.label :image , class: "form-control" %&gt;
     &lt;%= photos_fileds.hidden_field :image,  class: "upload-data", value: 
     photos_fileds.object.cached_image_data %&gt;
     &lt;%= photos_fileds.file_field  :image , class: "form-control  ", id: 
     "select- 
     files"%&gt;&lt;br/&gt;
     &lt;div class="image-preview"&gt;
      &lt;img id="image" src="&lt;%= photos_fileds.object.image_url(:medium) %&gt;" 
       height="300" class="rounded"  &gt;
      &lt;/div&gt;
  
      &lt;% end %&gt;
  
      &lt;/div&gt;
  
      &lt;%= f.submit "create", class: "btn btn-primary" %&gt;
      &lt;% end %&gt;
  </code></pre>
  
  <p>log:</p>
  
  <pre><code>ERROR in ./app/javascript/packs/fileUpload.js
  Module not found: Error: Can't resolve './packs/cropbox' in 
  '/home/master/prot/prottype2/app/javascript/packs'
  @ ./app/javascript/packs/fileUpload.js 1:0-38
  
  [Webpacker] Everything's up-to-date. Nothing to do
  [Webpacker] Everything's up-to-date. Nothing to do
  Completed 200 OK in 39733ms (Views: 39715.1ms | ActiveRecord: 0.6ms | Allocations: 1
  </code></pre>