未捕获的 ReferenceError：jQuery 未在 eval 中定义

Posted 2023-02-16

【中文标题】未捕获的 ReferenceError：jQuery 未在 eval 中定义

【英文标题】：Uncaught ReferenceError: jQuery is not defined at eval

【发布时间】：2021-09-09 22:21:02

【问题描述】：

我已经在 main.js 文件中导入了 jQuery，但它仍然抛出这个错误

Uncaught ReferenceError: jQuery is not defined at eval (navbar.js)

我无法解决这个问题。我尝试了所有可能的方法来导入 main.js

我在public/index.html 文件中使用了jQuery CDN 链接，这个错误消失了，但是navbar.js 文件中的导航栏脚本根本不起作用。

使用 npm npm install jquery --save 安装 jquery

navbar.js

(function ($) 
    'use strict';

    if ($.fn.kanglaNav) 
        $('#bigNavBar').kanglaNav();
    

    $(".kangla-navbar-toggler").on("click", function () 
        $(".top-header").toggleClass("z-index-reduce");
    );

)(jQuery);

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './assets/css/style.css'
import '../node_modules/bootstrap/dist/css/bootstrap.min.css'
import './assets/css/kangla-nav.min.css'
import './assets/css/animate.css'
import '../node_modules/magnific-popup/dist/magnific-popup.css'
import './assets/js/popper.min.js'
import '../node_modules/bootstrap/dist/js/bootstrap.min.js'
import './assets/js/kangla-nav.min.js'
import '../node_modules/magnific-popup/dist/jquery.magnific-popup.min.js'
import './assets/js/navbar.js'

const  $, jQuery  = require('jquery')
window.$ = $
window.jQuery = jQuery

new Vue(
    router,
    store,
    render: (h) => h(App)
).$mount('#app')

【问题讨论】：

不知道您的设置是什么以及如何加载脚本。该错误意味着在 navbar.js 运行时未评估 main.js。

@EstusFlask 我已经添加了完整的 main.js 文件。请看一下并提出您的宝贵建议。

【参考方案1】：

jQuery 全局变量在访问时未定义，因为在 window.jQuery = jQuery 之前评估了 import './assets/js/navbar.js' 行。 jquery 不包含 $ 等导出，全局变量将是 undefined 任何方式。

将 jQuery 赋值移动到 import 上方是不正确的，因为 import 语句被规范提升了。

解决此问题的一种方法是将window.jQuery = jQuery 移动到jquery.js 并在依赖它的模块之前导入它。

更正确的做法是在模块化环境中不依赖全局变量，将它们导入依赖它们的模块中：

import jQuery from 'jquery';

【讨论】：

谢谢，在需要的js文件中导入就可以了