Why Am I Getting 'Uncaught SyntaxError: Cannot Use Import Statement Outside a Module' in ArcGIS JSAPI 4.12?

Uncaught SyntaxError: Cannot Use Import Statement Outside a Module When Importing ECMAScript 6

Introduction:
When incorporating ECMAScript 6 modules into ArcGIS JSAPI 4.12, you may encounter SyntaxError related to the import statement. This error occurs when attempting to use the import statement outside a JavaScript module.

Solution:
To resolve this issue, the following steps should be taken:

1. Add "type": "module" to package.json (Node.js / NPM):
If using Node.js / NPM, navigate to the package.json file and add the following line:

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

2. Modify milsymbol.js file:
Locate the milsymbol.js file and modify it as follows:

// Import statements should be placed inside the module block
import { ms } from "./ms.js";

import Symbol from "./ms/symbol.js";
ms.Symbol = Symbol;

export { ms };

Note:
When using modules, it's important to consistently use import or require syntax across the codebase. Mixing them can lead to issues. If you encounter ReferenceError: require is not defined, switch to import syntax or utilize a bundler.

The above is the detailed content of Why Am I Getting 'Uncaught SyntaxError: Cannot Use Import Statement Outside a Module' in ArcGIS JSAPI 4.12?. For more information, please follow other related articles on the PHP Chinese website!