Bootstrap JavaScript Is Not Working with WebPack

Question

I am recently working on projects using Webpack , JS and Bootstrap , but suddenly on the project I am currently working on, and despite using the same Webpack and npm configs the bootstrap Javascript stopped working, although It shows in the javascript bundle in the Sources tab in the browser.

Notes:

• All my.js files and styles in the entry file ie index.js work fine and all libraries, too.
• The order of imported files is:
  1. jquery
  2. popper.js
  3. bootstrap.min.js
• Using CDNs for both Jquery and Bootstrap instead of imports did not fix the problem.

Here is the code on GitHub: https://github.com/WeamAdel/webpack-template

Webpack.config.js:

module.exports = {
  entry: {
     main: "./src/index.js",
     home: "./src/assets/js/home.js",
  },

  output: {
   // filename: "assets/js/[name].[fullhash:7].js",
    path: path.resolve(__dirname, "build"),
  },

  devServer: {
    port: 9000,
    contentBase: path.resolve(__dirname, "build"),
  },

  module: {
    rules: [
      //JS
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
          options: {
          presets: ["@babel/preset-env"],
        },
      },
   },

  // HTML
  {
    test: /\.html$/i,
    loader: "html-loader",
  },

  //Pug
  {
    test: /\.pug$/i,
    use: ["html-loader", "pug-html-loader"],
  },
   ],
 },

 plugins: [
     new HtmlWebpackPlugin({
        template: "./src/index.pug",
        chunks: ["main", "home"],
     }),
     new CleanWebpackPlugin(),
  ],

  optimization: {
     minimize: true,
     minimizer: [
        `...`,
        new CssMinimizerPlugin(),
    ],
  },

};

index.js

import "jquery";
import "popper.js";
import "bootstrap/dist/js/bootstrap.min";

Answer 1

Came across this topic finding a solution for the same symptoms. In my case the problem was, I had bootstrap version 4.6.0 installed, but copied and paste code snippets for version 5.0.