“Uncaught SyntaxError: Tidak dapat menggunakan pernyataan impor di luar modul” ketika mengimpor ECMAScript 6

92

Saya menggunakan ArcGIS JSAPI 4.12 dan ingin menggunakan Spatial Illusions untuk menggambar simbol militer di peta.

Ketika saya menambahkan milsymbol.jske skrip, konsol mengembalikan kesalahan

Uncaught SyntaxError: Tidak dapat menggunakan pernyataan impor di luar modul`

jadi saya tambahkan type="module"ke skrip, dan kemudian kembali

ReferenceError yang tidak tertangkap: ms tidak ditentukan

Ini kode saya:

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

Jadi, apakah saya menambah type="module"atau tidak, selalu ada kesalahan. Namun, dalam dokumen resmi Spatial Illusions, tidak ada type="module"dalam skrip ini. Saya sekarang benar-benar bingung. Bagaimana cara mereka membuatnya berfungsi tanpa menambahkan tipe?

File milsymbol.js

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

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

export { ms };
Jerry Chen
sumber
1
Saya mendapatkan kesalahan yang sama ketika mencoba mengimpor modul! Apakah Anda mendapat solusi?
Zeeshan Ahmad Khalil
Saya sekarang menggunakan browserify di mana saya dapat memasukkan modul apa pun dengan menggunakan require(). Lihat video
Zeeshan Ahmad Khalil

Jawaban:

62

Saya mendapatkan kesalahan ini karena saya lupa type = "module" di dalam tag script:

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

Sepertinya penyebab kesalahan adalah:

1) Saat ini Anda sedang memuat file sumber di srcdirektori alih-alih file yang dibangun di distdirektori (Anda dapat melihat apa file yang dimaksud didistribusikan di sini ). Ini berarti bahwa Anda menggunakan kode sumber asli dalam / negara tidak mengikat berubah, mengarah ke kesalahan berikut: Uncaught SyntaxError: Cannot use import statement outside a module. Ini harus diperbaiki dengan menggunakan versi paket karena paket menggunakan rollup untuk membuat bundel.

2) Alasan Anda mendapatkan Uncaught ReferenceError: ms is not definedkesalahan adalah karena modul dicakup, dan karena Anda memuat pustaka menggunakan modul asli, mstidak berada dalam lingkup global dan karenanya tidak dapat diakses dalam tag skrip berikut.

Sepertinya Anda harus dapat memuat distversi file ini untuk msdidefinisikan pada window. Lihat contoh ini dari penulis perpustakaan untuk melihat contoh bagaimana ini bisa dilakukan.

Kai
sumber
Terima kasih atas balasan Anda, sekarang saya tahu saya memiliki file yang salah. Saya sudah mencari versi dist file tetapi tanpa hasil. Apakah Anda tahu cara untuk mendapatkan versi dist? Terima kasih banyak!
Jerry Chen
Ini tersedia untuk diunduh di npm ( npmjs.com/package/milsymbol ). Atau, Anda bisa membangunnya sendiri dengan mengkloning repo dan menjalankan salah satu skrip build. Sepertinya ada skrip build AMD ( github.com/spatialillusions/milsymbol/blob/master/… ) yang seharusnya memungkinkan Anda untuk requiremembuat paket langsung ke dalam kode Anda.
Kai
1
Saya telah mengunduh melalui npm, sekarang saya memiliki skrip:, <script src="node_modules/milsymbol/dist/milsymbol.js"></script>tetapi konsol masih kembali Uncaught ReferenceError: ms is not defined. Masalahnya mstidak didefinisikan dalam dist/milsymbol.js, itu didefinisikan dalam src/milsymbol.js, tetapi membutuhkan type="module"dan akan menyebabkan masalah ruang lingkup. Apakah ada solusi untuk ini? Terima kasih banyak!
Jerry Chen
6

Saya memecahkan masalah ini dengan melakukan hal berikut:

Saat menggunakan modul ECMAScript 6 dari browser, gunakan ekstensi .js di file Anda dan pada tag tambahan type = "module".

Saat menggunakan modul ECMAScript 6 dari lingkungan Node.js, gunakan ekstensi .mjsdalam file Anda dan gunakan perintah ini untuk menjalankan file:

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

Saya juga menghadapi masalah yang sama sampai saya menambahkan type = "module" ke skrip. Sebelumnya seperti ini

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

Dan setelah mengubahnya menjadi

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

Itu bekerja dengan sempurna

Keinginan Kaleba
sumber
2

Kesalahan dipicu karena file yang Anda tautkan dalam file HTML Anda adalah versi file yang tidak diikat. Untuk mendapatkan versi paket lengkap Anda harus menginstalnya dengan npm:

npm install --save milsymbol

Ini mengunduh paket lengkap ke node_modulesfolder Anda .

Anda kemudian dapat mengakses file JavaScript yang diperkecil mandiri di node_modules/milsymbol/dist/milsymbol.js

Anda dapat melakukan ini di direktori mana saja, dan kemudian cukup salin file di bawah ini ke /srcdirektori Anda .

rootr
sumber
0

Cukup tambahkan .packantara nama dan ekstensi di <script>tag di src. yaitu:

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