エラー解決：JavaScript、ECMAScript 6、ArcGIS で発生する "Uncaught SyntaxError: Cannot use import statement outside a module" エラーの解決方法
2024-04-02
JavaScript、ECMAScript 6、ArcGIS での "Uncaught SyntaxError: Cannot use import statement outside a module" エラーの解決方法
このエラーは、JavaScript で ECMAScript 6 (ES6) の import ステートメントを使用してモジュールを読み込もうとしたときに発生します。このエラーは、次のいずれかの理由で発生する可能性があります。
- スクリプトがモジュールとして実行されていない。
importステートメントの構文が間違っている。- インポートしようとしているモジュールが存在しない。
解決方法
このエラーを解決するには、次のいずれかの方法を試してください。
ES6 の import ステートメントを使用するには、スクリプトをモジュールとして実行する必要があります。これは、次のいずれかの方法で行うことができます。
- スクリプトのファイル拡張子を
.mjsに変更する。 <script type="module">タグを使用してスクリプトを読み込む。
例
<script type="module" src="my-script.mjs"></script>
import ステートメントの構文が間違っている場合は、このエラーが発生します。import ステートメントの構文は次のとおりです。
import <モジュール名> from '<モジュールパス>';
import esri from 'arcgis-js-api';
インポートしようとしているモジュールが存在しない場合は、このエラーが発生します。モジュールが存在することを確認するには、次のいずれかの方法を試してください。
- モジュールの名前が正しいことを確認する。
- モジュールがインストールされていることを確認する。
// モジュールの名前が間違っている
import esriMap from 'arcgis-js-api'; // エラーが発生する
// モジュールがインストールされていない
import esri from 'esri'; // エラーが発生する
ArcGIS での import ステートメントの使用
ArcGIS API for JavaScript では、ES6 の import ステートメントを使用してモジュールを読み込むことができます。ArcGIS API for JavaScript のモジュールは、@arcgis という名前空間で提供されています。
import esri from '@arcgis/core';
const map = new esri.Map({
basemap: 'topo',
layers: [
new esri.layers.FeatureLayer({
url: 'https://services.arcgis.com/ArcGIS/rest/services/World_Imagery/MapServer'
})
]
});
document.getElementById('map').appendChild(map.view.container);
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ArcGIS API for JavaScript のサンプル</title>
</head>
<body>
<div id="map"></div>
<script type="module">
import esri from '@arcgis/core';
const map = new esri.Map({
basemap: 'topo',
layers: [
new esri.layers.FeatureLayer({
url: 'https://services.arcgis.com/ArcGIS/rest/services/World_Imagery/MapServer'
})
]
});
document.getElementById('map').appendChild(map.view.container);
</script>
</body>
</html>
このコードを実行するには、次の手順が必要です。
- このコードを HTML ファイルとして保存します。
- ArcGIS API for JavaScript をインストールします。
- HTML ファイルをブラウザで開きます。
ブラウザに Web マップが表示されます。
このコードの説明
import esri from '@arcgis/core'ステートメントは、ArcGIS API for JavaScript のコアモジュールを読み込みます。const map = new esri.Map()ステートメントは、新しいMapオブジェクトを作成します。basemapプロパティは、ベースマップを設定します。layersプロパティは、マップに追加するレイヤーのリストを設定します。new esri.layers.FeatureLayer()ステートメントは、新しいFeatureLayerオブジェクトを作成します。urlプロパティは、フィーチャレイヤーの URL を設定します。document.getElementById('map').appendChild(map.view.container)ステートメントは、マップを HTML 要素に追加します。
ArcGIS API for JavaScript には、さまざまなサンプルコードが用意されています。これらのサンプルコードは、ArcGIS API for JavaScript の使用方法を学ぶのに役立ちます。
"Uncaught SyntaxError: Cannot use import statement outside a module" エラーの解決方法：その他の方法
Babel を使用する
Babel は、ES6 コードを ES5 コードに変換するコンパイラです。Babel を使用すると、ES6 の import ステートメントをサポートしていないブラウザでも、ES6 コードを実行することができます。
// package.json
{
"dependencies": {
"babel-core": "^7.18.2",
"babel-loader": "^8.2.3",
"webpack": "^5.72.1"
}
}
// webpack.config.js
module.exports = {
entry: './my-script.js',
output: {
filename: './bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
};
// my-script.js
import esri from '@arcgis/core';
const map = new esri.Map({
basemap: 'topo',
layers: [
new esri.layers.FeatureLayer({
url: 'https://services.arcgis.com/ArcGIS/rest/services/World_Imagery/MapServer'
})
]
});
document.getElementById('map').appendChild(map.view.container);
npm installコマンドを実行して、必要なパッケージをインストールします。webpackコマンドを実行して、ES6 コードを ES5 コードに変換します。- 変換されたコード (
bundle.js) を HTML ファイルに読み込みます。
SystemJS は、JavaScript モジュールローダーです。SystemJS を使用すると、ES6 の import ステートメントをサポートしていないブラウザでも、ES6 モジュールを読み込むことができます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ArcGIS API for JavaScript のサンプル</title>
</head>
<body>
<div id="map"></div>
<script src="https://unpkg.com/[email protected]/dist/system.min.js"></script>
<script>
System.config({
map: {
'@arcgis/core': 'https://unpkg.com/@arcgis/core@latest/dist/arcgis.js'
}
});
System.import('@arcgis/core').then((esri) => {
const map = new esri.Map({
basemap: 'topo',
layers: [
new esri.layers.FeatureLayer({
url: 'https://services.arcgis.com/ArcGIS/rest/services/World_Imagery/MapServer'
})
]
});
document.getElementById('map').appendChild(map.view.container);
});
</script>
</body>
</html>
- SystemJS の JavaScript ファイル (
system.min.js) を HTML ファイルに追加します。 System.config()メソッドを使用して、モジュールのパスを設定します。
javascript ecmascript-6 arcgis
