📦 import文でエラーが出る

😰 こんな症状

import文を書いたら「Cannot use import statement outside a module」と表示される。モジュール設定で起きるよ。

🔍 原因

HTMLのscriptタグにtype="module"が指定されていない、またはNode.jsでpackage.jsonに"type":"module"がないよ。ブラウザやNode.jsはデフォルトでスクリプトを「クラシックモード」として扱い、import/export構文を認識しないんだ。モジュールモードに切り替える必要があるよ。

❌ エラーが起きるコード

// HTMLのscriptタグにtype="module"が指定されていない、またはNode.jsでpa

✅ 直し方

1. ブラウザ: <script type="module" src="app.js"></script>とtype="module"を追加する。 2. Node.js: package.jsonに"type": "module"を追加する。 3. またはファイル拡張子を.mjsにする。 4. CommonJSのrequire()とESMのimportは混在できないので統一する。

✅ 修正後のコード

// <script type="module" src="app.js"></script> と書く。N

🔗 関連するエラー

• Uncaught TypeError: Cannot read properties of null — getElementById の id が存在しない
• ReferenceError: Cannot access before initialization — let/constの宣言前にアクセスしている
• TypeError: Cannot read properties of null（null参照） — nullのプロパティにアクセスしている
• TypeError: Cannot read properties of undefined (reading 'length') — undefinedに対して.lengthを呼んでいる
• TypeError: Cannot set properties of null (setting 'textContent') — nullに対してプロパティを設定しようとしている

🔗 別カテゴリの関連エラー

• import SyntaxError
• thisがundefined
• scriptが読み込めない（404）

📖 この問題を学べるレッスン

JavaScriptコースで基礎から学ぶ →

📝 関連ブログ記事

• プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説
• JavaScriptとは？初心者向けにわかりやすく解説 — 変数・関数・イベントの基本
• JavaScriptでボタンクリックを動かす方法 — ボタンクリック時の動作を解説

📖 関連する用語

• JavaScript
• Java・JavaScript の違い

❓ 関連するQ&A

• console.logの結果はどこで見る？
• ボタンクリックで何も起きない
• letとconstどっちを使う？