Correct way to use Mix for jQuery?

Posted 1 month ago by MikeA

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/?

Please sign in or create an account to participate in this conversation.