jQuery, Webpack et Symfony | Appeler jQuery dans vos fichiers twig

Uncaught ReferenceError: jQuery is not defined

Si vous avez rencontré ce message d’erreur dans votre console d’un projet Symfony utilisant Webpack, il est fort probable que vous utilisez jQuery de la manière suivante dans votre projet : 

Votre cas

Dans le fichier app.js vous avez surement appelé jQuery de cette manière :

//Fichier app.js

const $ = require('jquery');

Et vous avez ensuite voulu appelé dans votre fichier twig jQuery de cette façon :

//index.html.twig

<script>
  $("element");
</script>

Et vous êtes tombés sur ce message : Uncaught ReferenceError: jQuery is not defined

La raison

Ce problème survient car quand on appel jquery avec la méthode require(), le fichier app.js va encapsuler jquery dans sa fonction qui ne sera visible que par le code dans le fichier app.js, donc le fichier index.html.twig qui appel jquery avec une balise script ne sera pas dans l’encapsulation et ne pourra pas appeler jquery.

Ma solution pour appeler jQuery dans twig

Au lieu d’appeler jQuery de l’ancienne manière dans votre fichier app.js, procédez ainsi :

//app.js

import $ from 'jquery';
global.$ = $;

Maintenant dans n’importe quel fichier twig, vous pourrez utiliser jquery, après avoir appelé le fichier app.js biensur, car c’est tout de même lui qui instancie jquery.