"Error de sintaxis no capturado: no se puede utilizar la declaración de importación fuera de un módulo" al importar ECMAScript 6

Estoy usando ArcGIS JSAPI 4.12 y deseo usar Ilusiones espaciales para dibujar símbolos militares en un mapa.

Cuando agrego milsymbol.jsal script, la consola devuelve un error

SyntaxError no capturado: no se puede usar la declaración de importación fuera de un módulo`

así que agrego type="module"al script y luego vuelve

Error de referencia no capturado: ms no está definido

Aquí está mi código:

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

Entonces, ya sea que agregue type="module"o no, siempre hay errores. Sin embargo, en el documento oficial de Spatial Illusions, no hay ninguno type="module"en el guión. Ahora estoy realmente confundido. ¿Cómo logran que funcione sin agregar el tipo?

Archivo milsymbol.js

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

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

export { ms };

Recibí este error porque olvidé el tipo = "módulo" dentro de la etiqueta del script:

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

Parece que la causa de los errores son:

1) Actualmente está cargando el archivo fuente en el srcdirectorio en lugar del archivo creado en el distdirectorio (puede ver cuál es el archivo distribuido previsto aquí ). Esto significa que usted está utilizando el código fuente nativo en el mismo estado / desagregado, que conducen al error siguiente: Uncaught SyntaxError: Cannot use import statement outside a module. Esto se debe solucionar mediante el uso de la versión incluida ya que el paquete está utilizando el paquete acumulativo para crear un paquete.

2) La razón por la que obtiene el Uncaught ReferenceError: ms is not definederror es porque los módulos tienen un alcance, y dado que está cargando la biblioteca usando módulos nativos, msno está en el alcance global y, por lo tanto, no es accesible en la siguiente etiqueta de script.

Parece que debería poder cargar la distversión de este archivo que se haya msdefinido en el window. Consulte este ejemplo del autor de la biblioteca para ver un ejemplo de cómo se puede hacer esto.

Resolví este problema haciendo lo siguiente:

Cuando use módulos ECMAScript 6 desde el navegador, use la extensión .js en sus archivos y en la etiqueta de script add type = "module".

Cuando use módulos ECMAScript 6 de un entorno Node.js, use la extensión .mjsen sus archivos y use este comando para ejecutar el archivo:

node --experimental-modules filename.mjs

También estaba enfrentando el mismo problema hasta que agregué el tipo = "módulo" al script. Antes era así

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

Y después de cambiarlo a

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

Funciono perfectamente

El error se desencadena porque el archivo al que está vinculando en su archivo HTML es la versión desagregada del archivo. Para obtener la versión completa incluida, deberá instalarla con npm:

npm install --save milsymbol

Esto descarga el paquete completo a su node_modulescarpeta.

Luego puede acceder al archivo JavaScript minificado independiente en node_modules/milsymbol/dist/milsymbol.js

Puede hacer esto en cualquier directorio y luego simplemente copie el archivo a continuación en su /srcdirectorio.

Simplemente agregue .packentre el nombre y la extensión en la <script>etiqueta en src. es decir:

<script src="name.pack.js">
// code here
</script>