Modules ES6 dans le navigateur : Erreur de Syntaxe Non Rattrapée : Importation de jeton inattendue

Question

Modules ES6 dans le navigateur : Erreur de Syntaxe Non Rattrapée : Importation de jeton inattendue

Demandé el 18 de Janvier, 2017: Quand la question a-t-elle été
63017 affichage: Nombre de visites la question a
4 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Je suis nouveau dans ES6 (ECMAScript 6), et j'aimerais utiliser sa fonction système de modules dans le navigateur. J'ai lu que ES6 est supporté par Firefox et Chrome, mais j'obtiens l'erreur suivante en utilisant export

Uncaught SyntaxError: Unexpected token import

J'ai un fichier test.html

<html>
    <script src="test.js"></script>
<body>
</body>
</html>

et un fichier test.js

'use strict';

class Test {

    static hello() {
        console.log("hello world");
    } 
}

export Test;

Pourquoi ?

Demandé el 18 de Janvier, 2017 par cdarwin

0 votes

ES6 modules ne sont pas encore pris en charge par le navigateur. De plus, vous chargez toujours un script, pas un module.

Commenté el 18 de Janvier, 2017 par Bergi

3 votes

Je ne comprends toujours pas la différence entre un script et un module.

Commenté el 18 de Janvier, 2017 par cdarwin

0 votes

Voir aquí

Commenté el 18 de Janvier, 2017 par Bergi

Afficher 2 autres commentaires

Answer 1

4 Réponses

Answer 2

72voto

vullnetyy Points 570

De nombreux navigateurs modernes prennent désormais en charge les modules ES6. Tant que vous importez vos scripts (y compris le point d'entrée de votre application) à l'aide de <script type="module" src="..."> ça va marcher.

Jetez un coup d'œil à caniuse.com pour plus de détails : https://caniuse.com/#feat=es6-module

Répondu el 2 de Décembre, 2018 par vullnetyy (570 Points )

Answer 3

53voto

Roopesh Reddy Points 576

Vous pouvez essayer les modules ES6 dans Google Chrome Beta (61) / Chrome Canary.

Implémentation de référence de ToDo MVC par Paul Irish - https://paulirish.github.io/es-modules-todomvc/

J'ai une démo de base -

//app.js
import {sum} from './calc.js'

console.log(sum(2,3));

//calc.js
let sum = (a,b) => { return a + b; }

export {sum};

<html> 
    <head>
        <meta charset="utf-8" />
    </head>

    <body>
        <h1>ES6</h1>
        <script src="app.js" type="module"></script>
    </body>

</html>

J'espère que cela vous aidera !

Répondu el 17 de Août, 2017 par Roopesh Reddy (576 Points )

34 votes

C'est vrai... La partie importante que j'ai remarquée est <script type="module"></script> Assurez-vous de l'ajouter, sinon vous obtiendrez cette erreur. Je me tapais la tête contre le mur continuellement en faisant <script>import ... </script> sachant que chrome est maintenant censé supporter les modules ES6 sans drapeaux, j'ai alors remarqué que l'attribut type était nécessaire pour spécifier au navigateur qu'il s'agit d'un module ES6.

Commenté el 13 de Septembre, 2017 par user1673161

1 votes

{ "message" : "Uncaught SyntaxError : Unxpected token {", "filename" : " stacksnippets.net/js ", "lineno" : 24, "colno" : 8 }

Commenté el 2 de Juillet, 2018 par hoogw

4 votes

J'ai obtenu l'erreur ci-dessus en exécutant votre extrait de code ci-dessus, en utilisant chrome v67, pourquoi ?

Commenté el 2 de Juillet, 2018 par hoogw

Afficher 3 autres commentaires

Answer 4

25voto

t3h2mas Points 668

Malheureusement, les modules ne sont pas pris en charge par de nombreux navigateurs à l'heure actuelle.

Cette fonctionnalité commence tout juste à être mise en œuvre dans les navigateurs de manière native à l'heure actuelle. Elle est mise en œuvre dans de nombreux transpilers, tels que TypeScript et Babel, et dans des bundlers tels que Rollup et Webpack.

Trouvé sur MDN

Répondu el 18 de Janvier, 2017 par t3h2mas (668 Points )

0 votes

J'ai lu que cette fonctionnalité a été implémentée dans une question Sof, mais la sourceMDN est en fait plus fiable.

Commenté el 18 de Janvier, 2017 par cdarwin

1 votes

Selon le lien suivant, Chrome 61 devrait prendre en charge l'importation - ce n'est pas le cas. medium.com/dev-channel/

Commenté el 19 de Septembre, 2017 par Marc

4 votes

Vous devez ajouter type="module" à votre balise script.

Commenté el 22 de Juillet, 2018 par smohadjer

Answer 5

12voto

abernier Points 4115

Ça a marché pour moi en ajoutant type="module" au script import de mes mjs :

<script type="module">
import * as module from 'https://rawgit.com/abernier/7ce9df53ac9ec00419634ca3f9e3f772/raw/eec68248454e1343e111f464e666afd722a65fe2/mymod.mjs'

console.log(module.default()) // Prints: Hi from the default export!
</script>

Voir la démo : https://codepen.io/abernier/pen/wExQaa

Répondu el 21 de Septembre, 2018 par abernier (4115 Points )

Modules ES6 dans le navigateur : Erreur de Syntaxe Non Rattrapée : Importation de jeton inattendue

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Modules ES6 dans le navigateur : Erreur de Syntaxe Non Rattrapée : Importation de jeton inattendue

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: