Menu
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.
So, i have imported jQuery and bootstrap like this:
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.
To solve this i have added this configuration to replace $, jQuery with 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.
Now the problem is with the other scripts that we add without mixing using a single js or using blade section.
@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.
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>
961
According to this answer you need to import jquery this way
window.$ = window.jQuery = require('jquery');
before:
<script src="{{ asset('js/app.js') }}" defer></script>
after:
<script src="{{ asset('js/app.js') }}" ></script>
in layout worked for me.
43
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
