Closed lfortunier closed 2 years ago
Hi Louis!
First of all, thank you for the detailed message.
I'm afraid your issue comes from the version of bootstrap required in your package.json
.
Since I released the bundle (and the doc), a new version of bootstrap has been released (5.x) which contains breaking changes with the previous version (4.x).
Unfortunately, you'll have to stick to bootstrap 4.x until I add support for bootstrap 5, or more likely until I get rid of bootstrap as a dependency.
Does it help?
Hi @J-Ben87, thank you for the answer.
Yes bootstrap 4 fix the console issue but the modal still does not appear, but i can see it in console.
Do i have to fix another dependency version ?
Package.json :
"dependencies": {
"@popperjs/core": "^2.9.3",
"bootstrap": "4.6.0",
"bootstrap-sass": "^3.3.7",
"cropperjs": "^1.5.12",
"jquery": "^3.6.0",
"jquery-cropper": "^1.0.1",
"popper.js": "^1.16.1"
},
By following the documentation, i add jquery dependency but would using the sonata one directly is enough (and disable autoProvideJquery() in webpack.config ) ?
Hi @lfortunier
This is my package.json
:
{
"dependencies": {
"@popperjs/core": "^2.9.3",
"bootstrap": "^4.5.3",
"bootstrap-sass": "^3.3.7",
"cropperjs": "^1.5.12",
"jquery": "^3.6.0",
"jquery-cropper": "^1.0.1",
"popper.js": "^1.16.1"
}
}
I'm not sure the difference between our versions of bootstrap is causing the modal not to appear on your side, but you may want to give it a try.
Otherwise, these are the relevant files I can share with you:
# assets/css/app.scss
@import "~bootstrap/scss/bootstrap";
@import "~cropperjs/dist/cropper.min.css";
@import "../../public/bundles/prestaimage/css/cropper.css";
# assets/js/app.js
import $ from 'jquery';
import 'bootstrap';
import 'cropperjs'
import * as Cropper from 'prestaimage/js/cropper';
$(function() {
$('.cropper').each(function() {
new Cropper($(this));
});
});
# config/packages/twig.yaml
twig:
form_themes:
- '@PrestaImage/form/bootstrap_3.html.twig'
{# templates/base.html.twig #}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}Welcome!{% endblock %}</title>
{% block stylesheets %}
{{ encore_entry_link_tags('css/app') }}
{% endblock %}
</head>
<body>
{% block body %}{% endblock %}
{% block javascripts %}
{{ encore_entry_script_tags('js/app') }}
{% endblock %}
</body>
</html>
# webpack.config.js
const Encore = require('@symfony/webpack-encore');
const path = require('path');
if (!Encore.isRuntimeEnvironmentConfigured()) {
Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}
Encore
.setOutputPath('public/build/')
.setPublicPath('/build')
.addEntry('js/app', './assets/js/app.js')
.addStyleEntry('css/app', './assets/css/app.scss')
.splitEntryChunks()
.enableSingleRuntimeChunk()
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
.enableVersioning(Encore.isProduction())
.configureBabel((config) => {
config.plugins.push('@babel/plugin-proposal-class-properties');
})
.configureBabelPresetEnv((config) => {
config.useBuiltIns = 'usage';
config.corejs = 3;
})
.addAliases({
prestaimage: path.resolve(__dirname, 'public/bundles/prestaimage')
})
.enableSassLoader()
.autoProvidejQuery()
;
module.exports = Encore.getWebpackConfig();
There is probably something for you to find in these files :wink:
With the help of @mtanasiewicz that should be solved by #81
Hello,
I am using Symfony 4.4.25 and SonataAdmin .
I follow the bundle install documentation and use webpack.
At first i have got this error when i try to compile the assets:
I fix it by adding front dependency : "@popperjs/core": "^2.9.3",
I have one last final issue : On the admin, when i select my image, there is a console error and the image don’t update :
And the modal don’t open.
This is my setup :
Package.json :
twig.yaml : I use the form template @PrestaImage/form/bootstrap_3.html.twig
webpack.config.js :
assets/css/app.scss :
About the files assets/js/app.js and templates/base.html.twig : it’s same content as the doc
What do you thing about my cropper installation ? Am i missing something for it to work ?