Saya tidak dapat memperbaiki masalah Uncaught SyntaxError: Cannot use import statement outside a module [duplikat]

Saya memiliki "tiga" file dalam satu folder 1. index.html 2. index.js 3. helper.js

Saya ingin mengekspor kode dari helper.js dan mengimpor kode ke index.js (Saya sudah menghubungkan index.js ke index.html).

Saya menyukainya index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <button id="btn">click</button>


    <script src="./index.js"></script>
</body>
</html>

index.js

import btn from './helper'

btn.addEventListener('click', function () {
    window.alert('i am clicked')
})

dan terakhir helper.js

export let btn = document.getElementById('btn')

Lalu saya menjalankan file index.html di browser chrome.

Browser Chrome menampilkan pesan ini di konsol.

Kesalahan Sintaks Tidak Tertangkap: Tidak dapat menggunakan pernyataan import di luar modul

Tolong beri tahu bagaimana saya bisa mengatasi masalah itu. Saya mencari di google dan youtube, saya melakukan hal yang sama dengan yang mereka tunjukkan. Hasilnya, browser menampilkan pijatan itu.


javascript ecmascript-6
person SA Noyon Ahmed    schedule 02.10.2019    source sumber

Jawaban (2)


arrow_upward
4
arrow_downward

Anda perlu memasukkan impor Anda ke dalam modul:

Coba ini:

<script type="module">
   import btn from './helper'
</script>

Referensi: Modul ES di Browser

person Guilherme Martin    schedule 02.10.2019
comment
Saya mencoba type=module tetapi muncul kesalahan Akses ke skrip di 'file:///D:/testing/index.js' dari asal 'null' telah diblokir oleh kebijakan CORS: Permintaan lintas asal hanya didukung untuk skema protokol: http, data, chrome, chrome-extension, https. - person SA Noyon Ahmed; 02.10.2019
comment
Sekarang kesalahan lainnya. Anda mencoba mengakses skrip tanpa asal. Browser seperti chrome tidak mengizinkan Anda mengakses file di sistem file lokal dengan JavaScript. Anda perlu menginstal server web seperti LiveServer. - person Guilherme Martin; 02.10.2019
comment
saya tidak akan melakukannya seperti itu, apa yang Anda katakan. Saya ingin menyelesaikannya secara normal tanpa melakukan efek di index.html - person SA Noyon Ahmed; 02.10.2019
comment
stackoverflow.com/questions/8456538/ - person Guilherme Martin; 02.10.2019
comment
jawabanmu membingungkan - person SA Noyon Ahmed; 02.10.2019
comment
apa yang mereka maksud dengan di luar modul? - person SA Noyon Ahmed; 02.10.2019

arrow_upward
0
arrow_downward

Anda perlu menyajikan file Anda dengan server web pada beberapa port, katakanlah 5500. Kemudian arahkan browser Anda ke port tersebut yaitu localhost:5500/

Ini akan menjadi satu-satunya cara browser mengimpor modul lain dari file js lain.

Lihat... Dokumen MDN tentang Modul

  • Anda dapat menggunakan paket npm http-server.
  • Atau ekstensi Live Server jika Anda menggunakan Visual Studio Code.
  • Atau server lain yang Anda sukai yang akan berfungsi di sistem Anda.

Selanjutnya Anda perlu menambahkan type="module" ke tag skrip Anda.

<button id="btn">click</button>


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

Dan index.js Anda coba ini...

import { btn } from './helper.js'

Terakhir helper.js Anda ....

const btn = document.getElementById('btn');

export { btn };

Anda mungkin juga berpikir untuk menggunakan ekstensi .mjs pada file js yang merupakan modul. Untuk memberi tahu semua orang bahwa itu memang sebuah modul.

person Nick Sugar    schedule 02.10.2019
comment
akhirnya saya menyelesaikan masalah saya..masalah saya ada di file .babelrc...ok terima kasih - person SA Noyon Ahmed; 02.10.2019
comment
Bagus :) Apa masalahnya pada file .babelrc? Mungkin membantu orang lain untuk mengedit pertanyaan awal Anda dengan solusi Anda di bagian bawah. Selamat membuat kode! - person Nick Sugar; 02.10.2019