Bootstrap required JS doesn't load

Well, this might not be a Phoenix related question in particular but I’ve been stuck and annoyed for so long and I couldn’t find an answer anywhere else. My only hope is that if you want to help it’ll be easier for you to clone the repo and run the app in case you want to see it running and reproduce it.

I’ve got a LiveView app which is using Webpack and Bootstrap.

On the navbar I’ve got a burger menu toggle (see the SS below), however it doesn’t function when I click on it. Nothing happens. By nothing I mean normally it should expand to show the menu items but it doesn’t expand on click.

I am not sure whether there’s anything wrong with Webpack config or the package.json.

When I manually inserted these scripts below to the DOM, the burger menu toggle works as expected so that’s why I suspected the JS.

<script src="" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

Here is the repo where you can find all the code.

Note: It gets the dev DB credentials from ENV vars in case you want to run it.


const path = require('path');
const glob = require('glob');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = (env, options) => {
  const devMode = options.mode !== 'production';

  return {
    optimization: {
      minimizer: [
        new CssMinimizerPlugin()
    entry: {
      'app': glob.sync('./vendor/**/*.js').concat(['./js/app.js'])
    output: {
      filename: '[name].js',
      path: path.resolve(__dirname, '../priv/static/js'),
      publicPath: '/js/'
    devtool: devMode ? 'eval-cheap-module-source-map' : undefined,
    module: {
      rules: [
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader'
          test: /\.[s]?css$/,
          use: [
          test: /\.(woff|woff2|eot|ttf|otf)$/i,
          type: 'asset/resource',
    plugins: [
      new MiniCssExtractPlugin({ filename: '../css/app.css' }),
      new CopyWebpackPlugin({ patterns: [{ from: 'static/', to: '../' }] })


  "repository": {},
  "description": " ",
  "license": "MIT",
  "scripts": {
    "deploy": "webpack --mode=production",
    "watch": "webpack --mode=development --watch"
  "dependencies": {
    "@popperjs/core": "^2.11.5",
    "bootstrap": "^5.1.3",
    "bowser": "^2.11.0",
    "jquery": "^3.6.0",
    "phoenix": "file:../../../deps/phoenix",
    "phoenix_html": "file:../../../deps/phoenix_html",
    "phoenix_live_view": "file:../../../deps/phoenix_live_view"
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "autoprefixer": "^10.4.2",
    "babel-loader": "^8.0.0",
    "copy-webpack-plugin": "^10.2.4",
    "css-loader": "^6.6.0",
    "css-minimizer-webpack-plugin": "^3.4.1",
    "mini-css-extract-plugin": "^2.5.3",
    "node-sass": "^7.0.1",
    "sass-loader": "^12.4.0",
    "webpack": "^5.68.0",
    "webpack-cli": "^4.9.2"

are there any errors in the browser console?

It’s working for BS4, but not for BS5… The CDN is BS4, the one you use is BS5.

Did You make the change to your html to support the new markup? aka data-bs.

Because BS5 has breaking changes…


Nope, there are no errors.

Oh, I had not thought about that. Let me try and see. Hope it’ll work but then I’ll cry over the hours I’ve wasted trying to solve this problem. :joy:

It worked. I am so stupid. It was only because of breaking changes which literally broke my app. :sweat_smile:

Thank you for taking a look and helping me resolve this! :bowing_man: