Discussion :

[Matteo53]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

auxiliaires.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

page HTML

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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

[Matteo53]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

mais meme résultat.
merci

[Beginner.]

Quelle est l'erreur renvoyée ?

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<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 :

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

auxiliaires.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Matteo53]

j'ai fait plusieurs essaie et bougé les fichiers 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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

mon fichier HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<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

[Beginner.]

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 :

[Matteo53]

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.

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

[Beginner.]

... 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 :



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...

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

[Matteo53]

Bonjour,
voici la structure de mon projet


Dans la page auxiliaires.js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Dans ma page auxiliaires.html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Beginner.]

voici la structure de mon projet

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

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...

[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.

[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...

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...

[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.

[Beginner.]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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);
    })

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Beginner.]

...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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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...

[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

[Beginner.]

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...

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>.

[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