"Nicht erfasster SyntaxError: Importanweisung kann nicht außerhalb eines Moduls verwendet werden" beim Importieren von ECMAScript 6

92

Ich verwende ArcGIS JSAPI 4.12 und möchte Spatial Illusions verwenden, um militärische Symbole auf einer Karte zu zeichnen.

Wenn ich milsymbol.jszum Skript hinzufüge , gibt die Konsole einen Fehler zurück

Nicht erfasster SyntaxError: Importanweisung kann nicht außerhalb eines Moduls verwendet werden`

Also füge ich type="module"dem Skript hinzu und dann kehrt es zurück

Nicht erfasster ReferenceError: ms ist nicht definiert

Hier ist mein Code:

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

Egal ob ich hinzufüge type="module"oder nicht, es gibt immer Fehler. Im offiziellen Dokument von Spatial Illusions ist jedoch nichts type="module"im Skript enthalten. Ich bin jetzt wirklich verwirrt. Wie schaffen sie es, dass es funktioniert, ohne den Typ hinzuzufügen?

Datei milsymbol.js

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

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

export { ms };
Jerry Chen
quelle
1
Beim Versuch, ein Modul zu importieren, wird der gleiche Fehler angezeigt! Bekommst du eine Lösung?
Zeeshan Ahmad Khalil
Ich benutze jetzt browserify, über das ich jedes Modul mit einbinden kann require(). Schauen Sie sich dieses Video an
Zeeshan Ahmad Khalil

Antworten:

62

Ich habe diesen Fehler erhalten, weil ich den Typ = "Modul" im Skript-Tag vergessen habe:

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

Es sieht so aus, als ob die Ursache der Fehler folgende sind:

1) Sie sind zur Zeit die Quelldatei in dem Laden srcVerzeichnis anstelle der integrierten Datei im distVerzeichnis (können Sie sehen , was die verteilte Datei bestimmt ist hier ). Dies bedeutet, dass Sie den nativen Quellcode in einem unveränderten / entbündelten Zustand verwenden, was zu folgendem Fehler führt : Uncaught SyntaxError: Cannot use import statement outside a module. Dies sollte mithilfe der mitgelieferten Version behoben werden, da das Paket Rollup zum Erstellen eines Bundles verwendet.

2) Der Grund, warum Sie den Uncaught ReferenceError: ms is not definedFehler erhalten, ist, dass Module einen Gültigkeitsbereich haben und dass das Laden der Bibliothek mit nativen Modulen msnicht im globalen Bereich liegt und daher im folgenden Skript-Tag nicht verfügbar ist.

Es sieht so aus, als ob Sie in der Lage sein sollten, die distVersion dieser Datei zu laden, die auf der Website msdefiniert wurde window. Schauen Sie sich dieses Beispiel des Bibliotheksautors an, um ein Beispiel zu sehen, wie dies getan werden kann.

Kai
quelle
Vielen Dank für Ihre Antwort. Jetzt weiß ich, dass ich die falsche Datei habe. Ich habe nach der dist-Version der Datei gesucht, aber ohne Ergebnis. Kennen Sie eine Möglichkeit, die dist-Version zu erhalten? Vielen Dank!
Jerry Chen
Es kann auf npm heruntergeladen werden ( npmjs.com/package/milsymbol ). Alternativ können Sie es selbst erstellen, indem Sie das Repo klonen und eines der Build-Skripte ausführen. Es sieht so aus, als gäbe es ein AMD-Build-Skript ( github.com/spatialillusions/milsymbol/blob/master/… ), mit dem Sie requiredas erstellte Paket direkt in Ihren Code integrieren können.
Kai
1
Ich habe über npm heruntergeladen, jetzt habe ich Skript: <script src="node_modules/milsymbol/dist/milsymbol.js"></script>aber die Konsole kehrt immer noch zurück Uncaught ReferenceError: ms is not defined. Das Problem ist msnicht in definiert dist/milsymbol.js, es ist in definiert src/milsymbol.js, aber es erfordert type="module"und verursacht ein Bereichsproblem. Gibt es dafür eine Lösung? Vielen Dank!
Jerry Chen
6

Ich habe dieses Problem folgendermaßen gelöst:

Wenn ECMAScript 6 Module aus dem Browser, verwenden Sie die Erweiterung .js in Dateien und im Script - Tag Add type = "module".

Wenn Sie ECMAScript 6-Module aus einer Node.js-Umgebung verwenden, verwenden Sie die Erweiterung .mjsin Ihren Dateien und verwenden Sie diesen Befehl, um die Datei auszuführen:

node --experimental-modules filename.mjs
Anurag Phadnis
quelle
5

Ich hatte auch das gleiche Problem, bis ich dem Skript den Typ = "Modul" hinzufügte. Vorher war es so

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

Und nachdem ich es geändert habe

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

Es hat perfekt funktioniert

Wunsch Kaleba
quelle
1

Der Fehler wird ausgelöst, weil die Datei, mit der Sie in Ihrer HTML-Datei verknüpfen, die entbündelte Version der Datei ist. Um die gebündelte Vollversion zu erhalten, müssen Sie sie installieren mit npm:

npm install --save milsymbol

Dadurch wird das vollständige Paket in Ihren node_modulesOrdner heruntergeladen .

Sie können dann unter auf die eigenständige minimierte JavaScript-Datei zugreifen node_modules/milsymbol/dist/milsymbol.js

Sie können dies in einem beliebigen Verzeichnis tun und dann einfach die folgende Datei in Ihr /srcVerzeichnis kopieren .

rootr
quelle
0

Fügen Sie einfach .packzwischen dem Namen und der Erweiterung im <script>Tag in src hinzu. dh:

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