普段はReactNativeで開発を行っていて、Udemy教材をリファクタリングしたりTypeScriptにしてみたり（これもリファクタリングか）して遊んでます。
JavaScriptの基礎を学びなおそうと学習していた際に遭遇したエラー
直訳すると「キャッチされない構文エラー: モジュール外でインポート ステートメントを使用できません」
コードは下記になります。
エラー出力コード
const.js
|
1 2 3 |
export const API_URL = "APIのURL"; |
script.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
import { API_URL } from "./const.js"; const quoteContainer = document.getElementById("quote-container"); const author = document.getElementById("author"); const twitter = document.getElementById("twitter"); let apiQuotes = []; function newQuote() { const quote = apiQuotes[Math.floor(Math.random() * apiQuotes.length)]; console.log(quote); } // APIから引用文取得 async function getQuotes() { const apiUrl = API_URL; try { let response = await fetch(apiUrl); // レスポンスの文字列をJSONに変換 apiQuotes = await response.json(); // awaitを追加 newQuote(); } catch (error) { // エラー処理 console.log(error); } } // 初回画面起動時に呼び出す getQuotes(); |
index.html
<!DOCTYPE html>
<!– 引用ジェネレーター –>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
<title>Quote Generator</title>
<link
rel=”icon”
type=”image/png”
href=”https://www.google.com/s2/favicons?domain=jacinto.design”
/>
<link
rel=”stylesheet”
href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css”
/>
<link rel=”stylesheet” href=”../CSS/style.css” />
</head>
<body>
<div class=”quote-container” id=”quote-container”>
<!– Quote –>
<div class=”quote-text”>
<i class=”fas fa-quote-left”> </i>
<span id=”quote”> dammy text </span>
</div>
<!– Author –>
<div class=”quote-author”>
<span id=”author”>nick</span>
</div>
<!– Button –>
<div class=”button-container”>
<button class=”twitter-button” id=”twitter” title=”Tweet This!”>
<i class=”fab fa-twitter”></i>
</button>
<button id=”new-quote”>New Quote</button>
</div>
</div>
<!– Script –>
<script type=”module” src=”const.js”></script>
<script src=”script.js”></script>
</body>
</html>
結論
<script src=”script.js”></script>にもtype=”module”が必要
修正版
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<!DOCTYPE html> <!-- 引用ジェネレーター --> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Quote Generator</title> <link rel="icon" type="image/png" href="https://www.google.com/s2/favicons?domain=jacinto.design" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" /> <link rel="stylesheet" href="../CSS/style.css" /> </head> <body> <div class="quote-container" id="quote-container"> <!-- Quote --> <div class="quote-text"> <i class="fas fa-quote-left"> </i> <span id="quote"> dammy text </span> </div> <!-- Author --> <div class="quote-author"> <span id="author">nick</span> </div> <!-- Button --> <div class="button-container"> <button class="twitter-button" id="twitter" title="Tweet This!"> <i class="fab fa-twitter"></i> </button> <button id="new-quote">New Quote</button> </div> </div> <!-- Script --> <script type="module" src="const.js"></script> <script type="module" src="script.js"></script> </body> </html> |
コメント