I posed the inquiry Module not found: Error: Can't resolve 'cropbox'
Unfortunately, I did not receive a response, prompting me to delve into more specific issues and scour StackOverflow for solutions.
After investigating, I identified three key problems:
1. Rails fails to load cropbox.js
2. The cropbox.js file is unable to export the cropbox function
3. The fileUpload.js file cannot import the cropbox function
This outcome stems from one of the aforementioned issues.
Code snippet from application.html.erb:
<%= 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'%> #Deleted line
To address this, I intentionally refrained from compiling fileUpload which enabled Rails to successfully load clopbox.js, thereby narrowing down my focus to two problems.
If anyone can shed light on these issues, it would be greatly appreciated!
Environment:
Rails 6.0.2 Ruby 2.5.3
Snippet from app/javascript/packs/fileUpload.js:
import clopbox from './packs/cropbox' **#Here lies the issue**
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)
}
})
})
Configuration in webpacker.yml:
# Configuration details here
Sample script from app/javascript/packs/cropbox.js:
// Code example here
Snippet from form.html.erb:
// Form code here
Log excerpt:
Error encountered 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