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

Développeur web Front-End dans l'Oise - Gary Deshayes <--Translation

Crée le : dimanche 26 janvier 2020


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.

Articles récents :
Symfony

Crée le : lundi 1 novembre 2021

Javascript Framework JS

Crée le : dimanche 31 octobre 2021

Symfony

Crée le : mercredi 1 septembre 2021

Javascript Framework JS

Crée le : samedi 28 novembre 2020

Javascript SQL Framework JS

Crée le : dimanche 20 septembre 2020

Symfony Bugs

Crée le : dimanche 26 janvier 2020