Symfony 7.0 AssetMapper: файлы JS загружаются только при загрузке начальной страницы или после обновления F5

Я работаю над проектом, используя Symfony 7.1 и PHP 8.3. Я столкнулся с проблемой с AssetMapper, из-за которой мои файлы JavaScript загружаются только при начальной загрузке страницы или после обновления F5. При переходе между страницами файлы JS загружаются некорректно.

Например, я установил DataTables.net с AssetMapper. Все работает нормально при первой загрузке страницы, и мой DataTable правильно инициализирован.

Однако, если я уйду с этой страницы, а затем вернусь, DataTable больше не будет инициализироваться, поскольку файл JS больше не вызывается.

В этом примере я использовал DataTables, но у меня возникла та же проблема с моими собственными файлами JS.

Предпринятые шаги:

  • Следовал документации Symfony для установки и настройки AssetMapper.
  • Убедитесь, что DataTables.net правильно настроен и работает при начальной загрузке страницы.
  • Проверил на наличие ошибок в консоли браузера.

Фрагмент кода (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.info( '%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 %}

Сообщение об ошибке:

При возврате на страницу в консоли не отображаются конкретные сообщения об ошибках.

Версии Symfony и PHP:

Версия Symfony: 7.1 Версия PHP: 8.3

Спасибо за помощь!

удаление или отключение только турбо также решит эту проблему. Если вы захотите использовать турбо в будущем, вам нужно будет написать свой JavaScript с использованием Stimulus, как предлагается в документации: symfony.com/bundles/ux-turbo/current/index.html#usage

pok_net 16.07.2024 23:46
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
97
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я нашел решение своей проблемы благодаря комментариям 537mfb к этому вопросу.

Нет, в моем ответе есть единственное решение, которое сработало для меня - возможно, вы могли бы удалить @hotwired/turbo и @hotwired/ стимул, если вы действительно не собираетесь ими воспользоваться, но я этого не пробовал и не могу сказать, будут ли еще какие-то последствия от их удаления

Чтобы внести ясность: я считаю, что @hotwired/turbo конкретно отвечает за такое поведение кода, установленного для запуска на DOMLoaded, работающего только при первой загрузке страницы - если только страница не имеет другую точку входа из importmap

Вот что я сделал, чтобы решить проблему:

  1. Я удалил symfony/ux-turbo из своего проекта:

    composer remove stimulus-bundle
    
  2. Я также удалил следующие ссылки на AssetMapper:

    php bin/console importmap:remove @hotwired/stimulus
    php bin/console importmap:remove @hotwired/turbo
    php bin/console importmap:remove @symfony/stimulus-bundle
    
  3. В моем файле app.js я удалил этот импорт:

    import './bootstrap.js';
    

После внесения этих изменений мои файлы JS загружаются правильно при каждой навигации, и проблема больше не возникает.

Я не уверен насчет потенциальных побочных эффектов, так как я не копал глубже и мой проект не очень велик.

Спасибо 537mfb за полезную информацию!

Другие вопросы по теме