“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


92

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

11
Estou recebendo o mesmo erro ao tentar importar um módulo! Você tem alguma solução?
Zeeshan Ahmad Khalil

Agora estou usando o browserify através do qual posso incluir qualquer módulo usando require(). Confira este vídeo
Zeeshan Ahmad Khalil

Respostas:


62

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>

51

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.


Obrigado pela sua resposta, agora sei que tenho o arquivo errado. Eu estive procurando a versão dist do arquivo, mas sem resultado. Você conhece alguma maneira de obter a versão dist? Muito obrigado!
Jerry Chen

Está disponível para download no npm ( npmjs.com/package/milsymbol ). Como alternativa, você pode construí-lo clonando o repositório e executando um dos scripts de compilação. Parece que há um script de construção da AMD ( github.com/spatialillusions/milsymbol/blob/master/… ) que deve permitir requireo pacote incorporado diretamente no seu código.
Kai #

11
Eu baixei pelo npm, agora tenho o script:, <script src="node_modules/milsymbol/dist/milsymbol.js"></script>mas o console ainda retorna Uncaught ReferenceError: ms is not defined. O problema msnão está definido no dist/milsymbol.js, está definido no src/milsymbol.js, mas requer type="module"e causará um problema de escopo. Existe alguma solução para isso. Muito obrigado!
Jerry Chen

6

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

5

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


2

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.



0

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

<script src="name.pack.js">
// code here
</script>
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.