Bootstrap 5 Webpack plugins are not fully functional - javascript

I imported the Bootstrap 5 plugin as documented using Webpack
import Offcanvas from '../node_modules/bootstrap/js/dist/offcanvas';
import Dropdown from '../node_modules/bootstrap/js/dist/dropdown';
import ScrollSpy from '../node_modules/bootstrap/js/dist/scrollspy';
The events are working fine as below:
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
// do something...
})
But when I want to create an instance:
var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
I get an error:
Uncaught ReferenceError: bootstrap is not defined
I would be grateful for any help in this matter

Try new Offcanvas() instead of new bootstrap.Offcanvas():
var bsOffcanvas = new Offcanvas(myOffcanvas)
Yes, the Bootstrap 5 documentation states you can use bootstrap.Offcanvas, but in your case, you don't import bootstrap, you import Offcanvas directly. That's why bootstrap isn't defined.

Related

Can't import materialize modules with webpack

Trying to use materializecss with webpack. What I want to do is to import only the required Modules not all of the js. Loading the complete js is working as expected. But if I only want to use a modal, I cant find out how to do it.
I tried
import 'materialize-css/js/modal.js';
result: Uncaught ReferenceError: cash is not defined
Then I tried:
import 'materialize-css/js/cash.js';
import 'materialize-css/js/component.js';
import 'materialize-css/js/global.js';
import 'materialize-css/js/anime.min.js';
import 'materialize-css/js/modal.js';
Result: modal.js:24 Uncaught ReferenceError: Component is not defined.
I wonder if there is a way to use materializecss in a modular way with webpack?
Many Thanks in advance
This is what I ended up doing:
import {
Modal,
Dropdown
} from 'materialize-css';
document.addEventListener('DOMContentLoaded', function () {
var modals = M.Modal.init(document.querySelectorAll('.modal'), {});
var dropdowns = M.Dropdown.init(document.querySelectorAll('.dropdown-trigger'), {});
});
Import the components you want to use and initialize them individually.

Vue.js, how to import and use JQuery to initialize a materialize-css carousel

I am trying to use materialize-css with Vue, things are working fine, but there are certain materialize components needs to be initialized using JS or Jquery, Now, I didn't use Jquery before, I installed it using npm i -s jquery, but I am a little stuck as to how and where to import and use it.
the code below is from materialize docs on how to initialize the carousel. hints on how to use it in a .vue component or any alternative way is highly appreciated?
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.carousel');
var instances = M.Carousel.init(elems, options);
});
// Or with jQuery
$(document).ready(function(){
$('.carousel').carousel();
});
thanks in advance.
in your component initialize that code in mounted hook without using jquery:
export default {
...
mounted(){
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.carousel');
var instances = M.Carousel.init(elems);
});
}

Laravel Mix: Uncaught ReferenceError: ScrollMagic is not defined

I'm working on UI and trying to implement scrollmagic along with GSAP I have first implemented GSAP animation on load and works like charm for me but when I tried to implement GSAP with Scrollmagic I got this error in console.
Uncaught ReferenceError: ScrollMagic is not defined
For further information I have added dependencies in package.json file
"dependencies": {
"gsap": "^1.20.4",
"scrollmagic": "^2.0.5"
}
then import it into app.js
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
require('gsap');
require('scrollmagic');
require('./custom');
/*window.Vue = require('vue');*/
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
/*Vue.component('example-component', require('./components/ExampleComponent.vue'));
const app = new Vue({
el: '#app'
});*/
then in my home.blade.php
$(document).ready(function () {
let scrollMagicController = new ScrollMagic();
let showHeader = TweenMax.from('.menu-container',0.5,
{
opacity:0,
width: "100%",
ease:Power1.easeOut
});
let showHeaderTrigger = new ScrollScene({
triggerElement: '.about-us-section',
triggerHook:"onCenter"
}).setTween(showHeader)
.addTo(scrollMagicController);
});
Your help will be appreciated.
Thanks :)
Try
global.ScrollMagic = require('scrollmagic');

Uncaught TypeError: $(...).tooltip is not a function in Laravel application (Bootstrap 4 preset)

