CODEWITHSUNDEEP
javascriptsymfony
meaulnes
meaulnes

Reputation: 383

Why my Symfony Page specific script is not working?

I using symfony for the first time and in its last version i.e. 5 I managed to code a multiple file upload and it works properly. Nevertheless, when choosing the files, nothing is displayed into the FileType field (i.e. neither the number nor the name of the choosen files appears). Doing some searches on the web, I discovered that I must do some javascripting to solve this. Moreover as I want to add progress bar, javascript becomes necessary.

The trouble is I cannot manage having JQuery and Javascript working on the page.

Here is what I did.

webpack.config.js (most comments are removed to shorten the file)

var Encore = require('@symfony/webpack-encore');
if (!Encore.isRuntimeEnvironmentConfigured()) {
Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
.setOutputPath('public/build/')
.setPublicPath('/build')

.copyFiles({
    from: './assets/images',
})

/*
 * ENTRY CONFIG
 */
.addEntry('app', './assets/js/app.js')
.addEntry('upload', './assets/js/upload.js')
.splitEntryChunks()

.enableSingleRuntimeChunk()

/*
 * FEATURE CONFIG
 */
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
.enableVersioning(Encore.isProduction())

.configureBabelPresetEnv((config) => {
    config.useBuiltIns = 'usage';
    config.corejs = 3;
 })
 // enables Sass/SCSS support
.enableSassLoader()

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

base.html.twig (the master template)

<!-- <!DOCTYPE html> -->
<html>
    <head>
        <meta charset="UTF-8" />
        <title>
          {% block title %}
             Welcome!
          {% endblock %}
       </title>

  {% block stylesheets %}
      {#       'app' must match the first argument to addEntry() in webpack.config.js #}
      {{ encore_entry_link_tags('app') }}
     {% endblock %}
  </head>

  <body>
    {% include 'topbar.html.twig' %}
    {% include 'banner.html.twig' %}
    {% include 'menubar.html.twig' %}
    {% include 'slogan.html.twig' %}
    {% include 'flashmessages.html.twig' %}

    <div class="container my-content">
       {% block body %} {% endblock %}
    </div>
    {% include 'footer.html.twig' %}
    {% block javascripts %} {% endblock %}

    </body>
</html>

assets/js/upload.js (the upload page specific script)

$(document).ready(function() {
    //bsCustomFileInput.init();
    console.log('document ready');
    alert('loaded');
})

After compilation with

yarn encore dev

the public/build directory contains a upload.js file with this content

(window["webpackJsonp"] = window["webpackJsonp"] || []).push([["upload"],{

/***/ "./assets/js/upload.js":
/*!*****************************!*\
  !*** ./assets/js/upload.js ***!
\*****************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

var $ = __webpack_require__(/*! jquery */ "./node_modules/jquery/dist/jquery.js");

$(document).ready(function () {
  //bsCustomFileInput.init();
  console.log('document ready');
  alert('loaded');
});

/***/ })

},[["./assets/js/upload.js","runtime","vendors~app~upload"]]]);
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9hc3NldHMvanMvdXBsb2FkLmpzIl0sIm5hbWVzIjpbIiQiLCJyZXF1aXJlIiwiZG9jdW1lbnQiLCJyZWFkeSIsImNvbnNvbGUiLCJsb2ciLCJhbGVydGUiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7OztBQUFBLElBQU1BLENBQUMsR0FBR0MsbUJBQU8sQ0FBQyxvREFBRCxDQUFqQjs7QUFDQUQsQ0FBQyxDQUFDRSxRQUFELENBQUQsQ0FBWUMsS0FBWixDQUFrQixZQUFXO0FBQ3pCO0FBQ0FDLFNBQU8sQ0FBQ0MsR0FBUixDQUFZLGdCQUFaO0FBQ0FDLFFBQU0sQ0FBQyxRQUFELENBQU47QUFDSCxDQUpELEUiLCJmaWxlIjoidXBsb2FkLmpzIiwic291cmNlc0NvbnRlbnQiOlsiY29uc3QgJCA9IHJlcXVpcmUoJ2pxdWVyeScpO1xuJChkb2N1bWVudCkucmVhZHkoZnVuY3Rpb24oKSB7XG4gICAgLy9ic0N1c3RvbUZpbGVJbnB1dC5pbml0KCk7XG4gICAgY29uc29sZS5sb2coJ2RvY3VtZW50IHJlYWR5Jyk7XG4gICAgYWxlcnRlKCdsb2FkZWQnKTtcbn0pIl0sInNvdXJjZVJvb3QiOiIifQ==

Once the page loaded the browser inspector shows the script

<script src="/build/upload.js><script>

but it has no effect . No console.log , no alert

Upvotes: 0

Views: 1374

Answers (1)

Tortus
Tortus

Reputation: 151

In your twig template, you need to include the encore tags for both CSS and JS.

I see you added {{ encore_entry_link_tags('app') }}

But I do not see the tag for JS entries

{{ encore_entry_script_tags('app') }} or {{ encore_entry_script_tags('upload') }}.

Might be that it's included in your footer.html.twig, but we don't see that here.

Hope this helps!

EDIT: Since you found your answer, I think we can resolve this by giving insight in how to find a hidden Javascript error.

First, try with other browsers. In the past I had an error in my JS, couldn't see it in the chrome console, but I could see it with Firefox's.

You could always try using chrome's debugger, add a breakpoint then go step by step. How do you launch the JavaScript debugger in Google Chrome?

Or with Firefox's https://developer.mozilla.org/en-US/docs/Mozilla/Debugging/Debugging_JavaScript

If nothing shows up with this, the problem will probably be somewhere else.

Upvotes: 1

Related Questions