javascript - 'jQuery' 未定义 no-undef

标签 javascript jquery reactjs npm create-react-app

我有一个使用 jQuery 的文件,它仅用于测试目的:

(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

和 webpack 提示:

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.

我已经将 jquery 添加到 index.js 中,但为什么它仍然报错?
我用 https://github.com/facebook/create-react-app 创建我的 reactjs 应用程序.
index.js 如下所示:

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(); 

如您所见,jQuery 已导入。
我做错了什么?

最佳答案

在你使用 jQuery 的文件中只包含这行

import jQuery from 'jquery'

有了它,您不需要将它包含在 app.js 文件中,只需要将它包含在您正在使用它的文件中。

关于javascript - 'jQuery' 未定义 no-undef,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50121478/

相关文章:

javascript - 如何让一个物体平滑地改变它的方向?

javascript - Node.js 中的继承函数如何工作?

javascript - 如何暂停/播放 JavaScript 倒计时时钟

javascript - 动态添加具有拖动和调整大小功能的 DIV

javascript - 如果输入文件在没有表单的ajax请求中作为数组元素传递,为什么数组对象变为空

javascript - JSX 不渲染空白

javascript - 追溯获取原始列:error using a source map

javascript - 当从 5 个图像中选择 2 个图像时,如何禁用其他图像?

javascript - 从 Redux reducer 中的对象复制原型(prototype)函数

javascript - 在大型元素中使用 ReactJS 渲染 CSS 最快