Как подключить 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. Документацию читал и переводную, и оригинальную. Что я упустил? Спасибо.

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

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

Простой
Как в поле ChoiceType разрешить пользователю написать свой вариант?
- 1 подписчик
- 11 апр.
- 28 просмотров
1

ответ
PHP

+1 ещё

Простой
Как настроить symfony\messenger вне symfony?
- 2 подписчика
- 02 апр.
- 100 просмотров
1

ответ
PHP

+2 ещё

Средний
Какой аналог itemOperations в api-platform 3 версии?
- 1 подписчик
- 31 мар.
- 50 просмотров
1

ответ
Symfony

Простой
Как работать с slug в Symfony?
- 1 подписчик
- 24 мар.
- 238 просмотров
1

ответ
Symfony

Простой
Как установить symfony 5 на поддомен?
- 1 подписчик
- 22 мар.
- 48 просмотров
0

ответов
PHP

+2 ещё

Простой
Symfony OneToMany Fetch: Eager with ULID primary key?
- 1 подписчик
- 15 мар.
- 110 просмотров
1

ответ
Symfony

+1 ещё

Простой
При установке Symphony версия пакета выше, чем нужно: как исправить?
- 1 подписчик
- 10 мар.
- 114 просмотров
1

ответ
Парсинг

+1 ещё

Простой
Symfony HttpClient и Simple HTML DOM?
- 1 подписчик
- 08 мар.
- 37 просмотров
1

ответ
Symfony

Простой
Symfony каталог товаров с динамичной фильтрацией?
- 1 подписчик
- 06 мар.
- 78 просмотров
1

ответ
PHP

+2 ещё

Простой
Как правильно смапить PHP класс с Doctrine?
- 1 подписчик
- 02 мар.
- 132 просмотра
0

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

PHP/Symfony программист

Венста • Киров

от 220 000 ₽

PHP-разработчик (Symfony)

IRLIX

от 150 000 ₽

Senior Backend разработчик (PHP 8, Symfony 6, PostgreSQL)

TextMagic

от 5 000 $

Дизайн сайта для web3 проекта

18 апр. 2024, в 16:43

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

Составление технических заданий для разработчиков

18 апр. 2024, в 16:41

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

Перекрасить 2 вкладыш для типографии в новый цвет

18 апр. 2024, в 15:55

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

Покажите корневой шаблон, где подключаете скрипты и покажите настройки 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?

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

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

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