「import文でエラーが出る」の直し方は？

ブラウザは、Node.jsは package.json に "type": "module" を追加する。

← エラー辞典に戻る

JavaScript

import文でエラーが出る

モジュール設定がされていない

こんな症状

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

まず試す

ブラウザは <script type="module" src="app.js">、Node.jsは package.json に "type": "module" を追加する。

<!-- ブラウザ: type="module" を付ける -->
<script type="module" src="app.js"></script>

これで直らなければ、下の「自分のケース」を確認。

🔍 自分のケースはどれ？

✓ブラウザで import を使った
→ <script type="module"> にする。
✓Node.jsで import を使った
→ package.json に "type": "module" を足す（またはファイルを .mjs に）。
✓require と import が混在
→ CommonJS と ESM は混ぜられない。どちらかに統一する。

なぜ起きる？

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

✕ エラーが起きるコード

<!-- type指定なしのscriptでimportを使うと… -->
<script src='app.js'></script>

// app.js
import { sum } from './math.js';
// Uncaught SyntaxError: Cannot use import statement outside a module

✓ 直したコード

<!-- ✅ type='module' を付ける -->
<script type='module' src='app.js'></script>

// Node.jsの場合は package.json に追記
// { 'type': 'module' }
// またはファイルを .mjs 拡張子にする