Bootstrap: Meteor, Bootstrap, and Tether

Created on 22 Jan 2016 · 20Comments · Source: twbs/bootstrap

In Bootstrap v4 alpha 2, I get the error

Uncaught Error: Bootstrap tooltips require Tether (http://github.hubspot.com/tether/)

I have in Meteor tried loading Tether using the package simply:tether, but the error message remains.

Can I opt to not require Tether since I wont use Bootstrap's tooltips.

js v4

Source

mazing

👍1

Most helpful comment

On Meteor 1.3 is you need Bootstrap 4 from npm do this:

npm install tether --save
npm install [email protected]
meteor add orgztion:meteor-global-tether

https://github.com/orgztion/meteor-global-tether package import Tether from npm and expose it globally.

a working example: https://github.com/bySabi/neal-sample-meteor

orgztion on 6 Mar 2016

👍6

All 20 comments

You can just safely ignore that error.
A workaround that was posted was setting window.Tether = {}

wolfy1339 on 22 Jan 2016

❤1

CC: @splendido @dandv because this involves Meteor

cvrebert on 22 Jan 2016

I have the exact same error when hosting the Bootstrap v4 alpha 2 Dashboard example on a Django app. So this error might not be specific to Meteor.

birish2 on 3 Feb 2016

@birish2 This issue is Meteor-specific. If you're seeing that error message and aren't using Meteor, then you're either not including Tether properly, or you're not exposing Tether as a global (i.e. window.Tether) which is currently necessary until we resolve #17201.

cvrebert on 4 Feb 2016

@mazing I'd say, if you also added simply:tether, it might be a problem with the order packages are loaded: i.e. twbs:bootstrap gets loaded before simply:tether.
As a workaround you could try edit your .meteor/packages file and make sure tether appears before bootstrap.

As a stable solution we might add simple:tether as a weak dependency for twbs:bootstrap so to ensure correct load order for the packages.
Then we should check simple:tether is the best option, well maintained and regularly updated...
...but this won't be a problem when [email protected] will be out since support for npm packages will come and we might refer the official tether package.

@mazing could you try see whether changing the order in your .meteor/packages file solves the problem for now?

splendido on 14 Feb 2016

This worked for me:

meteor remove twbs:bootstrap
meteor add coursierprive:tether
meteor add twbs:bootstrap@=4.0.0-alpha2

panaali on 25 Feb 2016

👍3

On Meteor 1.3 is you need Bootstrap 4 from npm do this:

npm install tether --save
npm install [email protected]
meteor add orgztion:meteor-global-tether

https://github.com/orgztion/meteor-global-tether package import Tether from npm and expose it globally.

a working example: https://github.com/bySabi/neal-sample-meteor

orgztion on 6 Mar 2016

👍6

Asked the Tether folks whether they'd consider publishing a Meteor package: https://github.com/HubSpot/tether/issues/153
Then we could just add a dependency on the official Tether Meteor package.

cvrebert on 7 Mar 2016

👍1

What about people who don't want to use tool tips? This error forces everyone to include tether, whether they need it or not. I had the impression tether was opt-in when needed.

arechsteiner on 29 Aug 2016

@arechsteiner You want #17201.

cvrebert on 29 Aug 2016

Closing as no longer applicable per #20389.

cvrebert on 29 Aug 2016

@orgztion your repo meteor-global-tether gives a 404. any insight into why's that? have you found another way of providing tether under meteor?

diegonc on 23 Nov 2016

@diegonc this package is offline cause is not needed.
On meteor you can use a workaround like this:
https://github.com/bySabi/neal-sample-meteor/blob/master/packages/workarounds/client.js

bySabi on 23 Nov 2016

👍1

Do the following:

meteor npm install tether --save
cp ./node_modules/tether/dist/js/tether.min.js ./public/
//Add this line to your index.html
<head>
...
    <script type="text/javascript" src="tether.min.js"></script>
...

Anything in the /public folder can be found by the client browser.

jbockerstette on 7 Dec 2016

Well, I hope not to sound rude, but that's a weird dance there and doesn't look very Meteorish 😄

I'd rather do

import _Tether from 'tether';
window.Tether = _Tether;

in some early loaded client file (just like bySabi's workaround but with an actual implementation).

But I can't say whether it works, I'm still using the package 😁

diegonc on 7 Dec 2016

👎1

I followed the angular2 Socially example. Your solution may work but there
is not enough detail for me to try it. Where would I put your code snippet?
Also, I only have 6 months of experience working with meteor so some things
aren't obvious to me.

On Dec 6, 2016 7:56 PM, "Diego Nieto Cid" notifications@github.com wrote:

Well, I hope not to sound rude, but that's a weird dance there and doesn't
look very Meteorish 😄

I'd rather do

import _Tether from 'tether';
window.Tether = _Tether;

in some early loaded client file (just like bySabi's workaround but with
an actual implementation).

But I can't say whether it works, I'm still using the package 😁

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/twbs/bootstrap/issues/19005#issuecomment-265348859,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AP9ZRa0yiq6_loYuZzmvFgHtOrg60Mq_ks5rFi5QgaJpZM4HKFF4
.

jbockerstette on 7 Dec 2016

@jbockerstette

For me, what set off alarm bells in your solution is that there are two manual steps (cp & script) that one needs to remember each time tether is upgraded to also keep our project in good shape.

From my experience, Meteor tends to discourage script tags in index.html and instead relies on its script concatenation & minification process to build a bundle that gets automatically include in the served HTML.

If you are using bootstrap from NPM, then you can just drop the two lines I mentioned before the import 'bootstrap'; statement in main js file.

If you are using the atmosphere package then you need a custom package which should be listed before bootstrap in .meteor/packages file; look for instance at bySabi's link. But that's arguably more complicated, and if one doesn't intend to update tether "frequently", I'd rather use your solution.
Anyway, considering there's no longer a Bootstrap atmosphere package, the NPM based solution is probably better.

@ everyone
BTW, sorry for hijacking this closed issue

diegonc on 7 Dec 2016

👍1

Thanks Diego. I knew my solution was not optimal but it was the only way I could get it to work. I was able to get bySabi's solution to work in my project. So I am now going to use that. Thank you!

jbockerstette on 7 Dec 2016

hi! i use meteor 1.4.4 and i can't install tether , i use npm, and the package but don't work, any clue?