Symfony 7.0 AssetMapper: JS Files Only Load on Initial Page Load or After F5 Refresh

I’m working on a project using Symfony 7.1 and PHP 8.3. I’ve encountered an issue with the AssetMapper where my JavaScript files only load on the initial page load or after an F5 refresh. When navigating between pages, the JS files do not load correctly.

For example, I have installed DataTables.net with AssetMapper. Everything works fine on the first page load, and my DataTable is properly initialized

enter image description here

However, if I navigate away from this page and then return, the DataTable is no longer initialized because the JS file is not being called again.

enter image description here

In this example, I used DataTables, but I experience the same issue with my own custom JS files.

Steps Taken:

  • Followed the Symfony documentation for installing and configuring AssetMapper.
  • Ensured that DataTables.net is correctly set up and working on the initial page load.
  • Checked for any errors in the browser console.

Code Snippet (app.js):

import './styles/app.css';
import 'datatables.net-dt/css/dataTables.dataTables.min.css';

import './bootstrap.js';
import DataTable from 'datatables.net-dt';


function loadDatatable() {
    console.log( '%c loadDatatable', 'background: #00FF2E; color: #000000' );
    new DataTable( '#users-datatable', {
        ajax:       Routing.generate( 'app_users_ajax' ),
        processing: true,
        serverSide: true,
        columns:    [
            { data: 'id' },
            { data: 'email' },
            { data: 'firstName' },
            { data: 'lastName' },
            { data: 'status' },
            {
                data:   'action',
                render: function ( data, type, row ) {
                    return `<a href="/?_switch_user=${ row.email }" class="font-bold w-full rounded my-1 bg-primary text-white text-primary-foreground hover:bg-primary-hover py-2 px-3">Impersonate</a>`;
                },
            },
        ],
    } );
}

document.addEventListener( 'DOMContentLoaded', function () {
    loadDatatable();
} );

base.html.twig

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

Error Message:

No specific error messages are displayed in the console when navigating back to the page.

Symfony and PHP Versions:

Symfony version: 7.1
PHP version: 8.3

Thank you for your help!