Problème importation jQuery : $ is not defined

Ce topic a été résolu
EnderMC

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 defined

Sauf que si je fais :

var $ = require('jquery-3.5.1.min.js')

J'ai cette autre erreur :

ReferenceError: require is not defined

Alors, du coup, comment je pourrais faire... ? Merci de votre réponse 😄

PrimFX

PrimFX Le 20 mai 2020 à 17:06

Ok, ça explique tout !

Tu as globalement deux options :

  • Sans package manager, si ton fichier jquery3.5.1.min.js est dans le même dossier que le fichier appelant (index.js), tu peux faire require('./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 ensuite require ce 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

Meilleure réponse
PrimFX

PrimFX Le 20 mai 2020 à 11:25

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

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

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

EnderMC Le 20 mai 2020 à 13:50

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>```
PrimFX

PrimFX Le 20 mai 2020 à 16:57

@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

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');
PrimFX

PrimFX Le 20 mai 2020 à 17:06

Ok, ça explique tout !

Tu as globalement deux options :

  • Sans package manager, si ton fichier jquery3.5.1.min.js est dans le même dossier que le fichier appelant (index.js), tu peux faire require('./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 ensuite require ce 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

Meilleure réponse
EnderMC

EnderMC Le 20 mai 2020 à 17:10

Cool merci ^^ @PrimFX

PS : pour le forum tu n'as pas montré comment suivre un topic (oui, je sais, c'est pas le sujet de ce topic)

EnderMC

EnderMC Le 20 mai 2020 à 17:18

Hello @PrimFX,

j'ai cheché sur le site de jQuery, et je n'ai pas trouvé de module...

PrimFX

PrimFX Le 20 mai 2020 à 17:20

Je t'invite à regarder cette section Including jQuery de jQuery sur npm : toutes les façons d'importer jQuery y sont mentionnées 😀

EnderMC

EnderMC Le 20 mai 2020 à 17:21

Cool je vais lire ceci 😁

Vous devez être connecté pour poster une réponse. Se connecter ou Créer un compte