[Symfony 5] Sf5, Webpack Encore et Bootstrap

Bonjour,

J’essaie d’intégrer Bootstrap via le composant Webpack Encore dans mon projet Symfony5.

La partie CSS fonctionne mais pas la partie JS (ou seulement jQuery je ne sais pas).

En effet quand je clique sur un lien de ma barre de menu je suis censée avoir une liste déroulante, ce qui n’est pas le cas. Par exemple, si je clique sur le lien "Général" je suis censée voir apparaître "Accueil", "Mon profil", "Enregistrement" et "Aide".

<li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Général
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="{{ path('home') }}">Accueil</a>
                            {% if app.user %}
                                <a class="dropdown-item" href="{{ path('profileShow') }}">Mon profil</a>
                            {% else %}
                                <a class="dropdown-item" href="{{ path('registration') }}">Enregistrement</a>
                            {% endif %}
                            <a class="dropdown-item" href="{{ path('help') }}">Aide (à gérer)</a>
                        </div>
                    </li>

Mon package.json :

{
    "devDependencies": {
        "@symfony/stimulus-bridge": "^2.0.0",
        "@symfony/webpack-encore": "^1.0.0",
        "bootstrap": "^4.5.2",
        "core-js": "^3.0.0",
        "jquery": "^3.5.1",
        "popper.js": "^1.16.1",
        "regenerator-runtime": "^0.13.2",
        "sass": "^1.35.2",
        "sass-loader": "^10.0.0",
        "stimulus": "^2.0.0",
        "webpack-notifier": "^1.6.0"
    },
    "license": "UNLICENSED",
    "private": true,
    "scripts": {
        "dev-server": "encore dev-server",
        "dev": "encore dev",
        "watch": "encore dev --watch",
        "build": "encore production --progress"
    }
}

et mon app.js :

/*
 * Welcome to your app's main JavaScript file!
 *
 * We recommend including the built version of this JavaScript file
 * (and its CSS file) in your base layout (base.html.twig).
 */

// any CSS you import will output into a single css file (app.scss in this case)
import './styles/global.scss';

import 'bootstrap';

// start the Stimulus application
import './bootstrap';

J’ai bien effectué mon yarn install, ainsi que mon yarn encode dev …

Hello,

Cette page de documentation explique qu’il faut ajouter popperjs et quelques lignes à ton fichier app.js: https://symfony.com/doc/current/frontend/encore/bootstrap.html#importing-bootstrap-javascript

N’oublie pas non plus qu’il faut que ton app.js soit chargé évidemment . Il ne faut pas oublier d’ajouter les bons tags HTML à ton layout, et c’est documenté ici: https://symfony.com/doc/current/frontend/encore/simple-example.html#configuring-encore-webpack

C’est exactement ce que j’avais fait.

Du coup je viens de le refaire mais ça ne fonctionne toujours pas… Je tourne en rond

J’ai bien mis mes tags {{ encore_entry_link_tags(’app’) }} et {{ encore_entry_script_tags(’app’) }} dans mon base.html.twig également

et dans mon webpack.config.js j’ai bien .addEntry('app', './assets/app.js')

Au cas où voici à quoi ressemble mon app.js actuellement :

/*
 * Welcome to your app's main JavaScript file!
 *
 * We recommend including the built version of this JavaScript file
 * (and its CSS file) in your base layout (base.html.twig).
 */

// any CSS you import will output into a single css file (app.scss in this case)
import './styles/global.scss';

import 'bootstrap';

// start the Stimulus application
import './bootstrap';

const $ = require('jquery');
// this "modifies" the jquery module: adding behavior to it
// the bootstrap module doesn't export/return anything
require('bootstrap');

// or you can include specific pieces
// require('bootstrap/js/dist/tooltip');
// require('bootstrap/js/dist/popover');

$(document).ready(function() {
    $('[data-toggle="popover"]').popover();
});

J’ai enfin trouvé la solution ! Mais je ne comprend pas : j’ai fait ça un peu au petit bonheur la chance.

J’ai simplement mis mon {{ encore_entry_script_tags(’app’) }} en dehors de mon {% block javascripts %} {% endblock %} dans le fichier base.html.twig.

Pourquoi est-ce que ça fonctionne quand on le met en dehors mais pas à l’intérieur ? Je pense que c’est parce que j’utilise ce block dans d’autres pages et que ça écrase le block de mon base.html.twig.

Bon en tout cas sujet résolu

Je présume que tu as redéfini le block javascripts dans tes templates enfant, non ?

oui c’est ça.

En gros je pensais que si j’avais

{% block javascripts %}{{ encore_entry_script_tags('app') }}{% endblock %}

dans un base.html.twig, puis

{% block javascripts %}machin chose{% endblock %}

dans un fichierquelconque.html.twig

je pensais que ça revenait à avoir

{% block javascripts %}
{{ encore_entry_script_tags('app') }}
machin chose
{% endblock %}

Alors qu’en fait ça revient seulement à

{% block javascripts %} machin chose {% endblock %}

Je ne sais pas si c’est très compréhensible ce que je dis

C’est tout à fait compréhensible .

Mais en fait il faut que tu fasses cela dans ton template :

{% block javascripts %}
    {{ parent() }}
    machin chose
{% endblock %}

ahhhhhhhhhhhh !!! OK !

J’avais pas pensé à faire ça du coup

Merci !