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.

Screenshot 2022-06-03 at 23.52.412188×206 10.3 KB

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="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" 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.

webpack.config.js

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: [
            MiniCssExtractPlugin.loader,
            'css-loader',
            'sass-loader',
          ]
        },
        {
          test: /\.(woff|woff2|eot|ttf|otf)$/i,
          type: 'asset/resource',
        }
      ]
    },
    plugins: [
      new MiniCssExtractPlugin({ filename: '../css/app.css' }),
      new CopyWebpackPlugin({ patterns: [{ from: 'static/', to: '../' }] })
    ]
  }
};

package.json

{
  "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"
  }
}