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


92

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

1
¡Recibo el mismo error al intentar importar un módulo! ¿Tienes alguna solución?
Zeeshan Ahmad Khalil

Ahora estoy usando browserify a través del cual puedo incluir cualquier módulo usando require(). Mira este video
Zeeshan Ahmad Khalil

Respuestas:


62

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>

51

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.


Gracias por su respuesta, ahora sé que tengo el archivo incorrecto. He estado buscando la versión dist del archivo pero sin resultado. ¿Conoces alguna forma de obtener la versión dist? ¡Muchas gracias!
Jerry Chen el

Está disponible para descargar en npm ( npmjs.com/package/milsymbol ). Alternativamente, puede construirlo usted mismo clonando el repositorio y ejecutando uno de los scripts de construcción. Parece que hay un script de compilación de AMD ( github.com/spatialillusions/milsymbol/blob/master/… ) que debería permitirle requireel paquete integrado directamente en su código.
Kai

1
Lo descargué a través de npm, ahora tengo script: <script src="node_modules/milsymbol/dist/milsymbol.js"></script>pero la consola aún regresa Uncaught ReferenceError: ms is not defined. El problema msno está definido en dist/milsymbol.js, está definido en src/milsymbol.js, pero requiere type="module"y causará problemas de alcance. Hay alguna solución para esto. ¡Muchas gracias!
Jerry Chen el

7

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

5

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


2

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.



0

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>
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.