Bootstrap events not working

[Marvin Heilemann]

Today I noticed that the events from bootstrap are not working with bootstrap-loader. I‘m using tabs, tooltip and scrollspy and want to watch show.bs.tab event. But jquery get‘s nothing.

Here my files:

. bootstraprc

{
  "bootstrapVersion": 4,
  "scripts": {
    "collapse": true,
    "tab": true,
    "tooltip": true,
    "scrollspy": true
  }
}

webpack.config.js

// Packages
const log = console.log;
const path = require('path');
const chalk = require('chalk');
const webpack = require('webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const WebpackBuildNotifierPlugin = require('webpack-build-notifier');

// Webpack
module.exports = (env, argv) => {
  const devMode = argv.mode ? argv.mode !== 'production' : process.env.NODE_ENV ? process.env.NODE_ENV !== 'production' : false;
  const dist = path.resolve(__dirname, 'dist');
  
  log('devMode:', devMode ? chalk.green(devMode) : chalk.red(devMode), '\n');
  
  return {
    entry: {
      bootstrap: 'bootstrap-loader',
      main: './source/js/app.js',
      style: [
        'bootstrap/dist/css/bootstrap-grid.min.css',
        'owl.carousel/dist/assets/owl.carousel.min.css',
        'ionicons/dist/css/ionicons.min.css',
        'datatables.net-bs4/css/dataTables.bootstrap4.css',
        'toastr/build/toastr.min.css',
        'katex/dist/katex.min.css',

        // Joomla plugins
        '../../media/plg_system_eprivacy/css/definitions.min.css',

        // Main
        './source/scss/main.scss'
      ]
    },
    devtool: devMode ? 'source-map' : '', // BUG: some sourcemap types are not working https://github.com/webpack/webpack/issues/5491
    target: 'web',
    output: {
      path: dist,
      filename: '[name].js'
    },
    optimization: {
      minimize: !devMode,
      minimizer: [
        new UglifyJsPlugin({
          cache: true,
          parallel: true
        }),
        new OptimizeCSSAssetsPlugin({})
      ]
    },
    stats: {
      assets: true,
      builtAt: true,
      cached: true,
      cachedAssets: false,
      children: false,
      chunks: false,
      colors: true,
      errors: true,
      excludeAssets: /\.(ttf|eot|woff)(\?[\s\S]+)?$/,
      maxModules: 15,
      hash: false,
      moduleTrace: false,
      performance: true,
      timings: true,
      version: true,
      warnings: true,
    },

    plugins: [
      new WebpackBuildNotifierPlugin({
        title: 'Additive builder',
        logo: path.resolve(__dirname, 'images/additive-signet.png'),
        suppressCompileStart: false,
        sound: true
      }),
      new CleanWebpackPlugin([dist]),
      new BrowserSyncPlugin({
        host: 'localhost',
        port: 3000,
        proxy: 'additive.lcl/'
      }, {
        // BUG: https://github.com/webpack-contrib/mini-css-extract-plugin/issues/151
        // https://github.com/Va1/browser-sync-webpack-plugin#advanced
        injectCss: true
      }),
      new webpack.ProvidePlugin({
      // jQuery
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        'window.$': 'jquery',

        // Bootstrap
        Tether: 'tether',
        'window.Tether': 'tether',
        Popper: ['popper.js', 'default'],
        Util: 'exports-loader?Util!bootstrap/js/dist/util'
      }),
      new MiniCssExtractPlugin({
        filename: '[name].css'
      }),
    ],

    module: {
      rules: [
        {
          enforce: 'pre',
          test: /\.js$/,
          exclude: /node_modules/,
          loader: 'eslint-loader',
          options: {
            cache: true,
            cacheLocation: path.resolve(__dirname, 'cache/.eslintcache'),
            failOnWarning: false,
            failOnError: !devMode
          }
        },
        {
          test: /\.js$/,
          exclude: /node_modules/,
          loader: 'babel-loader',
        },
        {
          test: /\.(jpe?g|png|gif|svg|webp)$/i,
          use: [{
            loader:'file-loader',
            options:{
              outputPath:'images/'
            }
          }]
        },
        {    
          test: /\.(sc|c)ss$/,
          use: [
            MiniCssExtractPlugin.loader,
            {
              loader: 'css-loader',
              options: { 
                sourceMap: devMode,
                importLoaders: 1
              }
            },
            {
              loader: 'postcss-loader',
              options: {
                sourceMap: devMode,
                ident: 'postcss', // required when `require` is used in plugins
                plugins: () => [
                  require('autoprefixer')('> .1%'),
                  // require('cssnano')()
                ]
              }
            },
            {
              loader: 'sass-loader', 
              options: {
                sourceMap: devMode
              }
            }
          ],
        },
        {
          test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
          use: [{
            loader: 'url-loader?limit=10000',
            options:{
              outputPath:'fonts/'
            }
          }]
        },
        {
          test: /\.(ttf|eot|woff)(\?[\s\S]+)?$/,
          use: [{
            loader: 'file-loader',
            options:{
              outputPath:'fonts/'
            }
          }]
        },
        { 
          test: /bootstrap[/\\]dist[/\\]js[/\\]umd[/\\]/, 
          loader: 'imports-loader?jQuery=jquery' 
        },
        {
          // Exposes jQuery for use outside Webpack build
          test: require.resolve('jquery'),
          use: [{
            loader: 'expose-loader',
            options: 'jQuery'
          },{
            loader: 'expose-loader',
            options: '$'
          }]
        }
      ]
    },
  };
};

the javascript

$('[data-toggle="pill"]').on('show.bs.tab', (event) => {
  const target = event.target; // newly activated tab
  const relatedTarget = event.relatedTarget; // previous active tab

  console.log(target);
  console.log(relatedTarget);

  const targetIcon = $(target).find('.icon');
  const relatedTargetIcon = $(relatedTarget).find('.icon');

  var newTargetClass = targetIcon.attr('class').replace('-outline', '');
  targetIcon.attr('class', newTargetClass);

  var newRelatedTargetIcon = relatedTargetIcon.attr('class') + '-outline';
  relatedTargetIcon.attr('class', newRelatedTargetIcon);
});

[Justin Gordon]

You need to do some debugging. Maybe you're missing the bootstrap JS files?