I am building an application with the PHP framework Laravel. I am using the Bootstrap 4 preset and installed a fresh project. Everything is working fine, css, and even the dropdown menu you get from the navbar. But for some reason, I get a Typerror in my console when I try to initatlize the tooltip by doing this. Also tried to initalize the tooltip by a tooltip class but that doesn't seem to work either. I got the same problem with the popover component.
Uncaught TypeError: $(...).tooltip is not a function
Uncaught TypeError: $(...).popover is not a function
I've changed nothing in the JS, except deleting the comments you get from a Laravel installation.
bootstrap.js
window._ = require('lodash');
//Popper for Jquery/Bootstrap
window.Popper = require('popper.js/dist/umd/popper');
//Jquery for Bootstrap
try {
window.$ = window.jQuery = require('jquery/dist/jquery.slim');
require('bootstrap');
} catch (e) {}
//Axios for AJAX Calls
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
let token = document.head.querySelector('meta[name="csrf-token"]');
if (token) {
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}
app.js
//Bootstrap application with dependencies
require('./bootstrap');
//Import Vue
window.Vue = require('vue');
//Vue components
Vue.component('example-component', require('./components/ExampleComponent.vue'));
//Vue init
const app = new Vue({
el: '#app'
});
//Tooltip init
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
HTML/Blade
<i class="ion-help-circled" data-toggle="tooltip" data-placement="top" title="Dit is het adres waarop de website staat tijdens de testfase"></i>
Also tried to include the tooltip init below the regular scripts in my blade file, but again, doesn't seem to work.
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
});
</script>
It seems that it is a problem with popper.js I guess, because it applies to both the tooltip and the popover component.
Try instead
window.$ = window.jQuery = require('jquery'); // <-- main, not 'slim'
window.Popper = require('popper.js');
require('bootstrap');
The "slim" jQuery dist excludes some features, necessary to register correctly tooltip as a jQuery plugin.
Ultimately, the issue is that tooltip() has not always existed in jQuery UI. It was added in version 1.9...
version added: 1.9 (Source: API.jQueryUI.com: Tooltip Widget.)
If you don't have a version of jQuery UI at version 1.9 or higher, you'll get the error: tooltip() is not a function().

Error while trying to integrate React-DateRangePicker into React Project

Currently in the process of building a web app using ReactJs and the Fluxible architecture. While trying to integrate the React-daterangepicker module into my project, I have encountered the following error of which I cannot trace the origin.
$.fn.daterangepicker = function(options, callback) {
^
TypeError: Cannot set property 'daterangepicker' of undefined
at /Volumes/DATA/Projects/deeplinq/node_modules/react-bootstrap-daterangepicker/lib/daterangepicker.js:1360:26
Here's my DatePicker Component, I have followed the github demo and done exactly the same steps.
'use strict';
var React = require('react/addons');
var moment = require('moment');
var DateRangePicker = require('react-bootstrap-daterangepicker');
import DefaultMixin from '../mixins/DefaultMixin';
module.exports = React.createClass({
mixins: [DefaultMixin],
render() {
return (
<DateRangePicker startDate={moment('1/1/2014')} endDate={moment('3/1/2014')}>
<div>Click Me To Open Picker!</div>
</DateRangePicker>
);
}
});
What could be causing this error? Googling it gave no result and I've been struggling with it for the past hours.
It seems like the react-bootstrap-daterangepicker module needs jQuery to be available globally as $. Try including jQuery on the page before you load the module.
TL;DR: this isn't a react problem, you need to load jQuery BEFORE loading your react files.
Lets deconstruct your error message:
$.fn.daterangepicker = function(options, callback) {
^
TypeError: Cannot set property 'daterangepicker' of undefined
at /Volumes/DATA/Projects/deeplinq/node_modules/react-bootstrap-daterangepicker/lib/daterangepicker.js:1360:26
I'm mostly interested in the first part Cannot set property 'daterangepicker' of undefined...
This is happening because $.fn is returning undefined.
Try This:
immediately before you require react, you should require jquery:
var $ = require('jquery');
var React = require('react/addons');

Categories