Laravel mix Uncaught ReferenceError: jQuery is not defined
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49351415/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Laravel mix Uncaught ReferenceError: jQuery is not defined
提问by PaladiN
I am using laravel mix to bundle my js libraries and codes. I am trying to use ES6 style of importing and use ES6 codes if possible. I need to also import jQuery and it's library.
我正在使用 laravel mix 来捆绑我的 js 库和代码。如果可能，我正在尝试使用 ES6 样式的导入并使用 ES6 代码。我还需要导入 jQuery 及其库。
So, i have imported jQuery and bootstrap like this:
所以，我已经像这样导入了 jQuery 和 bootstrap：
import "jquery";
import "bootstrap";
At first when i import them i was getting:
起初，当我导入它们时，我得到：
Uncaught ReferenceError: jQuery is not defined
at Object../node_modules/bootstrap/js/transition.js (vendor.js?id=74f7f0c463b407c6bdf5:2449)
which is due to the bootstrap not getting jQuery.
这是由于引导程序没有获得 jQuery。
To solve this i have added this configuration to replace $, jQuery with jquery
为了解决这个问题，我添加了这个配置来用 jquery 替换 $, jQuery
mix.webpackConfig(webpack => {
return {
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
})
]
};
});
This works for every scripts and libraries that requires jQuery.
这适用于每个需要 jQuery 的脚本和库。
Now the problem is with the other scripts that we add without mixing using a single js or using blade section.
现在的问题是我们添加的其他脚本没有混合使用单个 js 或使用刀片部分。
@section('scripts')
<script type="application/javascript">
window.onload = function() {
if (window.jQuery) {
// jQuery is loaded
console.log("Yeah!");
} else {
// jQuery is not loaded
console.log("Doesn't Work");
}
}
$().ready(function () {
console.log('works');
})
</script>
@endsection
The console error shows:
控制台错误显示：
datatables:125 Uncaught ReferenceError: $ is not defined
at datatables:125
(anonymous) @ datatables:125
vendor.js?id=2b5ccc814110031408ca:21536 jQuery.Deferred exception: $(...).uniform is not a function TypeError: $(...).uniform is not a function
at HTMLDocument.<anonymous> (http://localhost/assets/admin/app.js?id=da888f45698c53767fca:18419:18)
at mightThrow (http://localhost/assets/admin/vendor.js?id=2b5ccc814110031408ca:21252:29)
at process (http://localhost/assets/admin/vendor.js?id=2b5ccc814110031408ca:21320:12) undefined
jQuery.Deferred.exceptionHook @ vendor.js?id=2b5ccc814110031408ca:21536
process @ vendor.js?id=2b5ccc814110031408ca:21324
setTimeout (async)
(anonymous) @ vendor.js?id=2b5ccc814110031408ca:21358
fire @ vendor.js?id=2b5ccc814110031408ca:20986
fireWith @ vendor.js?id=2b5ccc814110031408ca:21116
fire @ vendor.js?id=2b5ccc814110031408ca:21124
fire @ vendor.js?id=2b5ccc814110031408ca:20986
fireWith @ vendor.js?id=2b5ccc814110031408ca:21116
ready @ vendor.js?id=2b5ccc814110031408ca:21596
completed @ vendor.js?id=2b5ccc814110031408ca:21606
datatables:122 Doesn't Work
vendor.js?id=2b5ccc814110031408ca:21545 Uncaught TypeError: $(...).uniform is not a function
at HTMLDocument.<anonymous> (app.js?id=da888f45698c53767fca:18419)
at mightThrow (vendor.js?id=2b5ccc814110031408ca:21252)
at process (vendor.js?id=2b5ccc814110031408ca:21320)
The problem gets solved when i compile and mix the scripts using laravel mix but when i write same scripts in the blade or use without mixing it shows the jQuery / $ is not defined error.
当我使用 laravel mix 编译和混合脚本时，问题得到解决，但是当我在刀片中编写相同的脚本或不混合使用时，它显示 jQuery / $ 未定义错误。
What is the best way in this case?
在这种情况下最好的方法是什么？
The master page looks like this:
母版页如下所示：
<body>
@yield('body')
<script src="{{ mix('/assets/admin/manifest.js') }}"></script>
<script src="{{ mix('/assets/admin/vendor.js') }}"></script>
<script src="{{ mix('/assets/admin/app.js') }}"></script>
@section('scripts')
@show
@yield('footer')
</body>
回答by Bashirpour
according to this answeryou need to import jquerythis way
根据此答案，您需要以jquery这种方式导入
window.$ = window.jQuery = require('jquery');
回答by Mohit Aneja
It's an old question, however, this may help others finding answer for this.
这是一个古老的问题，但是，这可能有助于其他人为此找到答案。
The vendor js takes time to load and the inline javascript we use in blade templates fires before vendor js is completely loaded.
供应商 js 需要时间来加载，并且我们在刀片模板中使用的内联 javascript 在供应商 js 完全加载之前触发。
To fix this, wrap inline javascript in setTimeout function like below:
要解决此问题，请在 setTimeout 函数中封装内联 javascript，如下所示：
@push('scripts-or-whatever')
<script>
setTimeout(function(){
// $, jQuery, Vue is all ready to use now
$(document).ready(function(){ // code here })
}, 100)
</script>
@endpush
