下拉菜单不能与bootstrap 4 / webpack encore / symfony 4 helppp一起使用

Question

I want to use bootstrap dropdowns but it does nothing when I click on it. I use it with webpack encore.

Here the html :

    {% block stylesheets %}
        <link rel="stylesheet" href="{{ asset('build/css/app.css') }}">
    {% endblock %}

...

        <ul class="navbar-nav ml-auto">
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="dropdown09"
                   data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
                <div class="dropdown-menu" aria-labelledby="dropdown09">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
        </ul>

(if i use the 3 links bellow it works, but i want to make it work with app.js)

{% block javascripts %}
    {#<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>#}
    {#<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>#}
    {#<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>#}

    <script src="{{ asset('build/app.js') }}"></script>
{% endblock %}

Here is my file webpack.config.js :

var Encore = require('@symfony/webpack-encore');
var Dotenv = require('dotenv-webpack');

Encore
// directory where compiled assets will be stored
    .setOutputPath('public/build/')
    // public path used by the web server to access the output path
    .setPublicPath('/build')
    // only needed for CDN's or sub-directory deploy
    //.setManifestKeyPrefix('build/')

    /*
     * ENTRY CONFIG
     *
     * Add 1 entry for each "page" of your app
     * (including one that's included on every page - e.g. "app")
     *
     * Each entry will result in one JavaScript file (e.g. app.js)
     * and one CSS file (e.g. app.css) if you JavaScript imports CSS.
     */

    // will create public/build/app.js
    .addEntry('app', './assets/js/app.js')

    // will create and public/build/css/app.css
    .addStyleEntry('css/app', ['./assets/css/app.scss'])

    //.addEntry('page1', './assets/js/page1.js')
    //.addEntry('page2', './assets/js/page2.js')

    // enable vue.js
    .enableVueLoader()

    // empty the outputPath dir before each build
    .cleanupOutputBeforeBuild()

    // show OS notifications when builds finish/fail
    .enableBuildNotifications()

    // will require an extra script tag for runtime.js
    // but, you probably want this, unless you're building a single-page app
    .enableSingleRuntimeChunk()

    /*
     * FEATURE CONFIG
     *
     * Enable & configure other features below. For a full
     * list of features, see:
     * https://symfony.com/doc/current/frontend.html#adding-more-features
     */
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    // enables hashed filenames (e.g. app.abc123.css)
    .enableVersioning(Encore.isProduction())

    // enables Sass/SCSS support
    .enableSassLoader()

    // uncomment if you use TypeScript
    //.enableTypeScriptLoader()

    // allow legacy applications to use $/jQuery as a global variable
    .autoProvidejQuery()

    .addPlugin(new Dotenv({
        path: './.env',
        safe: false
    }))

    .autoProvideVariables({
        $: 'jquery',
        jQuery: 'jquery'
    });
;


module.exports = Encore.getWebpackConfig();

Here the app.js :

var $ = require('jquery');
require('popper.js');
require('bootstrap');

app.scss :

@import "~bootstrap/scss/bootstrap";
//@import "bootstrap.min.css";
@import "navbar.css";

I ran :

yarn install
yarn add bootstrap-sass --dev
yarn add bootstrap --dev
yarn add jquery popper.js --dev
yarn run encore dev

Please help Please helpPlease helpPlease helpPlease helpPlease helpPlease helpPlease helpPlease helpPlease helpPlease helpPlease helpPlease helpPlease helpPlease helpPlease helpPlease helpPlease helpPlease helpPlease helpPlease helpPlease helpPlease helpPlease helpPlease helpPlease help

Answer 1

I found ! We must comment this part in webpack.config.js:

// will require an extra script tag for runtime.js
// but, you probably want this, unless you're building a single-page app
// .enableSingleRuntimeChunk()