Problème importation jQuery : $ is not defined
EnderMC Le 19 mai 2020 à 16:53 (Édité le 19 mai 2020 à 16:58)
Hello,
Je voudrais automatiser mon site web... Avec Ajax, c'est possible (enfin, je croit) ! Voici le problème que j'ai :
ReferenceError: $ is not definedSauf que si je fais :
var $ = require('jquery-3.5.1.min.js')J'ai cette autre erreur :
ReferenceError: require is not definedAlors, du coup, comment je pourrais faire... ? Merci de votre réponse 😄
Ok, ça explique tout !
Tu as globalement deux options :
- Sans package manager, si ton fichier
jquery3.5.1.min.jsest dans le même dossier que le fichier appelant (index.js), tu peux fairerequire('./jquery-3.5.1.min.js')mais il faut obligatoirement que ta version de jQuery soit un module JS (et non pas la version "standard" de jQuery que tu importerais avec<script>) - Avec package manager, tu peux installer le module jQuery (par exemple avec npm ce sera
npm install jQuery) et tu pourrais ensuiterequirece module (ou bien l'importer :import $ from jQuery)
Cela dit, si tu n'utilises pas de framework front ni de package manager, je te recommanderais d'importer jQuery de façon basique avec <script> depuis ton HTML (avant ton script index.js) et en appelant jQuery soit via un fichier local soit via un CDN : ce sera bien moins prise de tête 😉
A bientôt,
Boris
Hello @EnderMC,
Il existe en JavaScript de nombreuses façons d'importer des librairies / packages / modules.
Utilises-tu un framework particulier pour développer ton site internet ? S'il s'agit de HTML, CSS et JS "basiques", je peux te recommander d'importer jQuery (puisque, comme tu l'as certianement compris, Ajax est un module de jQuery) avec les balises <script> directement depuis ton fichier HTML, en plaçant le code suivant avant la balise </body> de ta page :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>Le code ci-dessus importe jQuery depuis les CDN (Content Delivery Network) de Google, mais tu peux bien sûr utiliser d'autres CDN ou bien importer jQuery en local depuis ton propre serveur 😉
En espérant avoir pu t'aider,
A bientôt,
Boris
EnderMC Le 20 mai 2020 à 13:20
Hello @PrimFX,
Oui, je l'avais compris : Ajax est un module de jQuery. Dans ma partie <head>, j'ai bien le script de mon index.js (où il y a var $ = require('jquery-3.5.1.min.js');) et celui de jquery-3.5.1.min.js.
Et les ReferenceError: truc is not defined, c'est la console.
PrimFX Le 20 mai 2020 à 13:24 (Édité le 20 mai 2020 à 13:24)
Ok je vois !
Est-ce que tu peux poster ton fichier HTML (ou le début du moins) où tu inclus ton index.js ainsi que la partie de ton index.js où tu fais ton require ?
Au passage, est-ce que tu utilises un package manager pour ton projet type npm ou yarn ? Il faut voir "où se trouve le module jQuery" dans ton arborescence : je pense que c'est de là que vient le problème, jQuery n'a simplement pas l'air d'être trouvé 😉
EnderMC Le 20 mai 2020 à 13:50 (Édité le 25 octobre 2020 à 10:42)
Mon <head> complet :
<head>
<title><?= $topic['subject'] ?> | EnderMC</title>
<link rel="stylesheet" type="text/css" href="/public/css/style.css">
<link rel="stylesheet" type="text/css" href="/public/css/forum.css">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto&display=swap">
<meta charset="utf-8">
<script type="text/javascript" src="/public/js/index.js"></script>
<script type="text/javascript" src="/public/js/notifications.js"></script>
<script type="text/javascript" src="/public/js/jquery-3.5.1.min.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script src="https://www.googletagmanager.com/gtag/js?id=UA-148433514-6" async></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-148433514-6');
</script>
<script type="text/javascript" src="//twemoji.maxcdn.com/v/latest/twemoji.min.js" crossorigin="anonymous"></script>
<script type="text/javascript" src="//kit.fontawesome.com/ff068503b6.js" crossorigin="anonymous"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
</head>@EnderMC ton head a l'air correct 😉
Du coup tu ne m'as pas donné d'infos par rapport à ton package manager : est-ce que tu utilises npm ? yarn ? autre chose ?
Est-ce que tu peux également poster le code (au moins les "require") de ton fichier index.js ?
Merci !
EnderMC Le 20 mai 2020 à 16:59
Hello @PrimFX,
Non je n'utilise pas npm ou yarn. Les require de mon index.js :
var $ = require('jquery-3.5.1.min.js');Ok, ça explique tout !
Tu as globalement deux options :
- Sans package manager, si ton fichier
jquery3.5.1.min.jsest dans le même dossier que le fichier appelant (index.js), tu peux fairerequire('./jquery-3.5.1.min.js')mais il faut obligatoirement que ta version de jQuery soit un module JS (et non pas la version "standard" de jQuery que tu importerais avec<script>) - Avec package manager, tu peux installer le module jQuery (par exemple avec npm ce sera
npm install jQuery) et tu pourrais ensuiterequirece module (ou bien l'importer :import $ from jQuery)
Cela dit, si tu n'utilises pas de framework front ni de package manager, je te recommanderais d'importer jQuery de façon basique avec <script> depuis ton HTML (avant ton script index.js) et en appelant jQuery soit via un fichier local soit via un CDN : ce sera bien moins prise de tête 😉
A bientôt,
Boris
EnderMC Le 20 mai 2020 à 17:18 (Édité le 20 janvier 2021 à 15:19)
Je t'invite à regarder cette section Including jQuery de jQuery sur npm : toutes les façons d'importer jQuery y sont mentionnées 😀
