See how someone excellently set out the (common) issue, albeit some time ago: https://laracasts.com/discuss/channels/javascript/jquery-and-laravel-mix-why-you-no-work
I've tried different methods from time to time. They work. Then they don't work. For example, this with Laravel 5.8 and latest Mix...
const mix = require('laravel-mix'); require('laravel-mix-purgecss');
mix.autoload({ jquery: ['$', 'global.jQuery', 'jQuery', 'global.$', 'window.jQuery'] }); mix.scripts([ 'jquery' ], 'public/js/jquery-scripts.js');
In fresh project, package.json includes...
"devDependencies": {
"jquery": "^3.4.1",
"jquery.appear": "^1.0.1",
"laravel-mix": "^4.0.7",
"laravel-mix-purgecss": "^4.1.0",
...
}
npm install --only=dev delivers node_modules folder to the project root.
npm run dev returns a successful compile. After page load FF Web Console returns...
ReferenceError: jQuery is not defined
Q: What is the right way to set up a new project to compile JS files with Mix, using npm installs in node_modules (like jQuery) and .js files held in app/resources/js/?
This should do the trick for you as far as I know. It fails for you because you try to load jQuery, but it should be only window.jQuery
mix.autoload({
jquery: ['$', 'window.jQuery']
});
Source: https://github.com/JeffreyWay/laravel-mix/blob/master/docs/autoloading.md
A belated big thanks!
@mikea After 7 months ;)
Please or to participate in this conversation.