Bootstrap v4: Tooltip and window.Tether

[n3ssi3]

While playing around with ReactJS, BS4 and webpack, I ran into an issue with Tether.
Usually I would use import Tether from 'tether' and import Bootstrap from 'bootstrap' but since you use window.Tether I couldn't do that. Now I have to use window.Tether = require('tether').
When mixing import and require that actually affects the loading order. Import seems to be loaded before require, no matter the order in the file. So I have to switch also Bootstrap to require.

Is there a way, we can remove window here?
https://github.com/twbs/bootstrap/blob/v4-dev/js/src/tooltip.js#L19

Or do you have a better idea how to solve this issue?

[cvrebert]

Approximate duplicate of #17201 / #17325.

[jaredramirez]

Realized issue is closed but seeing at #17325 is locked to all except collaborators , and #17201 wasn't webpack specific, I thought I'd post my solution here.

Rather than remove if (window.Tether === undefined), try making the Tether variable a global variable using webpack.

module: {
  loaders: [
    { test: /tether\.js$/, loader: "expose?Tether" }
    //other config here
  ]
}

and then in you app.js, include:

import 'tether';
import 'jquery';
import 'bootstrap';

[karolyi]

+1, why is this issue closed?

using webpack, because of bootstrap, I had to make jQuery a global variable, BUT then, tether is still looked up in window, in tooltip.js (see here), so the following webpack config snippet, exposing Tether as a global variable for tooltip.js, doesn't help:

      {
        // Transpile ES6 to ES5 in Bootstrap V4
        test: /bootstrap\/js\/src\/.*\.js$/,
        loaders: [
          'imports?jQuery=jquery,Tether=tether',
          'babel?babelrc=true',
        ],
      },

please guys, if you really need us to globally expose variables for bootstrap, at least make it consistent.

[cvrebert]

why is this issue closed?

See #18647 (comment)