Friday, May 12, 2017

Bundling Bootstrap 4 - Bootstrap tooltips require Tether

By Hường Hana 6:00 AM , Leave a Comment

I have an app that's being built with Bootstrap 4. In this app, I have a Bower file, has the following:

bower.json

{   "name": "myApp",   "version": "1.0.0",   "dependencies": {     "jquery": "2.1.4",     "tether": "1.2.0",     "bootstrap": "v4.0.0-alpha.5"   },   "private": true }

I am trying to bundle these files with several custom JavaScript files. In an attempt to do this, I have the following Gulp task:

gulpfile.js

gulp.task('bundleJs', function() {   var jsFiles = [     './bower_components/jquery/dist/jquery.min.js',     './bower_components/tether/dist/tether.min.js',     './bower_components/bootstrap/dist/js/bootstrap.min.js',     './public/core.js',     './public/utils.js'   ];    return gulp.src(jsFiles)     .pipe(concat('bundle.js'))     .pipe(gulp.dest('./public/js'))   ; });

Then, in my web page, I'm referencing the file like this:

index.html

<script type="text/javascript" src="/public/js/bundle.js"></script>

My web page loads and I can see that bundle.js has successfully loaded. However, in the console window, I see the following error:

Uncaught Error: Bootstrap tooltips require Tether

I believe that this is why my hamburger menu no longer works on mobile. My question is, is there a way to bundle these files together? Or, do I need to load each individually?

1 Answers

Answers 1

I replicated your project.

The URL pointing to the tether JS file in you gulp file seems to be incorrect.

It should be:

'./bower_components/tether/dist/js/tether.min.js',

instead of:

'./bower_components/tether/dist/tether.min.js',
If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment