Encore Webpack Bootstrap4.5 navbar not working

Question

I am trying to learn Symfony. I am using bootstrap to style my page. When i add this link <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script> in my base.html.twig the navbar works fine. But when i used npm install jquery and used {{ encore_entry_script_tags('app') }} my navbar doesnt work anymore. It may be useful to know that i can see the bootstrap theme on the screen so i think that the scss part is working.

Here is my app.js file

import './styles/app.scss';

import $ from 'jquery';

global.$ = global.jQuery = $;

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

import 'bootstrap/dist/js/bootstrap.min.js';
import 'bootstrap/dist/css/bootstrap.min.css';

$(document).ready(function() {
    $('body').prepend('<h1>'+greet('mj')+'</h1>');
});

The greet function is working and the message is showing.

webpack.config.js

In this file, I used enableSassLoader() in order to activate Sass and autoProvidejQuery() in order to have access to jQuery as a global variable.

Do you have any idea what's wrong? Thank you for helping me.

Answer 1

I found the solution for anyone having the same problem. I had Bootstrap 4.5 so i just did npm install bootstrap@next -D which installed bootstrap 5 and everything worked