Brave publisher PUBLISHER
Développeur web Front-End dans l'Oise - Gary Deshayes

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

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 5 | Retourner une image via une route d'un controller

Symfony

Crée le : mercredi 1 septembre 2021

VueJS 3, ExpressJS 4.17 | Upload et redimensionnement d'une image

Javascript Framework JS

Crée le : samedi 28 novembre 2020

Symfony Event Subscriber | Restriction d'une plage ip avec un Event Subscriber

Symfony

Crée le : samedi 14 novembre 2020

Angular, ExpressJS | Authentification JWT avec Angular 10 et ExpressJS 4 (MySQL)

Javascript SQL Framework JS

Crée le : dimanche 20 septembre 2020

Symfony, Excel, CSV | Générer un fichier CSV pour Excel avec Symfony

Symfony

Crée le : jeudi 6 août 2020

Symfony FormType ChoiceType | Radio button valeur par défaut dans un FormType

Symfony

Crée le : dimanche 26 juillet 2020

Doctrine, Symfony | Différence entre deux dates sous MySQL (Jour, mois, années...)

Symfony SQL

Crée le : jeudi 18 juin 2020

JavaScript, jQuery et Regex | Sécuriser un mot de passe en temps réel avec JS

Javascript jQuery

Crée le : lundi 23 mars 2020

Symfony, Doctrine | Récupérer les anciennes données d'un formulaire FormType

Symfony

Crée le : vendredi 14 février 2020

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

Symfony Bugs

Crée le : dimanche 26 janvier 2020