module JS Erreur

Version imprimable

28/03/2023, 11h28
Matteo53

module JS Erreur
Bonjour,
Pour mieux structurer mon code j'ai un fichier auxiliairesModule.js que je voudrais utiliser comme module, à l'intérieur il y a une variable "export let etre" avec la conjugaison d'un verbe structuré en JSON.
Je voudrais importer cette variable dans un autre fichier auxiliaires.js pour la manipuler.. faire un parse().. puis l'utiliser dans une classe. J'ai voulu faire un console.log pour tester mon import mais j'ai toujours une erreur "Uncaught SyntaxError: Cannot use import statement outside a module (at VM216 auxiliaires.js:1:1)
voici mon code du fichier auxiliairesModule.js:
Code:

1 2 3 4 5 6 7 8 9 10 export let etre = { "indicatif": { "present": [ "sono", "sei", "é", "siamo", "siete", "sono" ],...
auxiliaires.js
Code:

1 2 import {etre} from '../../modules/auxiliaresModule.js' export let verbe1 = JSON.stringify(etre);
page HTML
Code:

1 2 import {verbe1} from './js-css/js/auxiliaires.js' console.log(verbe1)
Faut il faire un import dans ma page HTML aussi ? mon objectif c'est de séparer la conjugaison des verbes dans des fichiers modules au format JSON et pouvoir les manipuler comme un objet dans une classe auxiliaires.js
merci

Ah j'oubliai si je passe directement de mon fichier auxiliairesModule.js a mon fichier HTML je n'ai aucun souci
28/03/2023, 14h52
Beginner.

Salut,

Le script (module) qui contient un import doit être chargé en tant que module : balise <script> avec le type "module"...

Un lien : Charger le module via le document HTML
28/03/2023, 15h00
Matteo53

Si vous parlez du fichier html j'ai aussi essayé

Code:

<script type="module" src ="./js-css/js/auxiliaires.js">

mais meme résultat.
merci
28/03/2023, 15h09
Beginner.
Quelle est l'erreur renvoyée ?

Vous êtes sûr que le chemin et le nom des différents fichiers sont correctes ?

Citation:

Envoyé par Matteo53

Si vous parlez du fichier html j'ai aussi essayé

Code:

<script type="module" src ="./js-css/js/auxiliaires.js">

C'est plutôt comme cela <script type="module" src="./js-css/js/auxiliaires.js"></script> qu'il faudrait l’écrire...

Et les noms de fichiers en rouge ne correspondent pas :
Citation:
Envoyé par Matteo53

voici mon code du fichier auxiliairesModule.js:
...

auxiliaires.js

Code:

1 2 import {etre} from '../../modules/auxiliaresModule.js' export let verbe1 = JSON.stringify(etre);

j'ai fait plusieurs essaie et bougé les fichiers :D voici j'ai réorganisé un peu pour me retrouver. Les chemins semblent correctes vu que j'ai la saisi semi-auto

mon fichier auxiliaireModule.js :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 export let etre = { "indicatif": { "present": [ "sono", "sei", "é", "siamo", "siete", "sono" ], "imparfait": [ "ero", "eri", "era", "eravamo,eravate", "erano" ],...
mon fichier auxiliaires.js(j'ai essayé un console.log() pour tester:
Code:

1 2 import {etre} from "./modules/auxiliaireModule.js"; console.log(etre);
mon fichier HTML :

Code:

<script type="module" src="./js-css/js/auxiliaires.js"></script>

J'ai toujours la meme erreur dans la console:
auxiliaires.js:1 Uncaught SyntaxError: Cannot use import statement outside a module (at auxiliaires.js:1:1)
et quand je clique sur l'erreur la ligne soulignée en rouge est la suivante :
import {etre} from "./modules/auxiliaireModule.js"; (le chemin doit être bon vu que j'ai la saisi-auto).
merci

28/03/2023, 19h20
Beginner.

1 pièce(s) jointe(s)

La saisie semi-auto n'est peut-être pas toujours fiable...

Vous utilisez quel IDE ?

Pouvez-vous me dire quelle est la structure (dossiers et sous-dossiers) de votre projet ?

Par exemple où se trouve le fichier html et les fichiers script ?

Voici un exemple de structure qui fonctionne :

Pièce jointe 636469
28/03/2023, 23h41
Matteo53

1 pièce(s) jointe(s)

Bonsoir,
je vous remercie de me consacrer de votre temps, mon console.log(etre) a marché et il est bien visible à la deuxième ligne de ma console, par contre j'ai toujours l'erreur à la première ligne qui bloque mon script. J'ai un formulaire dans la page HTML ou l'utilisateur choisi un verbe et la conjugaison apparait à la validation.
voici une capture de ma console.
Pièce jointe 636473
j'utilise Visual studio Code puis j'ai un serveur local WAMP64.
merci
29/03/2023, 14h20
Beginner.

1 pièce(s) jointe(s)

Citation:

Envoyé par Matteo53

... mon console.log(etre) a marché et il est bien visible à la deuxième ligne de ma console, par contre j'ai toujours l'erreur à la première ligne qui bloque mon script.

Si le console.log(etre) a fonctionné c'est que le script n'est pas bloqué et que l'importation s'est bien effectuée...

Le hic c'est que je ne peux pas reproduire le problème pour pouvoir le déboguer (on n'a pas toutes les infos) ...

Mais j'ai un doute sur les chemins et je ne peux pas vérifier car je n'ai pas la structure de votre projet... J'ai déjà donné un exemple de structure qui fonctionne dans le message précédent :

Pièce jointe 636502

Avec cette structure il faut faire import { etre } from "../../modules/auxiliaireModule.js"; dans le fichier auxiliaires.js et non import {etre} from "./modules/auxiliaireModule.js";.

Le chemin diffère selon la structure du projet...

Citation:

Envoyé par Matteo53

j'utilise Visual studio Code puis j'ai un serveur local WAMP64.

Essayez avec un autre serveur pour voir... Il y a cette extension pour VS Code : https://marketplace.visualstudio.com...dey.LiveServer
29/03/2023, 14h43
Matteo53

1 pièce(s) jointe(s)

Bonjour,
voici la structure de mon projet
Pièce jointe 636506

Dans la page auxiliaires.js :

Code:

import {etre} from "../../js-css/js/modules/auxiliaireModule.js";

Dans ma page auxiliaires.html :

Code:

<script type="module" src="./js-css/js/auxiliaires.js"></script>

Si je clique sur l'erreur il y a de souligné en rouge

Code:

import {etre} from "../../js-css/js/modules/auxiliaireModule.js";

pourtant c'est le bon chemin sinon il ne marcherait pas dans la console.log(etre)
merci
29/03/2023, 15h48
Beginner.

Citation:

Envoyé par Matteo53

voici la structure de mon projet
Pièce jointe 636506

J'ai reproduit cette structure et cela fonctionne chez moi...

Citation:

Envoyé par Matteo53

J'ai un formulaire dans la page HTML ou l'utilisateur choisi un verbe et la conjugaison apparait à la validation.
...
j'utilise Visual studio Code puis j'ai un serveur local WAMP64.

Est-ce que vous tenez obligatoirement à utiliser un formulaire ?

Est-ce que vous utilisez un langage serveur pour votre application ?

Ce n'est pas obligatoire si vous faites tout en JavaScript...
29/03/2023, 15h58
Matteo53

non j'ai fais un petit projet en PHP et base de données dernièrement avec requetés SQL. Je voulais apprendre un peu le JS sans base de données et Framework etc. Je me suis dis que pour structurer mon code je voulais séparer la conjugaison des verbes dans des modules qui contient des variables avec des structures en JSON puis les importer dans un autre fichier JS et les manipuler dans des classes comme des objet. Pourquoi je n'ai pas fait des fichiers JSON au lieu des modules ? je ne sais pas trop comment les manipuler et comment imbriquer la méthode fetch() dans des classes pour la manipulation.
29/03/2023, 16h23
Beginner.

Pour apprendre le JS on peut faire plus simple avec VS Code, l'extension dont je vous ai parlée fonctionne bien et est largement suffisante... Elle est simple à utiliser...

Citation:

Envoyé par Matteo53

Je me suis dis que pour structurer mon code je voulais séparer la conjugaison des verbes dans des modules qui contient des variables avec des structures en JSON puis les importer dans un autre fichier JS et les manipuler dans des classes comme des objet. Pourquoi je n'ai pas fait des fichiers JSON au lieu des modules ? je ne sais pas trop comment les manipuler et comment imbriquer la méthode fetch() dans des classes pour la manipulation.

Ben en fait une fois qu'on récupère le fichier JSON on peut le parser et alors on obtient un objet...
29/03/2023, 16h37
Matteo53

Ah ok il serait plus simple que des modules alors. Il faudrait que je trouve un tutoriel pour importer dans le fichier le JSON pour faire un parse() je vais chercher.

Citation:

Envoyé par Matteo53

Ah ok il serait plus simple que des modules alors. Il faudrait que je trouve un tutoriel pour importer dans le fichier le JSON pour faire un parse() je vais chercher.

En fait c'est assez simple avec fetch, exemple :

fichier auxiliaireModule.json :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 {
     "indicatif": {
         "present": [
             "sono",
             "sei",
             "é",
             "siamo",
             "siete",
             "sono"
         ],
         "imparfait": [
             "ero",
             "eri",
             "era",
             "eravamo,eravate",
             "erano"
         ]
     }
 }

Fichier auxiliaires.js :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
import { etre } from "./modules/auxiliaireModule.js";
console.log(etre);
 
// deuxième méthode avec fetch et fichier json :
 
fetch("./js-css/js/modules/auxiliaireModule.json")
    .then(function(response) {
        return response.json();
    })
    .then(function(data) {
        console.log("etre :", data);
    })

29/03/2023, 17h23
Matteo53
oui merci cela je l'avais fait avec fetch() et ca marche, mais je bloque par la suite quand il faut que je l'intègre à une classe. Est ce que je peux mettre cette partie
Code:

1 2 3 .then(function(data) { console.log("etre :", data); })
dans une variable et manipuler par la suite la variable en dehors de la fonction ? Peut être que c'est un peu complexe pour moi. Merci
29/03/2023, 18h35
Beginner.
Citation:

Envoyé par Matteo53

...dans une variable et manipuler par la suite la variable en dehors de la fonction ? Peut être que c'est un peu complexe pour moi.

Peut-être que le plus simple serait d'utiliser une autre syntaxe (avec await):
Code:

1 2 3 const response = await fetch('./js-css/js/modules/auxiliaireModule.json'); const verbe_etre = await response.json(); console.log("Voici la conjugaison du verbe etre :", verbe_etre);
PS: On peut mettre la conjugaison de plusieurs verbes dans un seul fichier, cela évite de faire une requête pour chaque verbe...
29/03/2023, 18h49
Matteo53

ah oui merci cela est la meilleur solution je pense, et la plus simple pour moi, pas besoin de modules, d'export etc. je vais essayer. Concernant l'erreur au cas ou vous trouvez dites le moi ca me permettra de m'améliorer s'il vous plait. J'ai pourtant cherché longtemps mais aucune solution et rester sur un échec...:?
Concernant votre conseil si je structure bien le JSON(un nouveau défie..) oui j'intégrerai plusieurs verbes.
merci
29/03/2023, 19h00
Beginner.

Citation:

Envoyé par Matteo53

ah oui merci cela est la meilleur solution je pense, et la plus simple pour moi, pas besoin de modules, d'export etc. je vais essayer.

Ben tant mieux...

En fait avec les modules ce n'est pas plus compliqué, on importe un fichier .js avec import (ce qui revient à faire une requête comme avec fetch) et on obtient un objet utilisable...

Cela peut vous avoir semblé compliqué à cause de l'erreur mais une fois l'erreur supprimée cela devrait aller mieux...

Citation:

Envoyé par Matteo53

Concernant l'erreur au cas ou vous trouvez dites le moi ca me permettra de m'améliorer s'il vous plait. J'ai pourtant cherché longtemps mais aucune solution et rester sur un échec...

Oui l'erreur se trouve dans le fichier auxiliaires.html, on a à la ligne 245 ceci :

<script src="./js-css/js/auxiliaires.js"></script>.

Cela charge le fichier auxiliaires.js mais comme ici le type module n'est pas indiqué cela provoque l'erreur :

Uncaught SyntaxError: Cannot use import statement outside a module (at VM293 auxiliaires.js:1:1).

Il faut donc supprimer cette ligne puisque le fichier est correctement chargé à la ligne 15 :

<script type="module" src="./js-css/js/auxiliaires.js"></script>.
29/03/2023, 22h04
Matteo53

Bonsoir,
oui d'habitude je mets la balise <script> en bas et la pour faire un test je l'ai mis dans la balise <head> sans supprimer la première. Merci pour votre aide, vos conseils précieux et le temps consacré. J'aurais du voir la balise en doublon.
bonne soirée