"$ is not defined" when using $ in view after requiring it in app.js

Question

I have an app and want to use Jquery in script tags inside my views.

I've tried moving the imports and making sure the app.js with the require jquery is loaded BEFORE the other script does (with alerts, one right after the importation, one right before the jquery I want to use).

I guess I could make one file per view and change my webpack config and require each time jquery, but that would be bothersome.

app.js

window._ = require('lodash');
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('bootstrap');

login.blade.php (layout)

<head>
    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}"></script>
    <script>
        $(document).ready(function () {
            alert("jQuery loaded");
        });
    </script>
</head>

webpack.mix.js

mix.autoload({
    jquery: ['$', 'window.jQuery', "jQuery", "window.$", "jquery", "window.jquery"],
    'popper.js/dist/umd/popper.js': ['Popper']
}).js('resources/js/app.js', 'public/js', 'ressources/js/password.js')
    .sass('resources/sass/app.scss', 'public/css');

I expect an alert saying jQuery loaded but got an

"Uncaught ReferenceError: $ is not defined"

The code in your question only shows that if you cannot load jQuery or Bootstrap, the problem is silently ignored. I would remove the `try..catch` — Phil, Jun 20 '19 at 07:58
what is the value of window.$ after the error is shown? if you run `console.log($('').jquery)`, what happens? — nicolallias, Jun 20 '19 at 08:00
`console.log($('').jquery)` returns the same error `$ is not defined` and for the value of `window.$` it is undefined. Yet `window.Popper` shows Popper.js — Victor Jozwicki, Jun 20 '19 at 08:02
https://stackoverflow.com/questions/28969861/managing-jquery-plugin-dependency-in-webpack — Michel Feldheim, Jun 20 '19 at 08:05
It actually seems to be working if I'm doing `global.$ = global.jQuery = require('jquery');`. Gonna check if my functions work as expected and will come back. — Victor Jozwicki, Jun 20 '19 at 08:11
I'm assuming that you've done `npm install` and `npm run dev`? Have you checked that you're not seeing a cached `app.js`? Have you looked in `app.js` to see if jQuery is actually in there? — Joe, Jun 20 '19 at 08:11
@Joe I'm able to call jQuery in my app.js yes. Thanks for checking this. Is actually seems to be working fine with the global instead of window. For what reason, I don't know — Victor Jozwicki, Jun 20 '19 at 08:36

score 0 · Accepted Answer · answered Jun 21 '19 at 12:25

0

In my app.js requirement I changed

window.$ = window.jQuery = require('jquery');

to

global.$ = global.jQuery = require('jquery');

If someone has the reason as to why this does work (and maybe why I shouldn't do that), I'd be happy to hear it.

answered Jun 21 '19 at 12:25

Victor Jozwicki

700
2
10
24

"$ is not defined" when using $ in view after requiring it in app.js

1 Answers1