Why am I getting 'Uncaught SyntaxError: Cannot use import statement outside a module' when importing ES6 modules in ArcGIS JSAPI?

"Uncaught SyntaxError: Cannot use import statement outside a module" when importing ECMAScript 6

When attempting to use Spatial Illusions to draw military symbols on a map using ArcGIS JSAPI 4.12, one may encounter the error "Uncaught SyntaxError: Cannot use import statement outside a module" upon importing milsymbol.js. The root of this issue lies in the fact that ECMAScript 6 (ES6) modules, which use the import keyword, require the <script> element to have a type="module" attribute.</script>

Adding type="module" to the <script> element will resolve the Cannot use import statement outside a module error. However, this may lead to another error: "Uncaught ReferenceError: ms is not defined". This occurs because the milsymbol.js file contains ES6 modules, and ES6 modules must be imported using the import syntax rather than require.</script>

To rectify this, update your package.json file by adding "type": "module". This will inform the JavaScript engine that your code is using ES6 modules.

{
  // ...
  "type": "module",
  // ...
}

Alternatively, you can use a bundler such as Rollup or Webpack to bundle your code into a single file that can be included in a standard <script> element.</script>

In the context of Spatial Illusions, the official documentation does not specify type="module" in the <script> element because they are assuming you are using a bundler. If you are not using a bundler, you will need to add type="module" to the <script> element and update your package.json file with "type": "module".</script>

The above is the detailed content of Why am I getting 'Uncaught SyntaxError: Cannot use import statement outside a module' when importing ES6 modules in ArcGIS JSAPI?. For more information, please follow other related articles on the PHP Chinese website!