title: 'jQuery' is not defined no-undef
body: <p>I have a file that is using jQuery and it is only for testing purpose:</p>
  
  <pre><code>(function($) {
    "use strict"; // Start of use strict
    // Configure tooltips for collapsed side navigation
    $('.navbar-sidenav [data-toggle="tooltip"]').tooltip({
      template: '&lt;div class="tooltip navbar-sidenav-tooltip" role="tooltip" style="pointer-events: none;"&gt;&lt;div class="arrow"&gt;&lt;/div&gt;&lt;div class="tooltip-inner"&gt;&lt;/div&gt;&lt;/div&gt;'
    })
    // 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 &lt; 0 ? 1 : -1) * 30;
      e.preventDefault();
    });
    // Scroll to top button appear
    $(document).scroll(function() {
      var scrollDistance = $(this).scrollTop();
      if (scrollDistance &gt; 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
  </code></pre>
  
  <p>and  webpack complains:</p>
  
  <pre><code>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.
  </code></pre>
  
  <p>I added <code>jquery</code>  into <code>index.js</code> already but why it still complains?<br>
  I create my reactjs app with <a href="https://github.com/facebook/create-react-app" rel="nofollow noreferrer">https://github.com/facebook/create-react-app</a>.<br>
  The <code>index.js</code> looks as following: </p>
  
  <pre><code>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(&lt;App /&gt;, document.getElementById('root'));
  registerServiceWorker(); 
  </code></pre>
  
  <p>As you can see <code>jQuery</code> is imported.<br>
  What am I doing wrong?</p>