Как подключить jquery в Symfony 5?

Question

Станислав Шендаков @shindax

Symfony

Как подключить jquery в Symfony 5?

Добрый день.

Был уже такой вопрос, но никто пока не ответил. Symfony 5 и та-же проблема, не подключается jQuery.
В assets/app.js:

...
const $ = require('jquery');
global.$ = global.jQuery = $;
...

В webpack.config.js:

...
    // uncomment if you're having problems with a jQuery plugin
    .autoProvidejQuery()
...

Запускаю yarn encore dev --watch, все компилируется без ошибок. В шаблоне пишу:

...
<script>
console.log( $ )
</script>

Получаю Uncaught ReferenceError: $ is not defined. Если в самом шаблоне подключить jquery.min.js через <script src="...">... , все работает, но хотелось-бы сделать все идеологически верно, через Encore. Документацию читал и переводную, и оригинальную. Что я упустил? Спасибо.

Вопрос задан более трёх лет назад
672 просмотра

4 комментария

Подписаться Простой 4 комментария

Максим Федоров @Maksclub

Покажите корневой шаблон, где подключаете скрипты и покажите настройки Encore (его же используете)?

Написано более трёх лет назад

Станислав Шендаков @shindax Автор вопроса

Шаблон:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome!{% endblock %}</title>
        {# Run `composer require symfony/webpack-encore-bundle`
           and uncomment the following Encore helpers to start using Symfony UX #}
        {% block stylesheets %}
            {{ encore_entry_link_tags('app') }}
        {% endblock %}

        {% block javascripts %}
            {{ encore_entry_script_tags('app') }}
        {% endblock %}
    </head>
    <body>
        {% block body %}{% endblock %}
    </body>
</html>

<script>
    console.log( $ )
</script>

webpack.config.js:

const Encore = require('@symfony/webpack-encore');

// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools that rely on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
    // directory where compiled assets will be stored
    .setOutputPath('public/build/')
    // public path used by the web server to access the output path
    .setPublicPath('/build')
    // only needed for CDN's or sub-directory deploy
    //.setManifestKeyPrefix('build/')

    /*
     * ENTRY CONFIG
     *
     * Each entry will result in one JavaScript file (e.g. app.js)
     * and one CSS file (e.g. app.css) if your JavaScript imports CSS.
     */
    .addEntry('app', './assets/app.js')

    // enables the Symfony UX Stimulus bridge (used in assets/bootstrap.js)
    .enableStimulusBridge('./assets/controllers.json')

    // When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
    .splitEntryChunks()

    // will require an extra script tag for runtime.js
    // but, you probably want this, unless you're building a single-page app
    .enableSingleRuntimeChunk()

    /*
     * FEATURE CONFIG
     *
     * Enable & configure other features below. For a full
     * list of features, see:
     * https://symfony.com/doc/current/frontend.html#adding-more-features
     */
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    // enables hashed filenames (e.g. app.abc123.css)
    .enableVersioning(Encore.isProduction())

    .configureBabel((config) => {
        config.plugins.push('@babel/plugin-proposal-class-properties');
    })

    // enables @babel/preset-env polyfills
    .configureBabelPresetEnv((config) => {
        config.useBuiltIns = 'usage';
        config.corejs = 3;
    })

    // enables Sass/SCSS support
    //.enableSassLoader()

    // uncomment if you use TypeScript
    //.enableTypeScriptLoader()

    // uncomment if you use React
    //.enableReactPreset()

    // uncomment to get integrity="..." attributes on your script & link tags
    // requires WebpackEncoreBundle 1.4 or higher
    //.enableIntegrityHashes(Encore.isProduction())

    // uncomment if you're having problems with a jQuery plugin
    .autoProvidejQuery()
;
module.exports = Encore.getWebpackConfig();

assets/app.js:

// any CSS you import will output into a single css file (app.css in this case)
import './styles/app.css';

const $ = require('jquery');
global.$ = global.jQuery = $;

// start the Stimulus application
import './bootstrap';

Т.е. почти все по умолчанию.

Написано более трёх лет назад

Станислав Шендаков @shindax Автор вопроса
Заработало, когда изменил шаблон:

... {% block javascripts %} {{ encore_entry_script_tags('app') }} <script type="text/javascript" src="{{ asset('build/app.js') }}"></script> <script type="text/javascript" src="{{ asset('build/runtime.js') }}"></script> <script type="text/javascript" src="{{ asset('build/vendors-node_modules_symfony_stimulus-bridge_dist_index_js-node_modules_core-js_modules_es_ob-bca252.js') }}"></script> {% endblock %} ...

Причем, подключить нужно все три файла. В документации этого не увидел. И еще. Вот это: {{ encore_entry_script_tags('app') }} выводит три именно этих строчки ( посмотрел в отладчике Хрома ), но с атрибутом "defer".
Написано более трёх лет назад
Станислав Шендаков @shindax Автор вопроса
Разобрался. В файле config\packages\webpack_encore.yaml заменил:

script_attributes: defer:true

на

script_attributes: defer: false

Ответ нашел здесь:
https://symfony.com/blog/moving-script-inside-head...
Всем спасибо.
Написано более трёх лет назад

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

Symfony

Средний
Как лучше реализовать Routing многоязычного мультисайта на Symfony?
- 1 подписчик
- 30 окт.
- 63 просмотра
1

ответ
PHP

+1 ещё

Простой
Как правильно построить Symfony Forms, при ManyToMany связи?
- 1 подписчик
- 23 окт.
- 153 просмотра
1

ответ
PHP

+1 ещё

Средний
Как правильно передать скалярные параметры в сервис (проект Symfony)?
- 1 подписчик
- 15 окт.
- 107 просмотров
1

ответ
MySQL

+2 ещё

Сложный
Как разделить Entity Manager Doctrine для разных запросов?
- 1 подписчик
- 22 сент.
- 94 просмотра
0

ответов
Symfony

+1 ещё

Простой
Правильные практики деплоя symfony приложения с помощью Jenkins?
- 1 подписчик
- 18 сент.
- 60 просмотров
1

ответ
Symfony

Простой
Как отправлять уведомление в Телеграм через планировщик в Symfony 7?
- 1 подписчик
- 17 сент.
- 56 просмотров
0

ответов
Symfony

Простой
Как правильно в Symfony десериализовать Request в DTO, а последний потом в сущность?
- 1 подписчик
- 16 сент.
- 161 просмотр
1

ответ
Symfony

+1 ещё

Средний
Как использовать fixtures при наличии данных в БД?
- 1 подписчик
- 16 сент.
- 48 просмотров
2

ответа
Symfony

Простой
Как в форму симфони добавить из контроллера параметр и провалидировать?
- 1 подписчик
- 29 авг.
- 26 просмотров
0

ответов
Symfony

Простой
Как подключить шрифты в папке assets?
- 1 подписчик
- 12 авг.
- 57 просмотров
1

ответ
Показать ещё Загружается…

Middle PHP разработчик (Symfony, микросервисы, удаленка)

ДВИЖ • Москва

от 240 000 до 280 000 ₽

PHP Symfony Developer

Systeme.io

от 250 000 до 350 000 ₽

Senior Backend Developer / Старший разработчик PHP (Symfony)

Webbankir

До 350 000 ₽

Выложить 75 курсов на геткурс и настроить базовые функции

26 нояб. 2024, в 02:18

15000 руб./за проект

Редизайн и доработка интернет магазина на wordPress

25 нояб. 2024, в 23:42

50000 руб./за проект

Разработка мобильного приложения с дополненной реальностью (AR)

25 нояб. 2024, в 23:32

200000 руб./за проект

Покажите корневой шаблон, где подключаете скрипты и покажите настройки Encore (его же используете)?
Заработало, когда изменил шаблон:

... {% block javascripts %} {{ encore_entry_script_tags('app') }} <script type="text/javascript" src="{{ asset('build/app.js') }}"></script> <script type="text/javascript" src="{{ asset('build/runtime.js') }}"></script> <script type="text/javascript" src="{{ asset('build/vendors-node_modules_symfony_stimulus-bridge_dist_index_js-node_modules_core-js_modules_es_ob-bca252.js') }}"></script> {% endblock %} ...

Причем, подключить нужно все три файла. В документации этого не увидел. И еще. Вот это: {{ encore_entry_script_tags('app') }} выводит три именно этих строчки ( посмотрел в отладчике Хрома ), но с атрибутом "defer".
Разобрался. В файле config\packages\webpack_encore.yaml заменил:

script_attributes: defer:true

на

script_attributes: defer: false

Ответ нашел здесь:
https://symfony.com/blog/moving-script-inside-head...
Всем спасибо.

Как подключить jquery в Symfony 5?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт