Я работаю над проектом, используя Symfony 7.1 и PHP 8.3. Я столкнулся с проблемой с AssetMapper, из-за которой мои файлы JavaScript загружаются только при начальной загрузке страницы или после обновления F5. При переходе между страницами файлы JS загружаются некорректно.
Например, я установил DataTables.net с AssetMapper. Все работает нормально при первой загрузке страницы, и мой DataTable правильно инициализирован.
Однако, если я уйду с этой страницы, а затем вернусь, DataTable больше не будет инициализироваться, поскольку файл JS больше не вызывается.
В этом примере я использовал DataTables, но у меня возникла та же проблема с моими собственными файлами JS.
Предпринятые шаги:
Фрагмент кода (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
Спасибо за помощь!
Я нашел решение своей проблемы благодаря комментариям 537mfb к этому вопросу.
Нет, в моем ответе есть единственное решение, которое сработало для меня - возможно, вы могли бы удалить @hotwired/turbo и @hotwired/ стимул, если вы действительно не собираетесь ими воспользоваться, но я этого не пробовал и не могу сказать, будут ли еще какие-то последствия от их удаления
Чтобы внести ясность: я считаю, что @hotwired/turbo конкретно отвечает за такое поведение кода, установленного для запуска на DOMLoaded, работающего только при первой загрузке страницы - если только страница не имеет другую точку входа из importmap
Вот что я сделал, чтобы решить проблему:
Я удалил symfony/ux-turbo
из своего проекта:
composer remove stimulus-bundle
Я также удалил следующие ссылки на AssetMapper:
php bin/console importmap:remove @hotwired/stimulus
php bin/console importmap:remove @hotwired/turbo
php bin/console importmap:remove @symfony/stimulus-bundle
В моем файле app.js
я удалил этот импорт:
import './bootstrap.js';
После внесения этих изменений мои файлы JS загружаются правильно при каждой навигации, и проблема больше не возникает.
Я не уверен насчет потенциальных побочных эффектов, так как я не копал глубже и мой проект не очень велик.
Спасибо 537mfb за полезную информацию!
удаление или отключение только турбо также решит эту проблему. Если вы захотите использовать турбо в будущем, вам нужно будет написать свой JavaScript с использованием Stimulus, как предлагается в документации: symfony.com/bundles/ux-turbo/current/index.html#usage