Script type = module non pris en compte

**BobotamVsKakolapisos** · 20/09/2024, 07h24

Bonjour,

module JavaScript que j'ai crée ne marche pas.
Les 2 fichiers fix.html et dispMod.js sont dans un même répertoire.

fix.html

Code html :

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
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Module JavaScript</title>
</head>
<body>
 
    <script type="module">
		import {display} from './dispMod.js'
		display();
 
    </script>
 
</body>
</html>

dispMod.js

Code :

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

1
2
3
export function display() {
	console.log('Hello world');
}

Bien cordialement et Sincères mercis,
BobotamVsKakolapisos

**gabi7756** · 20/09/2024, 10h03

Bonjour,
Le navigateur utilisé ? Et ca marche pas , y a t-il une erreur ?
Merci

**BobotamVsKakolapisos** · 20/09/2024, 12h48

Re,

J'utilise ce navigateur:
Firefox Browser
130.(64bits)

Voici le message d'erreur:

Blocage d’une requête multiorigine (Cross-Origin Request) : la politique « Same Origin » ne permet pas de consulter la ressource distante située sur file:///C:/Users/user_jmi/Desktop/rac/code/base/dispMod.js. Raison : la requête CORS n’utilise pas HTTP.

L’URI de la source du module n’est pas autorisé dans ce document : « file:///C:/Users/user_jmi/Desktop/rac/code/base/dispMod.js ».

Bien cordialement,

**mathieu** · 20/09/2024, 13h01

les modules ne sont pas autorisés à être chargés avec un accès direct au fichier, il faut passer par un serveur http.
vous pouvez voir les autres différences d'utilisation là :
https://developer.mozilla.org/fr/doc...ssiques_%C2%BB

**BobotamVsKakolapisos** · 20/09/2024, 16h06

Comment tester les modules de javascript ?

Je sais, peut être ils existent de nombreuses méthodes qui sont plus ou moins meilleures ?
Les méthodes proposées ne sont pas toujours évidents pour la compréhension: instal extension unbloc sur navigateur, instal extension live sur vs, mdn, etc.

Je vais expliquer selon ma vision comment j'ai fait pour réussir.

Un module JavaScript ne peut pas être utilisé tout simplement déposant les fichiers .html, .js n'importe où et n'importe comment.

Tu vas rencontrer ce genre de "Erreurs", "Avertissements":
Blocage d’une requête multiorigine (Cross-Origin Request) : la politique « Same Origin » ne permet pas de consulter la ressource distante située sur file:///C:/Users/user_superX/Desktop/rac/code/base/dispMod.js. Raison : la requête CORS n’utilise pas HTTP.

L’URI de la source du module n’est pas autorisé dans ce document : « file:///C:/Users/user_jmi/Desktop/rac/code/base/dispMod.js ».

Je sais ce n'est ni amusant, ni très beau.

1. Il faut installer un server local.
Pour mon windows, j'ai choisi de télécharger et installer le server local XAMPP (XAMPP est une solution tout-en-un qui inclut Apache (serveur web), MySQL/MariaDB (base de données), PHP et Perl, PhpMyadmin, etc.)

2. Déposez vos fichiers, .html et .js contenant les modules dans le reperetoire:
C:\xampp\htdocs
Comme pour mon cas d'exemple ici:
fix.html
dispMod.js

3. Ouvrez le panneau de contrôle de XAMPP et cliquez sur **Start** à côté d’Apache (le serveur web).

4. Executez, dans votre navigateur (pour mon cas, je l'ai fait sur mon "Firefox Browser")
https://localhost/fix.html

5. Et, Boum badaboum ! Congrats ! Ca marche. Vive les tests sur les modules js, les recherhes approfondies sur les import, export, import { default as .., export default .., etc.

6. Si, vous voulez éviter les encombrements, les désordres et les anarchies en tout genre.
Je vous recommande vivement de créer un reperetoire propre à vous dans C:\xampp\htdocs.
Comme pour mon cas, j'ai crée le reperetoire: Dossier1

Du coup, j'ai éxécuté dans mon Firefox Browser https://localhost/Dossier1/fix.html.

7. Une fois, que vous avez fini tous vos tests, vous pouvez aussi arrêter votre server Apache (server web local) XAMPP.

J'espère que j'ai rien oublié et que j'ai tout bien détaillé les étapes.
Bonne compréhension.

Bien cordialement et sincères mercis

**gabi7756** · 20/09/2024, 16h10

Je présume qu'au vu de la synthèse personnelle que tu viens de faire tu as réussi à faire ce que tu voulais faire de base
Donc n'oublie pas de mettre la discussion en résolu si cela est approprié
Belle journée
Gabi

Script type = module non pris en compte

JavaScript

Vue hybride

Discussions similaires

Partager

Partager