TablerBundle icon indicating copy to clipboard operation
TablerBundle copied to clipboard

[Help needed] How do I use this bundle with Symfony's new AssetMapper?

Open MarkDaleman opened this issue 1 year ago • 1 comments

Hello all 👋,

I'm trying to combine Symfony's new AssetMapper with this library. As the docs suggests I'm extending the layout-vertical.html.twig template.

In my page.html.twig I have the following:

{% extends '@Tabler/layout-vertical.html.twig' %}

{% block page_content %}
 // yadda yadda 
{% endblock %}

{% block javascripts %}
    {{ parent() }} // So that tabler.js is loaded and we can open/close the mobile menu
    {{ importmap('app') }} // Import our global JS, containing our libraries
    <script type="module">
        import '{{ asset('dashboard.js') }}'; // Import our Dashboard.js on the page.html.twig. I do not want this code to be loaded on every page.
    </script>
{% endblock %}

This kinda works, because I can see the JS is loaded on my page.

If I visit a menu item (for example, the same page) I get the following console errors:

> An import map is added after module script load was triggered.

Also, all the javascript on the page is gone.

Maybe my understanding of AssetMapper isn't good enough or I'm doing something very wrong.

Could you guys point me to the right direction?

MarkDaleman avatar May 22 '24 13:05 MarkDaleman

I doubt its compatible, but the current version of the bundle is based on Webpack Encore. If you find a solution and share it as PR, I am happy to incorporate it.

kevinpapst avatar May 22 '24 20:05 kevinpapst