«SyntaxError non capturée: impossible d'utiliser l'instruction d'importation en dehors d'un module» lors de l'importation d'ECMAScript 6


92

J'utilise ArcGIS JSAPI 4.12 et je souhaite utiliser des illusions spatiales pour dessiner des symboles militaires sur une carte.

Lorsque j'ajoute milsymbol.jsau script, la console renvoie une erreur

SyntaxError non capturée: impossible d'utiliser l'instruction d'importation en dehors d'un module`

donc j'ajoute type="module"au script, puis il revient

Uncaught ReferenceError: ms n'est pas défini

Voici mon code:

<link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/css/main.css">
<script src="https://js.arcgis.com/4.12/"></script>
<script type="module" src="milsymbol-2.0.0/src/milsymbol.js"></script>

<script>
    require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/MapImageLayer",
        "esri/layers/FeatureLayer"
    ], function (Map, MapView, MapImageLayer, FeatureLayer) {

        var symbol = new ms.Symbol("SFG-UCI----D", { size: 30 }).asCanvas(3);
        var map = new Map({
            basemap: "topo-vector"
        });

        var view = new MapView({
            container: "viewDiv",
            map: map,
            center: [121, 23],
            zoom: 7
        });
    });
</script>

Donc, que j'ajoute type="module"ou non, il y a toujours des erreurs. Cependant, dans le document officiel de Spatial Illusions, il n'y en a pas type="module"dans le script. Je suis maintenant vraiment confus. Comment parviennent-ils à le faire fonctionner sans ajouter le type?

Fichier milsymbol.js

import { ms } from "./ms.js";

import Symbol from "./ms/symbol.js";
ms.Symbol = Symbol;

export { ms };

1
J'obtiens la même erreur en essayant d'importer un module! Avez-vous une solution?
Zeeshan Ahmad Khalil

J'utilise maintenant browserify à travers lequel je peux inclure n'importe quel module en utilisant require(). Découvrez cette vidéo
Zeeshan Ahmad Khalil

Réponses:


62

J'ai eu cette erreur car j'ai oublié le type = "module" à l'intérieur de la balise de script:

<script type="module" src="milsymbol-2.0.0/src/milsymbol.js"></script>

51

Il semble que la cause des erreurs soit:

1) Vous chargez actuellement le fichier source dans le srcrépertoire au lieu du fichier construit dans le distrépertoire (vous pouvez voir quel est le fichier distribué prévu ici ). Cela signifie que vous utilisez le code source natif dans un état / dégroupé, conduisant à l'erreur suivante: Uncaught SyntaxError: Cannot use import statement outside a module. Cela devrait être résolu en utilisant la version fournie car le package utilise le cumul pour créer un ensemble.

2) La raison pour laquelle vous obtenez l' Uncaught ReferenceError: ms is not definederreur est que les modules sont limités et que vous chargez la bibliothèque à l'aide de modules natifs, msn'est pas dans la portée globale et n'est donc pas accessible dans la balise de script suivante.

Il semble que vous devriez pouvoir charger la distversion de ce fichier à msdéfinir sur le window. Consultez cet exemple de l'auteur de la bibliothèque pour voir un exemple de la façon dont cela peut être fait.


Merci pour votre réponse, maintenant je sais que j'ai le mauvais fichier. Je cherchais la version dist du fichier mais sans résultat. Connaissez-vous un moyen d'obtenir la version dist? Merci beaucoup!
Jerry Chen

Il est disponible en téléchargement sur npm ( npmjs.com/package/milsymbol ). Vous pouvez également le créer vous-même en clonant le dépôt et en exécutant l'un des scripts de génération. Il semble qu'il y ait un script de construction AMD ( github.com/spatialillusions/milsymbol/blob/master/… ) qui devrait vous permettre d' accéderrequire directement au package intégré dans votre code.
Kai

1
J'ai téléchargé via npm, j'ai maintenant le script:, <script src="node_modules/milsymbol/dist/milsymbol.js"></script>mais la console revient toujours Uncaught ReferenceError: ms is not defined. Le problème n'est mspas défini dans le dist/milsymbol.js, il est défini dans src/milsymbol.js, mais il nécessite type="module"et entraînera un problème de portée. Existe-t-il une solution à ça. Merci beaucoup!
Jerry Chen

7

J'ai résolu ce problème en procédant comme suit:

Lorsque vous utilisez les modules ECMAScript 6 à partir du navigateur, utilisez l'extension .js dans vos fichiers et dans la balise de script add type = "module".

Lorsque vous utilisez des modules ECMAScript 6 à partir d'un environnement Node.js, utilisez l'extension .mjsdans vos fichiers et utilisez cette commande pour exécuter le fichier:

node --experimental-modules filename.mjs

5

J'étais également confronté au même problème jusqu'à ce que j'ajoute le type = "module" au script. Avant c'était comme ça

<script src="../src/main.js"></script>

Et après l'avoir changé en

<script type="module" src="../src/main.js"></script>

Cela a parfaitement fonctionné


2

L'erreur est déclenchée car le fichier auquel vous créez un lien dans votre fichier HTML est la version dégroupée du fichier. Pour obtenir la version complète fournie, vous devrez l'installer avec npm:

npm install --save milsymbol

Cela télécharge le package complet dans votre node_modulesdossier.

Vous pouvez ensuite accéder au fichier JavaScript minifié autonome à l'adresse node_modules/milsymbol/dist/milsymbol.js

Vous pouvez le faire dans n'importe quel répertoire, puis copiez simplement le fichier ci-dessous dans votre /srcrépertoire.



0

Ajoutez simplement .packentre le nom et l'extension dans la <script>balise dans src. c'est à dire:

<script src="name.pack.js">
// code here
</script>
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.