ฉันไม่สามารถแก้ไขปัญหา Uncaught SyntaxError: ไม่สามารถใช้คำสั่งนำเข้านอกโมดูลได้ [ซ้ำกัน]

ฉันมีไฟล์ "สาม" ในโฟลเดอร์เดียว 1. index.html 2. index.js 3. helper.js

ฉันต้องการส่งออกโค้ดจาก helper.js และนำเข้าโค้ดไปที่ index.js (ฉันได้เชื่อมโยง index.js ถึง index.html แล้ว)

ฉันชอบ 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')
})

และสุดท้ายคือ helper.js

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

จากนั้นฉันก็เรียกใช้ไฟล์ index.html ในเบราว์เซอร์ Chrome

เบราว์เซอร์ Chrome ที่แสดงข้อความนี้ในคอนโซล

Uncaught SyntaxError: ไม่สามารถใช้คำสั่งนำเข้าภายนอกโมดูลได้

โปรดบอกฉันจะแก้ไขปัญหานั้นได้อย่างไร ฉันค้นหาใน Google และ YouTube ฉันทำสิ่งเดียวกันกับที่พวกเขาแสดง เป็นผลให้เบราว์เซอร์แสดงการนวดนั้น


javascript ecmascript-6
person SA Noyon Ahmed    schedule 02.10.2019    source แหล่งที่มา

คำตอบ (2)


arrow_upward
4
arrow_downward

คุณต้องรวมการนำเข้าของคุณไว้ในโมดูล:

ลองสิ่งนี้:

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

ข้อมูลอ้างอิง: โมดูล ES ในเบราว์เซอร์

person Guilherme Martin    schedule 02.10.2019
comment
ฉันลอง type=module แต่แสดงข้อผิดพลาด การเข้าถึงสคริปต์ที่ 'file:///D:/testing/index.js' จากต้นกำเนิด 'null' ถูกบล็อกโดยนโยบาย CORS: คำขอข้ามต้นทางได้รับการสนับสนุนสำหรับรูปแบบโปรโตคอลเท่านั้น: http, ข้อมูล, chrome, chrome-extension, https - person SA Noyon Ahmed; 02.10.2019
comment
ตอนนี้มันเป็นข้อผิดพลาดอื่น คุณกำลังพยายามเข้าถึงสคริปต์โดยไม่มีที่มา เบราว์เซอร์เช่น Chrome ไม่อนุญาตให้คุณเข้าถึงไฟล์บนระบบไฟล์ในเครื่องด้วย JavaScript คุณต้องติดตั้งเว็บเซิร์ฟเวอร์เช่น LiveServer - person Guilherme Martin; 02.10.2019
comment
ฉันจะไม่ทำอย่างนั้นสิ่งที่คุณบอก ฉันต้องการแก้ไขตามปกติโดยไม่มีเอฟเฟกต์ใน index.html - person SA Noyon Ahmed; 02.10.2019
comment
stackoverflow.com/questions/8456538/ - person Guilherme Martin; 02.10.2019
comment
คำตอบของคุณทำให้สับสน - person SA Noyon Ahmed; 02.10.2019
comment
นอกโมดูล หมายความว่าอย่างไร - person SA Noyon Ahmed; 02.10.2019

arrow_upward
0
arrow_downward

คุณจะต้องให้บริการไฟล์ของคุณด้วยเว็บเซิร์ฟเวอร์บนพอร์ตบางพอร์ต เช่น 5500 จากนั้นชี้เบราว์เซอร์ของคุณไปที่พอร์ตนั้น เช่น localhost:5500/

นี่จะเป็นวิธีเดียวที่เบราว์เซอร์จะนำเข้าโมดูลอื่นๆ จากไฟล์ js อื่น

ดู... MDN Doc บนโมดูล

  • คุณสามารถใช้แพ็คเกจ http-server ของ npm
  • หรือส่วนขยาย Live Server หากคุณใช้ Visual Studio Code
  • หรือเซิร์ฟเวอร์อื่น ๆ ที่คุณต้องการที่จะทำงานบนระบบของคุณ

ถัดไป คุณจะต้องเพิ่ม type="module" ให้กับแท็กสคริปต์ของคุณ

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


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

และ index.js ของคุณลองสิ่งนี้...

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

สุดท้าย helper.js ของคุณ ....

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

export { btn };

คุณอาจคิดถึงการใช้ส่วนขยาย .mjs กับไฟล์ js ที่เป็นโมดูล เพื่อให้ทุกคนรู้ว่ามันเป็นโมดูลจริงๆ

person Nick Sugar    schedule 02.10.2019
comment
ในที่สุดฉันก็แก้ไขปัญหาได้..ปัญหาของฉันอยู่ในไฟล์ .babelrc...โอเค ขอบคุณ - person SA Noyon Ahmed; 02.10.2019
comment
ดี :) มีปัญหาอะไรในไฟล์ .babelrc อาจช่วยให้ผู้อื่นแก้ไขคำถามเดิมของคุณด้วยวิธีแก้ปัญหาของคุณที่ด้านล่าง ขอให้มีความสุขในการเขียนโค้ด! - person Nick Sugar; 02.10.2019