Tether not detected when importing as a module

[sebastiaanluca]

When doing the following in my JS file that gets compiled from ES6 using Babel, Tether is not being detected and I get the bootstrap.js:2676 Uncaught Error: Bootstrap tooltips require Tether (http://tether.io/) error.

require('tether')
require('bootstrap')

Related to https://github.com/twbs/bootstrap/issues/18732#issuecomment-230652556 and possibly others too.

Only solution right now is to manually include tether.min.js as a separate file directly in the page itself or am I wrong? Of course this isn't the ideal case or sometimes even possible when using modules and webpack to compile assets.

---

Ok, just tested it by including tether.js using the following line. Since Bootstrap gets compiled and doesn't know anything about scripts being included in the HTML, I don't see a way to use popovers or tooltips. In addition, because it throws a warning when Tether can't be found, it disables execution of any jQuery scripts (as far as I tested for the moment).

<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>

[sebastiaanluca]

My apologies for the duplicate issue. Found some similar issues after searching more thoroughly.

Now that I got Tether to work, tooltips and popovers still don't:

global.Tether = require('tether')
require('bootstrap')

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

And the example from the docs:

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

Renders:

popover.js:32 Uncaught ReferenceError: Tooltip is not defined

[oustn]

@sebastiaanluca maybe you can do like this:

window.Tether = require('tether');

[sebastiaanluca]

After a long search, I mashed up a solution from different sources that seems to work for me.

My webpack.config.js:

config.plugins.push(new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery',
}))

// Force Bootstrap to pick up on Tether
config.plugins.push(new webpack.ProvidePlugin({
    tether: 'tether',
    Tether: 'tether',
    'window.Tether': 'tether',
}))

config.resolve.alias = {
    // Force all modules to use the same jquery version
    // See https://github.com/Eonasdan/bootstrap-datetimepicker/issues/1319#issuecomment-208339466
    'jquery': path.resolve(process.cwd(), 'node_modules/jquery/src/jquery'),
}

[rolandas-valantinas]

It haven't worked for me. Thing that worked was from this link https://laracasts.com/discuss/channels/vue/possible-conflict-with-vue-and-bootstrap-4-alpha-5

yarn add tether

modified bootstrap.js

window.$ = window.jQuery = require('jquery');
window.Tether = require('tether');
require('bootstrap');

gulped and it finally worked :+1: