I usually use webpack encore in my symfony projects and it’s alwyas fine. In a new project using Symfony 6.4 I’d like to use AssetMapper instead but I’ve had this error:

Uncaught ReferenceError: tns is not defined
at theme.min-7b87dd5a87eb0e3375bc709cf559e185.js:172:46
at theme.min-7b87dd5a87eb0e3375bc709cf559e185.js:159:46
at theme.min-7b87dd5a87eb0e3375bc709cf559e185.js:160:6
at theme.min-7b87dd5a87eb0e3375bc709cf559e185.js:340:2

This is my code:

// assets/app.js

import './styles/app.css';

import './front/vendor/bootstrap/dist/js/bootstrap.bundle.min.js'
import './front/vendor/smooth-scroll/dist/smooth-scroll.polyfills.min.js'
import './front/vendor/tiny-slider/dist/min/tiny-slider.js' // here is tns
import './front/js/theme.min.js'


console.log('This log comes from assets/app.js - welcome to AssetMapper! ????');

In the template:

// base.html.twig:

{% block javascripts %}

    {% block importmap %}
        {{ importmap('app') }}
    {% endblock %}

{% endblock %}

This is a part of theme.min.js which it comes with the purchased theme.

I’d like to know how to fix it and what is the best way to use 3rd party javascript packages using AssetMapper, because there is also other same error with smoothScroll.

REMARK:

When using the traditional method to call js like this, everything is good and I don’t have any errors:

{% block javascripts %}
<script src="{{ asset('assets/front/js/jquery-3.7.1.min.js') }}"></script>
<script src="{{ asset('assets/front/vendor/tiny-slider/dist/min/tiny-slider.js') }}"></script>
<!-- Main theme script-->
<script src="{{ asset('assets/front/js/theme.min.js') }}"></script>
{% endblock %}