Symfony 4 with jquery plugins and WebEncore

Question

I'm currently trying to bring the assets to work with an plugin for Jquery. But I don't get it on how to make it work the way it used to work earlier.

First of all heres my webpack.config.js

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

    Encore
        .setOutputPath('public/assets/')
        .setPublicPath('/assets')
        .cleanupOutputBeforeBuild()
        .enableSourceMaps(!Encore.isProduction())
        .enableVersioning(Encore.isProduction())
        .addEntry('css/bootstrap','./src/Assets/Bootstrap/scss/bootstrap.scss')
        .addEntry('js/jquery', './src/Assets/jquery-3.2.1.js')
        .addEntry('js/bootstrap', './src/Assets/Bootstrap/dist/js/bootstrap.bundle.js')
        .addEntry('js/common', './src/Assets/common.js')
        .addEntry('css/backend','./src/Assets/backend.css')
        .addEntry('css/admin','./src/Assets/admin.css')
        .addEntry('css/frontend','./src/Assets/frontend.css')
        .addEntry('css/bfcw','./src/Assets/bfcw.css')
        .addEntry('fonts/fa','./src/Assets/FontAwesome/web-fonts-with-css/scss/fontawesome.scss')
        .addEntry('fonts/fa-brand','./src/Assets/FontAwesome/web-fonts-with-css/scss/fa-brands.scss')
        .addEntry('fonts/fa-regular','./src/Assets/FontAwesome/web-fonts-with-css/scss/fa-regular.scss')
        .addEntry('fonts/fa-solid','./src/Assets/FontAwesome/web-fonts-with-css/scss/fa-solid.scss')
        .addEntry('fonts/fa-light','./src/Assets/FontAwesome/web-fonts-with-css/scss/fa-light.scss')
        .addEntry('js/growl', './src/Assets/growl/bootstrap-notify.js')
        .enableSassLoader()
        .enableSourceMaps(!Encore.isProduction())
        .cleanupOutputBeforeBuild()
        .enableBuildNotifications()
    ;

    module.exports = Encore.getWebpackConfig();

compiling works without any issues.

But I always get the following message inside my console

bootstrap.bundle.js:6286 Uncaught ReferenceError: $ is not defined
at Object.<anonymous> (bootstrap.bundle.js:6286)
at Object../src/Assets/Bootstrap/dist/js/bootstrap.bundle.js (bootstrap.js:6377)
at __webpack_require__ (bootstrap edfab3caa025dca10315:19)
at bootstrap edfab3caa025dca10315:62
at bootstrap edfab3caa025dca10315:62
Uncaught ReferenceError: $ is not defined
at list:108

