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

Question

I m using ArcGIS JSAPI 4 12 and wish to use Spatial Illusions to draw military symbols on a map   When I add milsymbol js to the script  the console returns error     Uncaught SyntaxError  Cannot use import statement outside a module    so I add type  module  to the script  and then it returns     Uncaught ReferenceError  ms is not defined   Here s my code    lt link rel  stylesheet  href  https   js arcgis com 4 12 esri css main css  gt   lt script src  https   js arcgis com 4 12   gt  lt  script gt   lt script type  module  src  milsymbol-2 0 0 src milsymbol js  gt  lt  script gt    lt script gt      require            esri Map            esri views MapView            esri layers MapImageLayer            esri layers FeatureLayer         function  Map  MapView  MapImageLayer  FeatureLayer             var symbol   new ms Symbol  SFG-UCI----D     size  30    asCanvas 3           var map   new Map               basemap   topo-vector                       var view   new MapView               container   viewDiv               map  map              center   121  23               zoom  7                      lt  script gt    So  whether I add type  module  or not  there are always errors  However  in the official document of Spatial Illusions  there isn t any type  module  in the script  I m now really confused  How do they manage to get it work without adding the type   File milsymbol js  import   ms   from    ms js    import Symbol from    ms symbol js   ms Symbol   Symbol   export   ms

User · Answer

It looks like the cause of the errors are:

You're currently loading the source file in the src directory instead of the built file in the dist directory (you can see what the intended distributed file is here). This means that you're using the native source code in an unaltered/unbundled state, leading to the following error: Uncaught SyntaxError: Cannot use import statement outside a module. This should be fixed by using the bundled version since the package is using rollup to create a bundle.
The reason you're getting the Uncaught ReferenceError: ms is not defined error is because modules are scoped, and since you're loading the library using native modules, ms is not in the global scope and is therefore not accessible in the following script tag.

It looks like you should be able to load the dist version of this file to have ms defined on the window. Check out this example from the library author to see an example of how this can be done.

User · Answer

Update For Node   NPM Add  quot type quot    quot module quot  to your package json               quot type quot    quot module quot

User · Answer

The error is triggered because the file you re linking to in your HTML file is the unbundled version of the file  To get the full bundled version you ll have to install it with npm   npm install --save milsymbol   This downloads the full package to your node modules folder   You can then access the standalone minified JavaScript file at node modules milsymbol dist milsymbol js  You can do this in any directory  and then just copy the below file to your  src directory

User · Answer

I got this error because I forgot the type  module  inside the script tag    lt script type  module  src  milsymbol-2 0 0 src milsymbol js  gt  lt  script gt

User · Answer

I resolved my case by replacing  import  by  require       import   parse   from  node-html-parser   parse   require  node-html-parser

User · Answer

Adding the why this occurs and more possible cause  A lot of interfaces still do not understand ES6 Javascript syntax features  hence there is need for Es6 to be compiled to ES5 whenever it is used in any file or project  The possible reasons for the SyntaxError  Cannot use import statement outside a module error is you are trying to run the file independently  you are yet to install and set up an Es6 compiler such as Babel or the path of the file in your runscript is wrong not the compiled file  If you will want to continue without a compiler the best possible solution is to use ES5 syntax which in your case would be var ms   require   ms js   this can later be updated as appropriate or better still setup your compiler and ensure your file project is compiled before running and also ensure your run script is running the compiled file usually named dist  build or whatever you named it and the path to the compiled file in your runscript is correct

User · Answer

This error in REACT  following steps  Go to Project Root Directory Package json file  add  quot type quot   quot module quot    Save it and Restart Server

User · Answer

What I did in my case was to update  quot lib quot            quot es2020 quot          quot dom quot         with  quot lib quot        quot es2016 quot      quot dom quot     in my tsconfig json file

User · Answer

For me  it was caused before I referred a library  specifically typeORM  using the ormconfig js file  under the entities key  to the src folder  instead of the dist folder        quot entities quot            quot src db entity      ts quot      Pay attention to  quot src quot  and  quot ts quot   this is wrong         instead of     quot entities quot            quot dist db entity      js quot      Pay attention to  quot dist quot  and  quot js quot   this is the correct way

User · Answer

I solved this issue by doing the following   When using ECMAScript nbsp 6 modules from the browser  use the  js extension in your files and in the script tag add type    module    When using ECMAScript nbsp 6 modules from a Node js environment  use the extension  mjs in your files and use this command to run the file   node --experimental-modules filename mjs

User · Answer

I don t know whether this has appeared obvious here  I would like to point out that as far as client-side  browser  JavaScript is concerned  you can add type  quot module quot  to both external as well as internal js scripts  Say  you have a file  module js   var a   10  export  a    You can use it in an external script  in which you do the import  eg    lt  DOCTYPE html gt  lt html gt  lt body gt   lt script type  quot module quot  src  quot test js quot  gt  lt  script gt  lt  -- Here use type  quot module quot  rather than type  quot text javascript quot  -- gt   lt  body gt  lt  html gt   test js  import  a  from  quot   module js quot   alert a    You can also use it in an internal script  eg    lt  DOCTYPE html gt  lt html gt  lt body gt   lt script type  quot module quot  gt      import  a  from  quot   module js quot       alert a    lt  script gt   lt  body gt  lt  html gt   It is worthwhile mentioning that for relative paths  you must not omit the  quot    quot  characters  ie   import  a  from  quot module js quot          this won t work

User · Answer

Just add  pack between the name and the extension in the  lt script gt  tag in src  i e      lt script src  name pack js  gt     code here  lt  script gt

User · Answer

I was also facing the same issue until I added the type  module  to the script   Before it was like this   lt script src     src main js  gt  lt  script gt    And after changing it to   lt script type  module  src     src main js  gt  lt  script gt    It worked perfectly

User · Answer

TypeScript  React  index html       conf js      window bar    quot bar quot             index html       lt script type  quot module quot  src  quot   conf js quot  gt  lt  script gt             tsconfig json      quot include quot     quot typings-custom      ts quot              typings-custom typings d ts     declare var bar string         App tsx     console log  bar   window bar       or     console log  bar   bar

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

Examples related to javascript

Examples related to ecmascript-6

Examples related to arcgis

Examples related to arcgis-js-api