Closed ardupadawan closed 1 year ago
ardupadawan
commented
2 years ago hi understand it is because i don't unse Node.js so in cropper.js i replaced require by import
import bootstrap from '/js/bootstrap.min.js';
import CropperJS from '/js/cropperjs/cropper.js';but now i get
`Uncaught SyntaxError: The requested module '/js/cropperjs/cropper.js' does not provide an export named 'default'`
what am i doing wrong ? could you give an example of working code ?
J-Ben87
commented
2 years ago Hi @ardupadawan
Did you include @PrestaImageBundle/Resources/public/js/cropper.js in your twig template?
ardupadawan
commented
2 years ago yes i did, has a module to use import
<script type="module" src="/js/cropper.js"></script>
i finally removed the two imports in cropper.js and i manually added files in my page :
<script src="/js/bootsrap/bootstrap.js"></script>
<script src="/js/cropperjs/cropper.js"></script>
<script type="module" src="/js/cropper.js"></script>
<script src="/js/jquery-cropper/jquery-cropper.min.js"></script>i now have a working button i can use to choose a file to upload
then the modal load and i get again
Uncaught ReferenceError: CropperJS is not defined
J-Ben87
commented
2 years ago Ok, so somehow you did copy the PrestaImage bundle's cropper.js file in your js/ directory and you are loading it as a "module" (I didn't know you could load a script as a "module").
Did you try to load it after jquery-cropper?
I think you should have
<script src="/js/bootsrap/bootstrap.js"></script>
<script src="/js/cropperjs/cropper.js"></script>
<script src="/js/jquery-cropper/jquery-cropper.min.js"></script>
<script src="/js/cropper.js"></script> <!-- This is the bundle's file -->
<script src="/js/app.js"></script> <!-- This is your file -->Where /js/app.js contains something like
(function(w, $) {
'use strict';
$(function() {
$('.cropper').each(function() {
new Cropper($(this), true); // The second parameter could be skipped or set to false with a version of bootstrap < 5.
});
});
})(window, jQuery);yes, that is what i do i tryed different orders for the js files, but i start using the same order than on the documentation https://github.com/fengyuanchen/jquery-cropper#installation
but in fact, i am not really sure i have to use jquery-cropper as the cropper.js file of the bundle use only CropperJS. i first tryed without it but i got the error
Uncaught SyntaxError: The requested module '/js/cropperjs/cropper.js' does not provide an export named 'default'
I just don't understant why i get this error
i notice that i have this error for cropperjs but not for bootstrap when i use import instead of require
J-Ben87
commented
2 years ago Is there any way you can use webpack as described here? To be honest I haven't try the "classic" way for a while however the "webpack" way is up to date.
ardupadawan
commented
2 years ago so i finally took a VPS and migrated my project in order to use node ad webpack i configures everything as described in the documentation it looks like it is working, but not really : On the form, i have the button to choose a local file or import from the web. That is fine. but once the modal is loaded, the selected picture display twice. If i cancel and choose another picture, then the modl display first the old picture, then twice the new picture and so one
getting mad here...
hi i followed the instructions to use the bundle on my page i call jquery before cropper
It seems to work, the form display buttons to choose a file or to import an image with an url but the buttons don't work and i have the following errors in the console when i load the page :
Did i miss something ?