I need to have the $(function(){.... within the twig templates as I need to trigger some functions from on the fly defined methods. I don't want to put everything into js files as some of the functions should not be publicly delivered as they are reservated for admins exclusivly etc.

Also I don't want to include the jquery over npm / yarn as the node_modules folder should not be submited into the productive environment and it should also not be available in the webroot directory.

I appreceate any help and will give more details, if required.

pécé · Accepted Answer · 2018-01-16 13:21:20Z

In the webpack-encore base template, there is this line :

// uncomment for legacy applications that require $/jQuery as a global variable
.autoProvidejQuery()

It defines jQuery ($) as a global variable so that it's usable by other scripts. That way you don't have to add the entry for jQuery. Here i syour new webpack.config.js :

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

Encore
    .setOutputPath('public/assets/')
    .setPublicPath('/assets')
    .cleanupOutputBeforeBuild()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())
    .autoProvidejQuery()
    .addEntry('css/bootstrap','./src/Assets/Bootstrap/scss/bootstrap.scss')
    .addEntry('js/bootstrap', './src/Assets/Bootstrap/dist/js/bootstrap.bundle.js')
    .addEntry('js/common', './src/Assets/common.js')
    .addEntry('css/backend','./src/Assets/backend.css')
    .addEntry('css/admin','./src/Assets/admin.css')
    .addEntry('css/frontend','./src/Assets/frontend.css')
    .addEntry('css/bfcw','./src/Assets/bfcw.css')
    .addEntry('fonts/fa','./src/Assets/FontAwesome/web-fonts-with-css/scss/fontawesome.scss')
    .addEntry('fonts/fa-brand','./src/Assets/FontAwesome/web-fonts-with-css/scss/fa-brands.scss')
    .addEntry('fonts/fa-regular','./src/Assets/FontAwesome/web-fonts-with-css/scss/fa-regular.scss')
    .addEntry('fonts/fa-solid','./src/Assets/FontAwesome/web-fonts-with-css/scss/fa-solid.scss')
    .addEntry('fonts/fa-light','./src/Assets/FontAwesome/web-fonts-with-css/scss/fa-light.scss')
    .addEntry('js/growl', './src/Assets/growl/bootstrap-notify.js')
    .enableSassLoader()
    .enableSourceMaps(!Encore.isProduction())
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
;

module.exports = Encore.getWebpackConfig();

More informations on the Symfony's blog dedicated article jQuery and Legacy Applications.

Chris West · Accepted Answer · 2018-01-17 22:45:13Z

Thanks to your help I was able to solve this mistery to me.

I moved everything into the main common.js which is the basic script for all other sites:

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

    Encore
        .setOutputPath('public/assets/')
        .setPublicPath('/assets')
        .cleanupOutputBeforeBuild()
        .enableSourceMaps(!Encore.isProduction())
        .enableVersioning(Encore.isProduction())
        .autoProvidejQuery()
        .addEntry('css/bootstrap','./src/Assets/Bootstrap/scss/bootstrap.scss')
        .addEntry('js/common', './src/Assets/common.js')
        .addEntry('css/backend','./src/Assets/backend.css')
        .addEntry('css/admin','./src/Assets/admin.css')
        .addEntry('css/frontend','./src/Assets/frontend.css')
        .addEntry('css/bfcw','./src/Assets/bfcw.css')
        .addEntry('fonts/fa','./src/Assets/FontAwesome/web-fonts-with-css/scss/fontawesome.scss')
        .addEntry('fonts/fa-brand','./src/Assets/FontAwesome/web-fonts-with-css/scss/fa-brands.scss')
        .addEntry('fonts/fa-regular','./src/Assets/FontAwesome/web-fonts-with-css/scss/fa-regular.scss')
        .addEntry('fonts/fa-solid','./src/Assets/FontAwesome/web-fonts-with-css/scss/fa-solid.scss')
        .addEntry('fonts/fa-light','./src/Assets/FontAwesome/web-fonts-with-css/scss/fa-light.scss')
        .enableSassLoader()
        .enableSourceMaps(!Encore.isProduction())
        .cleanupOutputBeforeBuild()
        .enableBuildNotifications()
    ;

    module.exports = Encore.getWebpackConfig();

My common.js consists of this:

    // require jQuery normally
    const $ = require('jquery');
    require('./growl/bootstrap-notify');
    require('./Bootstrap/dist/js/bootstrap.bundle');
    // create global $ and jQuery variables
    global.$ = global.jQuery = $;

This way I also have only one js file which is kind of sweet. webpack iritates me a little bit, but I believe I can live with it, now that I get the background related subbsystems. Thanks a lot

Mosi Isp · Accepted Answer · 2018-03-29 00:13:14Z

1

You can use this too for your common file (css or js) :

.
.
.createSharedEntry('common', [
    'jquery',
    'bootstrap',
    'bootstrap-sass/assets/stylesheets/_bootstrap.scss'
])
.
.

and then you will have a common.js and common.css

answered Mar 29, 2018 at 0:13

Mosi Isp

114 bronze badges

Collectives™ on Stack Overflow

Symfony 4 with jquery plugins and WebEncore

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related