0
Good morning, you guys. I’ve been trying to solve this for some time but without success.
It seems that jQuery is not being loaded or assigned in $, jQuery.
Below are some snippets of code to illustrate better how I tried to include jQuery.
----- Package.json -----
"devDependencies": {
"jquery": "^3.4.1",
----- The .extract() in webpack.mix.js -----
const mix = require('laravel-mix');
let webpack = require('webpack');
mix.sass('resources/admin/sass/app.scss', 'admin/css/app.css')
.sass('resources/admin/sass/vendors/vendors.scss', 'admin/vendors/css/vendors.bundle.css')
.scripts(
[
...
],
'public/admin/js/scripts.bundle.js'
)
.extract(
[
'jquery', 'popper.js', 'bootstrap', 'js-cookie', 'moment', 'tooltip.js',
'perfect-scrollbar', 'sticky-js', 'wnumb'
],
'admin/vendors/js/global_vendors.bundle.js'
)
.version();
mix.webpackConfig({
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.$': 'jquery',
'window.jQuery': 'jquery',
Popper: 'popper.js',
moment: 'moment'
})
],
});
And in the HTML above the closing tag </body>:
<script src="{{ mix('/admin/js/pages/manifest.js') }}" type="text/javascript"></script>
<script src="{{ mix('/admin/vendors/js/global_vendors.bundle.js') }}" type="text/javascript"></script>
<script src="{{ mix('/admin/js/scripts.bundle.js') }}" type="text/javascript"></script>
After all attempts still of error in the scripts.bundle.js who is the last to be loaded:
Uncaught ReferenceError: $ is not defined
at scripts.bundle.js?id=d7fb6ba275af3d7aacaf:334
The error line is a $(document).ready(function() {...}).
Obs. 1: If I put the jQuery CDN link before all scripts everything works.
Obs. 2: Using the require no './bootstrap.js' no app.js and adding the app.js in HTML works.
Obs. 3: The jQuery commands in the browser console also give the same error.
I’ve been trying to understand why with the webpack not right.
I appreciate the help.
Have you tried calling the js file inside the script tag?
– adventistaam
Without using the
mix()?– Carlos Eduardo Evangelista
I particularly use it like this
<script src="{{ URL('admin/js/pages/manifest.js') }}"> </script>only my files are in the public folder– adventistaam
Changing to
<script type="text/javascript" src="{{ URL('/admin/vendors/js/global_vendors.bundle.js') }}"></script>did not resolve... =/– Carlos Eduardo Evangelista
But you are importing jquery-3 before that line there?
– adventistaam
jQuery is included in this file, it is the result of
.extract()what I do in the webpack.– Carlos Eduardo Evangelista
Apparently, its level is very advanced (without irony), it is because I never used with webpack, only even in html
– adventistaam