I have a file that is using jQuery and it is only for testing purpose:
(function($) {
"use strict"; // Start of use strict
// Configure tooltips for collapsed side navigation
$('.navbar-sidenav [data-toggle="tooltip"]').tooltip({
template: '<div class="tooltip navbar-sidenav-tooltip" role="tooltip" style="pointer-events: none;"><div class="arrow"></div><div class="tooltip-inner"></div></div>'
})
// Toggle the side navigation
$("#sidenavToggler").click(function(e) {
e.preventDefault();
$("body").toggleClass("sidenav-toggled");
$(".navbar-sidenav .nav-link-collapse").addClass("collapsed");
$(".navbar-sidenav .sidenav-second-level, .navbar-sidenav .sidenav-third-level").removeClass("show");
});
// Force the toggled class to be removed when a collapsible nav link is clicked
$(".navbar-sidenav .nav-link-collapse").click(function(e) {
e.preventDefault();
$("body").removeClass("sidenav-toggled");
});
// Prevent the content wrapper from scrolling when the fixed side navigation hovered over
$('body.fixed-nav .navbar-sidenav, body.fixed-nav .sidenav-toggler, body.fixed-nav .navbar-collapse').on('mousewheel DOMMouseScroll', function(e) {
var e0 = e.originalEvent,
delta = e0.wheelDelta || -e0.detail;
this.scrollTop += (delta < 0 ? 1 : -1) * 30;
e.preventDefault();
});
// Scroll to top button appear
$(document).scroll(function() {
var scrollDistance = $(this).scrollTop();
if (scrollDistance > 100) {
$('.scroll-to-top').fadeIn();
} else {
$('.scroll-to-top').fadeOut();
}
});
// Configure tooltips globally
$('[data-toggle="tooltip"]').tooltip()
// Smooth scrolling using jQuery easing
$(document).on('click', 'a.scroll-to-top', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: ($($anchor.attr('href')).offset().top)
}, 1000, 'easeInOutExpo');
event.preventDefault();
});
})(jQuery); // End of use strict
and webpack complains:
Failed to compile.
./src/SbAdmin/js/sb-admin.js
Line 45: 'jQuery' is not defined no-undef
Search for the keywords to learn more about each error.
I added jquery
into index.js
already but why it still complains?
I create my reactjs app with https://github.com/facebook/create-react-app.
The index.js
looks as following:
import React from 'react';
import ReactDOM from 'react-dom';
/* Import css */
import 'font-awesome/css/font-awesome.css';
import './index.css';
/* Import javascript */
import 'bootstrap';
import 'jquery';
import './SbAdmin/js/sb-admin';
import App from './App/AppContainer.bs';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
As you can see jQuery
is imported.
What am I doing wrong?
In your file that you are using jQuery just include the line
import jQuery from 'jquery'
With that you don't need to have it included in the app.js file only the files for which you are using it.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With