„Nieprzechwycony błąd składni: nie można użyć instrukcji importu poza modułem” podczas importowania ECMAScript 6

92

Używam ArcGIS JSAPI 4.12 i chcę używać Iluzji Przestrzennych do rysowania symboli wojskowych na mapie.

Gdy dodam milsymbol.jsdo skryptu, konsola zwraca błąd

Uncaught SyntaxError: Nie można użyć instrukcji importu poza modułem`

więc dodaję type="module"do skryptu, a następnie wraca

Uncaught ReferenceError: ms nie jest zdefiniowany

Oto mój kod:

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

Tak więc, niezależnie od tego, czy dodam, type="module"czy nie, zawsze występują błędy. Jednak w oficjalnym dokumencie Spatial Illusions nie ma type="module"takiego skryptu. Jestem teraz bardzo zmieszany. Jak udaje im się, aby działało bez dodawania typu?

Plik milsymbol.js

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

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

export { ms };
Jerry Chen
źródło
1
Otrzymuję ten sam błąd podczas próby zaimportowania modułu! Czy masz jakieś rozwiązanie?
Zeeshan Ahmad Khalil
Teraz używam przeglądarki, dzięki której mogę dołączyć dowolny moduł za pomocą require(). Sprawdź to wideo
Zeeshan Ahmad Khalil

Odpowiedzi:

62

Wystąpił ten błąd, ponieważ zapomniałem typu = "moduł" wewnątrz tagu skryptu:

<script type="module" src="milsymbol-2.0.0/src/milsymbol.js"></script>
Emmanuel
źródło
51

Wygląda na to, że przyczyną błędów są:

1) Aktualnie ładuje plik źródłowy w srckatalogu zamiast wbudowanego pliku w distkatalogu (można zobaczyć, co zamierzone rozprowadzane plik jest tutaj ). Oznacza to, że używasz kodu źródłowego natywną w niezmienionej / Stan uwolniony, co prowadzi do następującego błędu: Uncaught SyntaxError: Cannot use import statement outside a module. Należy to naprawić za pomocą wersji pakietowej, ponieważ pakiet używa pakietu zbiorczego do utworzenia pakietu.

2) Przyczyną Uncaught ReferenceError: ms is not definedbłędu jest to, że moduły mają zasięg, a ponieważ ładujesz bibliotekę przy użyciu modułów rodzimych, msnie ma ona zasięgu globalnego i dlatego nie jest dostępna w następującym znaczniku skryptu.

Wygląda na to, że powinieneś być w stanie załadować distwersję tego pliku, która została mszdefiniowana w window. Sprawdź ten przykład od autora biblioteki, aby zobaczyć przykład tego, jak można to zrobić.

Kai
źródło
Dziękuję za odpowiedź, teraz wiem, że mam zły plik. Szukałem wersji dist pliku, ale bez rezultatu. Czy znasz jakiś sposób na uzyskanie wersji dist? Dzięki wielkie!
Jerry Chen
Jest dostępny do pobrania na npm ( npmjs.com/package/milsymbol ). Możesz też zbudować go samodzielnie, klonując repozytorium i uruchamiając jeden ze skryptów kompilacji. Wygląda na to, że istnieje skrypt kompilacji AMD ( github.com/spatialillusions/milsymbol/blob/master/… ), który powinien pozwolić ci requirena wbudowany pakiet bezpośrednio w kodzie.
Kai
1
Pobrałem przez npm, teraz mam skrypt:, <script src="node_modules/milsymbol/dist/milsymbol.js"></script>ale konsola wciąż powraca Uncaught ReferenceError: ms is not defined. Problem msnie jest zdefiniowany w dist/milsymbol.js, jest zdefiniowany w src/milsymbol.js, ale wymaga type="module"i spowoduje problem z zakresem. Czy jest na to jakieś rozwiązanie. Dzięki wielkie!
Jerry Chen
5

Rozwiązałem ten problem, wykonując następujące czynności:

Jeśli korzystasz z modułów ECMAScript 6 z przeglądarki, użyj rozszerzenia .js w swoich plikach i dodaj znacznik skryptu type = "module".

Korzystając z modułów ECMAScript 6 ze środowiska Node.js, użyj rozszerzenia .mjsw swoich plikach i użyj tego polecenia, aby uruchomić plik:

node --experimental-modules filename.mjs
Anurag Phadnis
źródło
5

Miałem również ten sam problem, dopóki nie dodałem do skryptu type = "module". Wcześniej tak było

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

I po zmianie na

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

Działa idealnie

Desire Kaleba
źródło
1

Błąd jest wyzwalany, ponieważ plik, do którego prowadzi łącze w pliku HTML, jest rozpakowaną wersją pliku. Aby uzyskać pełną wersję pakietu, musisz ją zainstalować z npm:

npm install --save milsymbol

Spowoduje to pobranie pełnego pakietu do Twojego node_modulesfolderu.

Następnie możesz uzyskać dostęp do samodzielnego zminimalizowanego pliku JavaScript pod adresem node_modules/milsymbol/dist/milsymbol.js

Możesz to zrobić w dowolnym katalogu, a następnie po prostu skopiować poniższy plik do swojego /srckatalogu.

rootr
źródło
0

Wystarczy dodać .packnazwę i rozszerzenie w <script>znaczniku w src. to znaczy:

<script src="name.pack.js">
// code here
</script>
Devesh Shirsath
źródło