Encore -> AssetMapper Part 2

Hey @be_tnt

That's a very good question, sadly I don't know the answer, I've never had that problem before. Have you tried opening an issue on the Asset Mapper GitHub repository?

I will. Thx!

Hey @ahmedbhs ,

I think this blog post might be interested for you: https://symfony.com/blog/upgrading-symfony-websites-to-assetmapper - it highlights some migration steps from Encore to AssetMapper.

But in particular, to replace {{ encore_entry_link_tags('time-entries-summary-style') }} with the AssetMapper I think you should follow these steps:

1. The Webpack Encore entries are so called AssetMapper entrypoints. You need to convert your entries into entrypoints1-to-1. You need to do this manually by editing the importmap.php file. See the blog post I linked above for more examples.

2. Fix imports in your assets. Now, every time you import files, you must include the file extension. Once again see the example from the blog post.

3. Replace encore_entry_link_tags() calls in Twig templates with importmap() ones.

4. Enable SCSS Compilation in AssetMapper. By default, AssetMapper doesn't process SCSS files. You’ll need to configure it to use the symfonycasts/sass-bundle SCSS processor for this. Though think well if you still need Sass, because native CSS supports a lot of things and most probably you can finally convert your SCSS files into plain CSS files. Then you will simplify your setup a lot.

So. once again, I think that blog post will answer most of your questions, so make sure to read it in full to make the smooth migration. And sorry for the long reply on it!

I hope it helps!

Cheers!

Hey @Juan-D

Are you using Webpack or Asset Mapper?

Cheers!

As I say in my query, I am upgrading from Symfony 6.4 to 7.1 and changing webpack to activemapper. I have gone from 6.2 to 6.4 and from 6.4 to 7.1. I have been able to follow the tutorial without problem except for jquery-ui.

Regards!

Hey Juan,

Your upgrading strategy looks good to me. However, probably would be better to finish the upgrade first, and then, in a new PR, migrate from WebpackEncore to AssetMapper. It would simplify things for upgrading for you, and also it will be more obvious for you if you could easily migrate your project to AssetMapper or it requires more changes in your code.

Ideally, I would recommend you to get rid of jQuery completely in your project. jQuery is not recommended anymore as most of things can be easily done natively in the modern JS now. You can reference this website to see how you can replace jQuery calls with modern native JS: https://youmightnotneedjquery.com/

But if your code is tied very much to jQuery - I understand you, and it would require you some time to refactor. But it's difficult to say what's wrong in your code, because it depends on how (and where) you use jQuery. I don remember for sure, but it might be so that you can't use jQuery globally anymore. But in modern JS you should be able to import it like this:

// assets/app.js

import $ from 'jquery';

// Your custom JavaScript code using jQuery
$(document).ready(function() {
    console.log('Hello, jQuery!');
});

Or in case of the AssetMapper, you will need to install the package with bin/console importmap:install jquery and then in the import specify the exact path to the jquery file to import it correctly, something like import $ from './path/to/vendor/path/to/jquery.js'

This should be the first step, and you need to make sure jQuery works for you this way. When it works for you, you can try to do the same with jquery-ui, i.e. install it and import from the specific path where it was installed (I'm not sure if you can import everything at once, probably you would need to be more specific about what to import, e.g. import './path/to/vendor/jquery-ui/ui/widgets/datepicker.js'). It might be so that you may need to import both jquery and jquery-ui, i.e. import jquery first because jquery-ui may need that already. And in theory it should work, but if not - probably because jquery-ui requires the jquery to be globally available, not only for this file scope. And if so, this is a bad practice, but you may try to make the imported jquery global with window.$ = window.jQuery = $;. Once again, it's a bad practice, but it might work as a temporary solution before you get rid of jQuery completely.

Also, please take a look at the official docs: https://symfony.com/doc/current/frontend/asset_mapper.html#global-variables-like-jquery - this should help as well.

I hope that helps!

Cheers!

Hello Victor,
Of course what you mention is the first thing I did. I have not given many explanations before because I wanted to get to the crux of the question directly. But I have carried out the entire update process in a new branch of my project called update. First I updated the framework completely, then the recipes and then I made the necessary adjustments so that everything worked. Now I'm with the js part, and I haven't had any problems until getting to jQuery-ui. As I mentioned, jqyery is imported without problems but as soon as I do "... importmap:require jquery-ui" when I do the import in my js file, the error mentioned appears, "jQuery is not defined". The first thing I did before anything was to consult the official documentation that you mention, to include "window.$=window.jQuery=$" but this does not work for me. And I have verified that I can use jquery in other ways, although in my case, it is with datepicker, but with autocomplete, although I suppose it does not matter which component to use since it is also part of jquery-ui. I had thought that perhaps importing the component I need explicitly could work, but it is something else that still fails, I imported "jquery-ui/ui/widgets/autocomplete" but this has not worked either.
On the other hand, you are right, I have a fairly strong dependency on jquery since I use other components through jquery, such as owl.carousel, but the import does not work either, but I will try to solve the problem first with jquery-ui and Then I will go to owl.carousel. I think it is related, and if I solve one problem the other will be solved.
Thanks for the help.
Greetings.

Hey @Juan-D

Have you tried to define the jQuery as a global variable? It should happen before loading any other dependency. My guess is the jquery-ui plugin it's badly written, as many jquery plugins are, they assume that a global jQuery variable already exists

Cheers!