Tooltip is not defined

[Loni2Shoes]

I am having the "Uncaught ReferenceError: Tooltip is not defined" error previously referenced/resolved here:

#172 (comment)

However, the error message persists despite having added the additional entries to my webpack.ProvidePlugin:

plugins: [
        extractCSS,
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery', 
            Tether: 'tether',
            'window.Tether': 'tether',
            Tooltip: 'exports?Tooltip!bootstrap/js/dist/tooltip',
            Alert: 'exports?Alert!bootstrap/js/dist/alert',
            Button: 'exports?Button!bootstrap/js/dist/button',
            Carousel: 'exports?Carousel!bootstrap/js/dist/carousel',
            Collapse: 'exports?Collapse!bootstrap/js/dist/collapse',
            Dropdown: 'exports?Dropdown!bootstrap/js/dist/dropdown',
            Modal: 'exports?Modal!bootstrap/js/dist/modal',
            Popover: 'exports?Popover!bootstrap/js/dist/popover',
            Scrollspy: 'exports?Scrollspy!bootstrap/js/dist/scrollspy',
            Tab: 'exports?Tab!bootstrap/js/dist/tab',
            Util: 'exports?Util!bootstrap/js/dist/util'
        }),
[...]

My bootstrap files loader is:

            { 
                test: /bootstrap[\/\\]js[\/\\]dist[\/\\]/,
                use: [{ loader: 'imports-loader', options: { jQuery: 'jquery' } }]
            }

Naturally, this error disappears if I disable the JavaScript-enabled components in my *.bootstraprc file. I am using version 2.0.0-beta.20 of the bootstrap-loader, version 2.2.0 of webpack, 4.0.0-alpha.6, version of bootstrap. I have tried changing "exports" to "exports-loader" within each of the entries in case it was a webpack 2 difference but without effect (also without an error message being generated).

[Loni2Shoes]

I was eventually able to resolve this issue. The template my project is based upon includes two different webpack.config.js files (one is for vendor-specific files). I had to put the the entries in my main file, not the vendor file (which already had the aliases for jQuery). I did need to rename exports to exports-loader, like so:

        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            Tether: 'tether',
            'window.Tether': 'tether',
            Alert: 'exports-loader?Alert!bootstrap/js/dist/alert',
            Button: 'exports-loader?Button!bootstrap/js/dist/button',
            Carousel: 'exports-loader?Carousel!bootstrap/js/dist/carousel',
            Collapse: 'exports-loader?Collapse!bootstrap/js/dist/collapse',
            Dropdown: 'exports-loader?Dropdown!bootstrap/js/dist/dropdown',
            Modal: 'exports-loader?Modal!bootstrap/js/dist/modal',
            Popover: 'exports-loader?Popover!bootstrap/js/dist/popover',
            Scrollspy: 'exports-loader?Scrollspy!bootstrap/js/dist/scrollspy',
            Tab: 'exports-loader?Tab!bootstrap/js/dist/tab',
            Tooltip: "exports-loader?Tooltip!bootstrap/js/dist/tooltip",
            Util: 'exports-loader?Util!bootstrap/js/dist/util'
        })

[ryannealmes]

For those that run into this issue, I also ran into this problem because I wasn't initialising my tooltips correctly.

I was doing

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

The correct way is below

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

Silly error, but it may help someone.

[abudayah]

I'm using Vuejs and this is the solution I've got:

and this is works fine but is there any reason to use dist instead of src ?

webpack.base.conf.js

  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      Popper: "popper.js",
      Alert: 'exports-loader?Alert!bootstrap/js/src/alert',
      Button: 'exports-loader?Button!bootstrap/js/src/button',
      Carousel: 'exports-loader?Carousel!bootstrap/js/src/carousel',
      Collapse: 'exports-loader?Collapse!bootstrap/js/src/collapse',
      Dropdown: 'exports-loader?Dropdown!bootstrap/js/src/dropdown',
      Modal: 'exports-loader?Modal!bootstrap/js/src/modal',
      Popover: 'exports-loader?Popover!bootstrap/js/src/popover',
      Scrollspy: 'exports-loader?Scrollspy!bootstrap/js/src/scrollspy',
      Tab: 'exports-loader?Tab!bootstrap/js/src/tab',
      Tooltip: "exports-loader?Tooltip!bootstrap/js/src/tooltip",
      Util: 'exports-loader?Util!bootstrap/js/src/util'
    })
  ],

in my vue component:

import 'bootstrap/js/src/util'
import 'bootstrap/js/src/dropdown'