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

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

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>

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.

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

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é

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.

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>