Bootstrap tooltip with popper not working via webpack

Question

I'm trying to get Bootstrap 4.2.1, jQuery 3.3.1 and Popper.js 1.14.7 working via webpack 4.29.0.

My main.js:

import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/tooltip';
import '@fortawesome/fontawesome-free';

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

My webpack.config.js

var webpack = require('webpack');
var path = require("path");
var _ = require("lodash");
var autoprefixer = require("autoprefixer");

const ExtractTextPlugin = require('extract-text-webpack-plugin');


const nodeEnv = process.env.NODE_ENV || 'development';
const isDev = nodeEnv !== 'production';

var webpackFailPlugin = function () {
  this.plugin("done", function (stats) {
    if (stats.compilation.errors && stats.compilation.errors.length && process.argv.indexOf("--watch") === -1) { // eslint-disable-line
      process.on("beforeExit", function () {
        process.exit(1);
      });
    }
  });
};

// Disable CSSModules here
const CSSModules = true;

module.exports = {
  mode: nodeEnv,
  output: {
    path: path.resolve(__dirname, "./public/assets"),
    publicPath: '/assets/',
    filename: 'bundle.js'
  },
  entry: ['./site/main.js', './site/styles/main.scss'],
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|ico)$/,
        use: 'file-loader?name=assets/[name].[hash].[ext]'
      },
      {
        test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
        use: 'url-loader?limit=10000&mimetype=application/font-woff'
      },
      {
        test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
        use: 'url-loader?limit=10000&mimetype=application/font-woff'
      },
      {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        use: 'url-loader?limit=10000&mimetype=application/octet-stream'
      },
      {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        use: 'file-loader'
      },
      {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        use: 'url-loader?limit=10000&mimetype=image/svg+xml'
      },
      {
        test: /\.(scss)$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          //resolve-url-loader may be chained before sass-loader if necessary
          use: ['css-loader', 'sass-loader']
        })
      }
    ]
  },
  optimization: {
    minimize: true
  },
  plugins: [
    new ExtractTextPlugin("styles.css"),
    new webpack.ProvidePlugin({
      $: 'jquery/dist/jquery.min',
      jQuery: 'jquery/dist/jquery.min',
      Popper: ['popper.js', 'default'],
    })
  ].concat(
    [
      webpackFailPlugin
    ]).concat([
      new webpack.NoEmitOnErrorsPlugin()
    ])
}

After packing up, Chrome greets me with these errors:

jQuery.Deferred exception: $(...).tooltip is not a function TypeError: $(...).tooltip is not a function
    at HTMLDocument.eval (webpack:///./site/main.js?:13:32)
    at l (webpack:///./node_modules/jquery/dist/jquery.min.js?:2:29357)
    at c (webpack:///./node_modules/jquery/dist/jquery.min.js?:2:29659) undefined
Uncaught TypeError: $(...).tooltip is not a function
    at HTMLDocument.eval (main.js:13)
    at l (jquery.min.js:2)
    at c (jquery.min.js:2)

What am I doing wrong? The bundle.js has the libraries in the order of:

• fontawesome
• bootstrap/tooltip.js
• bootstrap/util.js
• jquery
• jquery.min
• popper.js

Which isn't the one specified by bootstrap (jquery, popper, bootstrap), but I don't know if this matters.

Answer 1

Found a solution! It was a change in Bootstrap 4.1.3, with 4.1.2 my implementation still worked.

This is my new main.js:

import $ from 'jquery';

import 'bootstrap/js/dist/tooltip';

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

And I now could remove the new webpack.ProvidePlugin section from the webpack.config.js