“SyntaxError não capturado: não é possível usar a declaração de importação fora de um módulo” ao importar o ECMAScript 6

Estou usando o ArcGIS JSAPI 4.12 e desejo usar Ilusões Espaciais para desenhar símbolos militares em um mapa.

Quando adiciono milsymbol.jsao script, o console retorna erro

SyntaxError não capturado: não é possível usar a instrução de importação fora de um módulo`

então eu adiciono type="module"ao script e ele retorna

Não detectado ReferenceError: ms não está definido

Aqui está o meu 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>

Então, se eu adiciono type="module"ou não, sempre há erros. No entanto, no documento oficial de Spatial Illusions, não há nenhum type="module"no script. Agora estou realmente confuso. Como eles conseguem fazer o trabalho sem adicionar o tipo?

Arquivo milsymbol.js

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

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

export { ms };

Eu recebi esse erro porque esqueci o type = "module" dentro da tag de script:

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

Parece que a causa dos erros é:

1) No momento, você está carregando o arquivo de origem no srcdiretório em vez do arquivo criado no distdiretório (você pode ver qual é o arquivo distribuído pretendido aqui ). Isso significa que você está usando o código-fonte nativa em estado inalterado / desagregado, levando ao seguinte erro: Uncaught SyntaxError: Cannot use import statement outside a module. Isso deve ser corrigido usando a versão empacotada, pois o pacote está usando rollup para criar um pacote configurável.

2) O motivo pelo qual você está recebendo o Uncaught ReferenceError: ms is not definederro é que os módulos têm escopo definido e, como você está carregando a biblioteca usando módulos nativos, msnão está no escopo global e, portanto, não está acessível na seguinte tag de script.

Parece que você deve conseguir carregar a distversão deste arquivo msdefinida no window. Confira este exemplo do autor da biblioteca para ver um exemplo de como isso pode ser feito.

Resolvi esse problema fazendo o seguinte:

Ao usar os módulos ECMAScript 6 no navegador, use a extensão .js em seus arquivos e na tag de script add type = "module".

Ao usar os módulos ECMAScript 6 em um ambiente Node.js., use a extensão .mjsem seus arquivos e use este comando para executar o arquivo:

node --experimental-modules filename.mjs

Eu também estava enfrentando o mesmo problema até adicionar o type = "module" ao script. Antes era assim

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

E depois de mudar para

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

Funcionou perfeitamente

O erro é acionado porque o arquivo ao qual você está vinculando no arquivo HTML é a versão desagrupada do arquivo. Para obter a versão completa do pacote, você deverá instalá-la com npm:

npm install --save milsymbol

Isso baixa o pacote completo para sua node_modulespasta.

Você pode acessar o arquivo JavaScript minificado independente em node_modules/milsymbol/dist/milsymbol.js

Você pode fazer isso em qualquer diretório e, em seguida, basta copiar o arquivo abaixo para o seu /srcdiretório.

Basta adicionar .packentre o nome e a extensão na <script>tag em src. ou seja:

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