I'm stuck trying to call the bootstrap's jQuery plugins, like popover, tooltip, modals, ...
I'm using webpack and this is my ES6 javascript:
import $ from 'jquery';
//import Bootstrap from 'bootstrap-sass';
//import Bootstrap from 'bootstrap-loader';
import Bootstrap from '../vendor/bootstrap.min.js';
class Test {
constructor () {
$('[data-toggle="tooltip"]').tooltip({ html: true });
}
}
I've tried to install bootstrap with npm, but after that i wasn't sure which one node-modules i had to import (like you can see in commented lines in the imports). So, i thought to import directly the bootstrap.min.js
.
The fact is that i still have an error (independently if i try with popover/modals/tooltip) like this in my app.js
that is my javascript generated from the webpack:
Uncaught TypeError: (0 , _jquery2.default)(...).tooltip is not a function
Like i say, i'm stuck here.
Last thing, the boostrap CSS works correctly thanks to this:
gulp.task('bootstrap-fonts', function() {
return gulp.src('node_modules/bootstrap-sass/assets/fonts/bootstrap/*')
.pipe(gulp.dest('./app/assets/fonts/bootstrap'));
});
gulp.task('dev', ['css', 'bootstrap-fonts', 'browser-sync', 'webpack'], function () {
gulp.watch('src/scss/**/*.scss', ['css']);
gulp.watch('src/js/**/*.js', ['webpack']);
gulp.watch('app/*.html', ['bs-reload']);
});
Because the bootstrap library depends on jQuery, you should try to add the following plugin to the 'plugins' array in your webpack.config.js so that the bootstrap module will use the jQuery global object:
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": 'jquery'
}),
This plugin will actually injects the 'jquery' module in any other module that ask for him (means, every module that use the objects jQuery or $ or window.jQuery), and bootstrap is one of them.