jQuery & AssetMapper

[rwkt]

I had previously followed this to install jQuery but I no longer use Webpack/Encore.

I'm now using AssetMapper but I'm not sure how I can use jQuery in my app.js, I'm getting require is not defined and $ is not defined.

I have already installed jQuery via importmap:require.

I'd appreciate any help.

[ghost]

maybe @weaverryan will help

[rwkt]

// app.js
import jquery from './vendor/jquery/dist/jquery.min.js';
// also tried this:
// import jquery from 'jquery/dist/jquery.min';

// importmap.php
'jquery/dist/jquery.min' => [
    'downloaded_to' => 'vendor/jquery/dist/jquery.min.js',
    'url' => 'https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js/+esm',
],

// rendered page
<script type="importmap">
{
    "imports": {
        "app": "/assets/app-462e39e1d1cb4b9fe378f823adecd581.js",
        "/assets/vendor/jquery/dist/jquery.min.js": "/assets/vendor/jquery/dist/jquery.min-8429f1a03bbc9de68a7d314ebe7bc4aa.js"
    }
}
</script>

I still get $ is not defined

But if I remove jquery completely from AssetMapper, and add jQuery using the line below, I don't get $ is not defined anymore.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>

Any help would be appreciated.

[rwkt]

I've managed to get it to work:

// app.js
import jquery from './vendor/jquery/dist/jquery.min.js';
const $ = jquery;
window.$ = window.jQuery = $;

I've also had to do the same for bootstrap so I can use bootstrap vars in js.

[SaItiplouf]

I am doing the same and it's not working when using on twig file, any advice ?

[weaverryan]

Ah, I think I understand the situation: you want to use jquery AND have it become a global $ variable. Like Encore, when you import jquery, it doesn’t become a global variable (though Encore had the autoProvideJquery() method to fake / force this).

so yes, if you want a global variable, your solution is correct: import it then make it global via window.$ 👍

But the hope is that, instead of relying on global variables, you import jquery wherever you need it. So in each file (or, I think even online script tags with type=“module” this would work, though I’d minimize use of those), where you are referencing $, do:

import $ from ‘jquery’;

Cheers!

[ghost]

I also have a problem with this.
I'm trying to use jquery and jquery-ui - so i required both with the --download option and tried this:

import $ from 'jquery';
window.$ = $;
import 'jquery-ui';

result is: "Uncaught ReferenceError: jQuery is not defined" in jquery-ui

i tried multiple ways, this is the one i thought was most logical:

import $ from 'jquery';
window.$ = window.jQuery = $;
import 'jquery-ui';

While i tried multiple ways i also disabled/enabled preloading, but nothing actually did the trick. How can i make this work? Am i doing something fundamentally wrong?

[stof]

the main issue IMO is that jQuery and jQuery UI are not shipped as ES modules.

[rwkt]

@yschmitzer If you do what I did above then you can use $ globally, otherwise just do import $ from 'jquery'; in each file where you use it.