Develop Reference

Uncaught SyntaxError: Cannot use import statement outside a module in Google Chrome [duplicate]

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:
<link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/css/main.css">
<script src="https://js.arcgis.com/4.12/"></script>
<script type="module" src="milsymbol-2.0.0/src/milsymbol.js"></script>
<script>
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
});
});
</script>
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 };

Update For Node.js / NPM
Add "type": "module" to your package.json file.
{
// ...
"type": "module",
// ...
}
Note: When using modules, if you get ReferenceError: require is not defined, you'll need to use the import syntax instead of require. You can't natively mix and match between them, so you'll need to pick one or use a bundler if you need to use both.

I got this error because I forgot the type="module" inside the script tag:
<script type="module" src="milsymbol-2.0.0/src/milsymbol.js"></script>

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.

I resolved my case by replacing "import" by "require".
// import { parse } from 'node-html-parser';
const parse = require('node-html-parser');

I was also facing the same issue until I added the type="module" to the script.
Before it was like this
<script src="../src/main.js"></script>
And after changing it to
<script type="module" src="../src/main.js"></script>
It worked perfectly.

There are several common ways to resolve the conflict associated with the above issue
1. The first: In the script, include type=module
<script type="module" src="milsymbol-2.0.0/src/milsymbol.js"></script>
2. The second: In node.js, into your package.json file
{
"type": "module",
}
Restart the project npm start
3. The third: replace import by required
Try this
import { parse } from 'node-html-parser';
parse = require('node-html-parser');
Else try this
//import { parse } from 'node-html-parser';
parse = require('node-html-parser');

Applicable for node 12. This answer is no longer maintained for new node versions. Feel free to comment solutions for more recent versions.
I solved this issue by doing the following:
When using ECMAScript 6 modules from the browser, use the .js extension in your files, and in the script tag add type = "module".
When using ECMAScript 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
Edit: This was written when node12 was the latest LTS, this does not apply to node 14 LTS.

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="module" 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.:
<!DOCTYPE html><html><body>
<script type="module" src="test.js"></script><!-- Here use type="module" rather than type="text/javascript" -->
</body></html>
test.js:
import {a} from "./module.js";
alert(a);
You can also use it in an internal script, eg.:
<!DOCTYPE html><html><body>
<script type="module">
import {a} from "./module.js";
alert(a);
</script>
</body></html>
It is worthwhile mentioning that for relative paths, you must not omit the "./" characters, ie.:
import {a} from "module.js"; // this won't work

For me, it was caused by not referencing a library (specifically typeORM, using the ormconfig.js file, under the entities key) to the src folder, instead of the dist folder...
"entities": [
"src/db/entity/**/*.ts", // Pay attention to "src" and "ts" (this is wrong)
],
instead of
"entities": [
"dist/db/entity/**/*.js", // Pay attention to "dist" and "js" (this is the correct way)
],

If you want to use import instead of require() for modules, change or add the value of type to module in package.json file
Example:
package.json file
{
"name": "appsample",
"version": "1.0.0",
"type": "module",
"description": "Learning Node",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Chikeluba Anusionwu",
"license": "ISC"
}
import http from 'http';
var host = '127.0.0.1',
port = 1992,
server = http.createServer();
server.on('request', (req, res) => {
res.writeHead(200, {"Content-Type": "text/plain"});
res.end("I am using type module in package.json file in this application.");
});
server.listen(port, () => console.log(
'Listening to server ${port}. Connection has been established.'));

I got this error in React and fixed it with the following steps:
Go to the project root directory, and open the Package.json file for editing.
Add "type":"module";
Save it and restart the server.

Add "type": "module", to your package.json file.
And restart your application:
npm start
Then your problem is solved.

I'm coding on vanilla JavaScript. If you're doing same, simply add a type="module" to your script tag.
That is, previous code:
<script src="./index.js"></script>
Updated code:
<script type="module" src="./index.js"></script>`

Why this occurs and more possible causes:
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 set up 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.

For me this helped:
In the .ts file I used: import prompts from "prompts";
And used "module": "commonjs" in file tsconfig.json

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.

Use this code. It worked well for me:
Add this script tag to file index.html:
<script type="module">
import { ms } from "./ms.js";
import Symbol from "./ms/symbol.js";
</script>

I ran into this error while trying to use import Express.js.
Instead of   import express from 'express';
I used   const express = require('express');

I have faced the same error by EXPO.
Mainly the solution is that to add "type": "module", in the package.json file.
However, you have to check that which is your correct package.json.
In my case, there are two package.json files, then you should add that to the server file.
To identify which is correct package.json, find "scripts": { "test": "echo \"Error: no test specified\" && exit 1" },
Below ↑　this line, add "type": "module",

None of the provided answers worked for me, but I found a different solution from: How to enable ECMAScript 6 imports in Node.js
Install ESM:
npm install --save esm
Run with ESM:
node -r esm server.js

In my case, I updated
"lib": [
"es2020",
"dom"
]
with
"lib": [
"es2016",
"dom"
]
in my tsconfig.json file.

I had to import some data from an external file (JavaScript file), to my script.js file present in my HTML file.
File data.js
const data = {a: 1, b: 2}
By adding type=module I got CORS error.
I found out that I can import file data.js into my script.js file just by including file data.js inside my HTML file.
For example, previously my HTML file consists of
<script src="assets/script.js"></script>
As I required some data from file data.js, I just changed my HTML file to:
<script src="assets/data.js"></script>
<script src="assets/script.js"></script>
I.e., include file data.js before file script.js, giving access to my data variable inside file script.js.

I just added "type": "module" to my Package.json file and it worked for me.

I thought I would add this note because it was not apparently obvious to me. You need to add type="module" to all script includes, not just the one you want to use for your utility file.
index.html:
<script type="module" src="js/controllers/utils.js"></script>
<script type="module" src="js/controllers/main.js"></script>`
main.js:
import myFunction from './utils.js
utils.js:
export default myFunction

if you want to import functions from module.
let's say, main.js has func1 and func2 defined, and you want to import those to function to a new module say, test.js
Below will solve the problem.
main.js:
const func1 = () => {console.log('do sth in func1')};
const func2 = () => {console.log('do sth in func2')};
//at the end of module
//export specific functions here
module.exports = { func1, func2 };
test.js :
// import them here
const{ func1, func2} = require('./main.js');
func1();
func2();

Well, in my case, I didn't want to update my package.json file and change the file type to mjs.
So I was looking around and found out that changing the module in file tsconfig.json affected the result. My ts.config file was:
{
"compilerOptions": {
"target": "es2020",
"module": "es2020",
"lib": [
"es2020",
],
"skipLibCheck": true,
"sourceMap": true,
"outDir": "./dist",
"moduleResolution": "node",
"removeComments": true,
"noImplicitAny": true,
"strictNullChecks": true,
"strictFunctionTypes": true,
"noImplicitThis": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"resolveJsonModule": true,
"baseUrl": "."
},
"exclude": [
"node_modules"
],
"include": [
"./src/**/*.ts"
]
}
Like this and changing the module from "module": "es2020" to "module" : "commonjs" solved my issue.
I was using MikroORM and thought maybe it doesn't support any module above CommonJS.

It's because you haven't exported. The .ts file requires an export class format, whereas in a .js file we would use the exports function.
So, we have to use var_name = require("<pathfile>") to use those file functions.

Use
<script type="module" src="/src/moduleA.js"></script>
instead of
<script>System.import("/src/moduleA.js")</script>

For me it was a compilation problem. I've added
"devDependencies": {
...
"#babel/cli": "^7.7.5",
"#babel/core": "^7.7.5",
"#babel/node": "^7.7.4",
"#babel/plugin-proposal-class-properties": "^7.7.4",
"#babel/plugin-transform-instanceof": "^7.8.3",
"#babel/plugin-transform-runtime": "^7.7.6",
"#babel/preset-env": "^7.7.5",
"#babel/register": "^7.7.4",
"#babel/runtime": "^7.9.6"
},
"dependencies": {
...
"#babel/plugin-transform-classes": "^7.15.4"
},
added .babelrc file
{
"plugins": [
"#babel/plugin-proposal-class-properties",
"#babel/plugin-transform-instanceof",
"#babel/plugin-transform-classes"
],
"presets": ["#babel/preset-env"],
"env": {
"test": {
"plugins": ["#babel/plugin-transform-runtime"]
}
}
}

Just add .pack between the name and the extension in the <script> tag in src.
I.e.:
<script src="name.pack.js">
// Code here
</script>

import packages in CoffeeScript [duplicate]

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:
<link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/css/main.css">
<script src="https://js.arcgis.com/4.12/"></script>
<script type="module" src="milsymbol-2.0.0/src/milsymbol.js"></script>
<script>
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
});
});
</script>
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 };

Update For Node.js / NPM
Add "type": "module" to your package.json file.
{
// ...
"type": "module",
// ...
}
Note: When using modules, if you get ReferenceError: require is not defined, you'll need to use the import syntax instead of require. You can't natively mix and match between them, so you'll need to pick one or use a bundler if you need to use both.

I got this error because I forgot the type="module" inside the script tag:
<script type="module" src="milsymbol-2.0.0/src/milsymbol.js"></script>

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.

I resolved my case by replacing "import" by "require".
// import { parse } from 'node-html-parser';
const parse = require('node-html-parser');

I was also facing the same issue until I added the type="module" to the script.
Before it was like this
<script src="../src/main.js"></script>
And after changing it to
<script type="module" src="../src/main.js"></script>
It worked perfectly.

There are several common ways to resolve the conflict associated with the above issue
1. The first: In the script, include type=module
<script type="module" src="milsymbol-2.0.0/src/milsymbol.js"></script>
2. The second: In node.js, into your package.json file
{
"type": "module",
}
Restart the project npm start
3. The third: replace import by required
Try this
import { parse } from 'node-html-parser';
parse = require('node-html-parser');
Else try this
//import { parse } from 'node-html-parser';
parse = require('node-html-parser');

Applicable for node 12. This answer is no longer maintained for new node versions. Feel free to comment solutions for more recent versions.
I solved this issue by doing the following:
When using ECMAScript 6 modules from the browser, use the .js extension in your files, and in the script tag add type = "module".
When using ECMAScript 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
Edit: This was written when node12 was the latest LTS, this does not apply to node 14 LTS.

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="module" 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.:
<!DOCTYPE html><html><body>
<script type="module" src="test.js"></script><!-- Here use type="module" rather than type="text/javascript" -->
</body></html>
test.js:
import {a} from "./module.js";
alert(a);
You can also use it in an internal script, eg.:
<!DOCTYPE html><html><body>
<script type="module">
import {a} from "./module.js";
alert(a);
</script>
</body></html>
It is worthwhile mentioning that for relative paths, you must not omit the "./" characters, ie.:
import {a} from "module.js"; // this won't work

For me, it was caused by not referencing a library (specifically typeORM, using the ormconfig.js file, under the entities key) to the src folder, instead of the dist folder...
"entities": [
"src/db/entity/**/*.ts", // Pay attention to "src" and "ts" (this is wrong)
],
instead of
"entities": [
"dist/db/entity/**/*.js", // Pay attention to "dist" and "js" (this is the correct way)
],

If you want to use import instead of require() for modules, change or add the value of type to module in package.json file
Example:
package.json file
{
"name": "appsample",
"version": "1.0.0",
"type": "module",
"description": "Learning Node",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Chikeluba Anusionwu",
"license": "ISC"
}
import http from 'http';
var host = '127.0.0.1',
port = 1992,
server = http.createServer();
server.on('request', (req, res) => {
res.writeHead(200, {"Content-Type": "text/plain"});
res.end("I am using type module in package.json file in this application.");
});
server.listen(port, () => console.log(
'Listening to server ${port}. Connection has been established.'));

I got this error in React and fixed it with the following steps:
Go to the project root directory, and open the Package.json file for editing.
Add "type":"module";
Save it and restart the server.

Add "type": "module", to your package.json file.
And restart your application:
npm start
Then your problem is solved.

I'm coding on vanilla JavaScript. If you're doing same, simply add a type="module" to your script tag.
That is, previous code:
<script src="./index.js"></script>
Updated code:
<script type="module" src="./index.js"></script>`

Why this occurs and more possible causes:
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 set up 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.

For me this helped:
In the .ts file I used: import prompts from "prompts";
And used "module": "commonjs" in file tsconfig.json

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.

Use this code. It worked well for me:
Add this script tag to file index.html:
<script type="module">
import { ms } from "./ms.js";
import Symbol from "./ms/symbol.js";
</script>

I ran into this error while trying to use import Express.js.
Instead of   import express from 'express';
I used   const express = require('express');

I have faced the same error by EXPO.
Mainly the solution is that to add "type": "module", in the package.json file.
However, you have to check that which is your correct package.json.
In my case, there are two package.json files, then you should add that to the server file.
To identify which is correct package.json, find "scripts": { "test": "echo \"Error: no test specified\" && exit 1" },
Below ↑　this line, add "type": "module",

None of the provided answers worked for me, but I found a different solution from: How to enable ECMAScript 6 imports in Node.js
Install ESM:
npm install --save esm
Run with ESM:
node -r esm server.js

In my case, I updated
"lib": [
"es2020",
"dom"
]
with
"lib": [
"es2016",
"dom"
]
in my tsconfig.json file.

I had to import some data from an external file (JavaScript file), to my script.js file present in my HTML file.
File data.js
const data = {a: 1, b: 2}
By adding type=module I got CORS error.
I found out that I can import file data.js into my script.js file just by including file data.js inside my HTML file.
For example, previously my HTML file consists of
<script src="assets/script.js"></script>
As I required some data from file data.js, I just changed my HTML file to:
<script src="assets/data.js"></script>
<script src="assets/script.js"></script>
I.e., include file data.js before file script.js, giving access to my data variable inside file script.js.

I just added "type": "module" to my Package.json file and it worked for me.

I thought I would add this note because it was not apparently obvious to me. You need to add type="module" to all script includes, not just the one you want to use for your utility file.
index.html:
<script type="module" src="js/controllers/utils.js"></script>
<script type="module" src="js/controllers/main.js"></script>`
main.js:
import myFunction from './utils.js
utils.js:
export default myFunction

if you want to import functions from module.
let's say, main.js has func1 and func2 defined, and you want to import those to function to a new module say, test.js
Below will solve the problem.
main.js:
const func1 = () => {console.log('do sth in func1')};
const func2 = () => {console.log('do sth in func2')};
//at the end of module
//export specific functions here
module.exports = { func1, func2 };
test.js :
// import them here
const{ func1, func2} = require('./main.js');
func1();
func2();

Well, in my case, I didn't want to update my package.json file and change the file type to mjs.
So I was looking around and found out that changing the module in file tsconfig.json affected the result. My ts.config file was:
{
"compilerOptions": {
"target": "es2020",
"module": "es2020",
"lib": [
"es2020",
],
"skipLibCheck": true,
"sourceMap": true,
"outDir": "./dist",
"moduleResolution": "node",
"removeComments": true,
"noImplicitAny": true,
"strictNullChecks": true,
"strictFunctionTypes": true,
"noImplicitThis": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"resolveJsonModule": true,
"baseUrl": "."
},
"exclude": [
"node_modules"
],
"include": [
"./src/**/*.ts"
]
}
Like this and changing the module from "module": "es2020" to "module" : "commonjs" solved my issue.
I was using MikroORM and thought maybe it doesn't support any module above CommonJS.

It's because you haven't exported. The .ts file requires an export class format, whereas in a .js file we would use the exports function.
So, we have to use var_name = require("<pathfile>") to use those file functions.

Use
<script type="module" src="/src/moduleA.js"></script>
instead of
<script>System.import("/src/moduleA.js")</script>

For me it was a compilation problem. I've added
"devDependencies": {
...
"#babel/cli": "^7.7.5",
"#babel/core": "^7.7.5",
"#babel/node": "^7.7.4",
"#babel/plugin-proposal-class-properties": "^7.7.4",
"#babel/plugin-transform-instanceof": "^7.8.3",
"#babel/plugin-transform-runtime": "^7.7.6",
"#babel/preset-env": "^7.7.5",
"#babel/register": "^7.7.4",
"#babel/runtime": "^7.9.6"
},
"dependencies": {
...
"#babel/plugin-transform-classes": "^7.15.4"
},
added .babelrc file
{
"plugins": [
"#babel/plugin-proposal-class-properties",
"#babel/plugin-transform-instanceof",
"#babel/plugin-transform-classes"
],
"presets": ["#babel/preset-env"],
"env": {
"test": {
"plugins": ["#babel/plugin-transform-runtime"]
}
}
}

Just add .pack between the name and the extension in the <script> tag in src.
I.e.:
<script src="name.pack.js">
// Code here
</script>

Importing leaflet into module from cdn with typescript support

I'm trying to import leaflet into a javascript module with typescript support but can't get it to work.
I've installed #types/leaflet and have tried to following:
import 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.8.0/leaflet.js'
This works fine in the browser but typescript gives the following error:
'L' refers to a UMD global, but the current file is a module. Consider adding an import instead.ts(2686)
(I call L.map() in my code)
I've also tried:
import * as L from 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.8.0/leaflet.js'
This works fine in typescript, but gives the following error in chrome:
Uncaught TypeError: L.map is not a function
Anyone know how to fix this?
I don't want to use a bundler.
Edit
As jsejcksn suggested in the comments, importing a ES module version of leaflet and adding a path alias to typescript fixed this.
I'm now using the following import:
import * as L from 'https://unpkg.com/leaflet#1.8.0/dist/leaflet-src.esm.js'
The problem with this though, as stated on Leaflet's Download page, is that this imports Leaflet's source files including unit tests, files for debugging, build scripts, etc. This doesn't seem very efficient to me.
Any other ideas?
Edit 2
It seems like Leaflet 1.9 will solve my problem when it will be released. This pull request adds an ES module entrypoint to Leaflet meaning you can do this:
import L from 'leaflet'
or in our case:
import L from 'cdn.com/link/to/leaflet/1.9/esm'
In the mean time, jsejcksn's answer provides a good alternative so I will accept that answer.

Preface
I've already written an answer about how to do this with ES modules at the question How to include modules in client side in typescript projects?. Be sure to read through that question and answer for context here.
You said:
I don't want to use a bundler.
and also:
The problem with this though, as stated on Leaflet's Download page, is that this imports Leaflet's source files including unit tests, files for debugging, build scripts, etc. This doesn't seem very efficient to me.
These ideas seem at odds to me. Without more information, I can only assume that by "not very efficient" you mean that the byte size of the presumably not-tree-shaken ES module is larger than the UMD module. If that's the case, why not just import Leaflet into your bundle and tree-shake away all of the parts that you don't use during build, resulting in even fewer bytes than the UMD?
Ignoring that for now, and responding purely to your stated criteria, below I will provide a self-contained, reproducible example demonstrating how you can use a CDN-hosted UMD module that has a corresponding #types package in a TypeScript ES module without augmenting the definition of globalThis.window in the compiler and without bundling.
Note that some of what I show will be purely ceremonial, but the technique will allow for you to later swap out the shim module URL in the import map with a CDN ES module URL if/when you find one that suits you.
Download the files in this example
I'm going to provide a complete reproducible example here, including all the content of each file in a code block. If you want to use this example to reproduce it and don't want to copy + paste every individual code block into a new file with a matching name on your device, then you can copy + paste the following script and run it in your browser console to download the repo as a zip archive file:
function download (data, fileName, mediaType) {
const a = document.createElement('a');
const blob = new Blob([data], mediaType ? {type: mediaType} : undefined);
const url = URL.createObjectURL(blob);
a.href = url;
a.download = fileName;
a.click();
a.remove();
// URL.revokeObjectURL(url);
}
download(
new Uint8Array([80,75,3,4,20,0,0,0,8,0,173,178,247,84,63,79,13,255,254,0,0,0,4,24,0,0,9,0,28,0,46,68,83,95,83,116,111,114,101,85,84,9,0,3,182,186,220,98,78,194,220,98,117,120,11,0,1,4,245,1,0,0,4,20,0,0,0,237,152,49,78,196,48,16,69,255,132,72,88,162,113,73,233,43,236,13,204,42,112,129,109,232,64,75,34,40,178,202,22,32,218,92,135,123,112,27,46,65,140,255,66,68,130,4,5,218,21,252,39,89,47,146,199,246,164,177,61,6,96,203,135,122,1,120,0,14,217,150,62,102,112,108,19,10,186,76,131,223,230,104,112,143,166,189,93,172,110,186,249,185,14,142,148,251,49,174,80,15,185,183,227,252,55,219,81,212,167,136,77,87,85,235,182,91,15,61,238,165,121,186,124,188,120,62,155,139,170,191,17,181,189,155,172,38,132,16,66,252,38,150,229,78,246,155,134,16,226,0,73,251,67,160,35,221,103,27,251,11,186,28,141,241,116,160,35,221,103,27,227,10,186,164,29,237,233,64,71,186,207,230,166,101,44,62,140,43,239,138,23,243,116,160,227,143,126,89,136,127,195,81,150,79,231,255,249,215,245,191,16,226,15,99,101,181,170,150,120,47,8,38,164,179,54,12,237,122,55,0,60,205,49,189,4,20,249,177,240,20,31,253,129,142,116,159,173,139,128,16,251,226,21,80,75,3,4,10,0,0,0,0,0,135,182,247,84,0,0,0,0,0,0,0,0,0,0,0,0,18,0,28,0,46,109,101,116,97,95,105,103,110,111,114,101,95,116,104,105,115,47,85,84,9,0,3,237,193,220,98,62,194,220,98,117,120,11,0,1,4,245,1,0,0,4,20,0,0,0,80,75,3,4,20,0,0,0,8,0,210,178,247,84,4,129,138,94,194,1,0,0,133,3,0,0,50,0,28,0,46,109,101,116,97,95,105,103,110,111,114,101,95,116,104,105,115,47,99,114,101,97,116,101,45,105,110,108,105,110,101,45,97,114,99,104,105,118,101,45,115,99,114,105,112,116,46,109,106,115,85,84,9,0,3,252,186,220,98,252,186,220,98,117,120,11,0,1,4,245,1,0,0,4,20,0,0,0,117,146,77,139,219,48,16,134,239,254,21,115,88,176,93,130,12,61,149,132,165,236,210,221,195,210,238,150,182,123,10,129,40,210,56,81,99,75,70,146,29,82,227,255,222,81,28,39,74,161,167,120,70,207,188,239,124,68,213,141,177,30,62,0,119,208,112,191,131,210,154,26,82,109,36,206,67,156,46,18,53,34,189,217,7,136,59,135,214,15,49,55,166,10,231,173,18,62,42,176,200,229,179,170,240,6,46,93,209,80,164,28,58,66,19,97,180,243,176,44,9,251,78,118,43,184,7,122,22,232,28,227,118,219,49,87,41,129,217,199,124,145,140,46,217,68,206,32,125,176,98,167,58,132,144,26,155,167,146,182,70,237,65,27,31,116,58,37,81,166,249,197,231,143,106,190,112,207,31,219,146,124,248,129,43,15,83,147,23,97,162,111,224,23,103,52,209,107,141,7,120,87,218,127,122,176,150,31,179,187,254,229,231,219,43,11,67,235,173,42,143,217,146,49,118,213,95,229,67,190,142,148,130,197,43,175,241,172,246,79,109,104,158,109,184,67,77,200,181,147,184,149,111,40,21,255,117,108,254,163,144,242,166,161,85,113,175,140,46,8,143,134,118,194,170,198,135,17,202,86,139,0,128,52,7,93,25,46,33,147,212,238,236,180,193,208,221,12,234,201,38,135,62,1,24,21,56,21,75,35,78,171,101,130,54,230,241,169,194,16,145,111,112,154,192,77,101,54,196,134,85,61,210,103,182,12,242,171,72,21,62,67,239,233,119,126,77,13,48,135,86,75,44,149,70,25,105,181,182,34,169,247,31,95,207,142,111,155,223,40,60,197,89,112,57,129,156,237,44,134,83,18,59,198,151,193,238,47,51,141,15,130,150,179,207,206,85,22,107,211,225,24,21,197,201,195,98,103,246,145,7,41,210,243,144,36,147,98,70,236,93,31,253,39,134,217,148,137,111,123,205,222,28,140,210,249,98,125,62,137,169,144,85,102,155,141,135,33,155,191,80,75,3,4,20,0,0,0,8,0,128,182,247,84,134,228,110,93,72,0,0,0,86,0,0,0,28,0,28,0,46,109,101,116,97,95,105,103,110,111,114,101,95,116,104,105,115,47,82,69,65,68,77,69,46,116,120,116,85,84,9,0,3,224,193,220,98,224,193,220,98,117,120,11,0,1,4,245,1,0,0,4,20,0,0,0,29,202,209,9,128,48,12,5,192,127,167,120,67,185,64,104,35,13,132,68,146,104,209,233,45,194,125,222,62,36,177,184,233,131,43,185,163,28,45,152,138,81,131,33,166,98,140,87,78,80,180,33,55,227,16,101,116,159,166,78,29,217,66,206,90,239,239,100,57,57,182,15,80,75,3,4,20,0,0,0,8,0,39,179,247,84,89,60,189,69,88,0,0,0,119,0,0,0,21,0,28,0,46,109,101,116,97,95,105,103,110,111,114,101,95,116,104,105,115,47,114,117,110,85,84,9,0,3,153,187,220,98,153,187,220,98,117,120,11,0,1,4,245,1,0,0,4,20,0,0,0,101,204,59,14,128,32,12,0,208,221,83,112,129,22,127,137,241,52,132,96,35,53,242,177,16,7,78,175,179,174,111,120,141,179,130,75,84,73,176,76,253,58,244,243,136,237,53,236,98,218,72,161,198,64,213,26,222,99,18,50,213,115,209,78,200,86,2,142,39,71,2,43,206,243,77,80,156,112,174,24,142,242,189,58,9,63,122,0,80,75,3,4,10,0,0,0,0,0,198,181,247,84,0,0,0,0,0,0,0,0,0,0,0,0,7,0,28,0,112,117,98,108,105,99,47,85,84,9,0,3,131,192,220,98,140,192,220,98,117,120,11,0,1,4,245,1,0,0,4,20,0,0,0,80,75,3,4,20,0,0,0,8,0,138,181,247,84,83,75,4,148,85,1,0,0,77,2,0,0,17,0,28,0,112,117,98,108,105,99,47,105,110,100,101,120,46,104,116,109,108,85,84,9,0,3,19,192,220,98,19,192,220,98,117,120,11,0,1,4,245,1,0,0,4,20,0,0,0,125,82,77,79,195,48,12,189,239,87,152,156,23,186,1,18,48,181,61,1,55,196,97,112,70,33,117,137,33,31,85,226,110,154,16,255,157,38,29,236,198,37,78,252,158,253,252,145,250,172,11,154,15,3,130,97,103,219,69,157,13,88,229,223,27,129,94,180,139,201,131,170,107,23,0,181,67,86,160,141,138,9,185,17,35,247,242,70,64,117,130,188,114,216,136,29,225,126,8,145,5,232,224,25,253,68,221,83,199,166,233,112,71,26,101,121,44,129,60,49,41,43,147,86,22,155,117,73,148,51,49,177,197,118,203,74,127,194,211,14,99,111,195,30,174,47,87,183,235,213,213,69,93,205,112,97,158,73,9,15,20,19,47,161,195,158,60,130,242,64,46,107,131,83,3,244,33,2,27,4,97,81,245,22,167,130,92,232,70,139,144,6,212,212,19,198,41,203,222,144,54,48,4,242,156,128,67,9,120,121,188,147,28,228,253,246,17,146,33,119,12,219,128,148,165,215,164,35,13,12,121,104,141,152,245,38,57,145,49,128,175,114,2,28,129,36,54,127,46,56,85,178,1,81,29,239,175,163,235,94,179,204,249,71,18,71,230,119,177,223,249,200,130,213,172,120,234,250,217,160,95,254,182,154,43,158,166,28,15,165,137,127,139,157,49,1,41,234,70,84,78,145,207,162,237,73,160,174,230,101,47,234,183,208,29,74,2,179,110,183,136,121,151,41,76,179,11,35,15,35,79,188,117,102,207,172,28,86,62,207,15,80,75,3,4,20,0,0,0,8,0,72,187,247,84,206,95,24,128,103,0,0,0,156,0,0,0,14,0,28,0,112,117,98,108,105,99,47,109,97,105,110,46,106,115,85,84,9,0,3,232,201,220,98,234,201,220,98,117,120,11,0,1,4,245,1,0,0,4,20,0,0,0,203,204,45,200,47,42,81,240,81,72,43,202,207,85,80,207,73,77,76,203,73,45,81,183,230,74,206,207,43,46,81,72,84,176,85,240,209,203,73,44,241,201,75,215,48,53,208,51,213,81,48,6,146,154,48,249,36,20,121,67,12,249,148,204,226,146,196,188,228,84,160,178,68,61,24,39,36,95,35,9,170,34,63,39,85,47,39,63,93,163,90,33,81,71,33,73,7,161,190,22,168,0,0,80,75,3,4,20,0,0,0,8,0,72,187,247,84,107,96,82,240,103,0,0,0,114,0,0,0,26,0,28,0,112,117,98,108,105,99,47,108,101,97,102,108,101,116,95,117,109,100,95,115,104,105,109,46,106,115,85,84,9,0,3,232,201,220,98,234,201,220,98,117,120,11,0,1,4,245,1,0,0,4,20,0,0,0,53,204,49,10,195,48,12,0,192,221,175,208,150,77,106,183,82,211,31,228,19,174,45,83,27,197,10,145,66,2,165,127,47,20,58,222,114,109,89,117,115,152,94,238,171,221,137,114,25,221,48,139,238,165,74,218,24,179,46,148,122,58,73,218,211,72,56,85,97,167,43,222,240,242,23,118,155,98,200,58,204,225,13,51,124,224,1,71,27,69,143,24,248,252,253,133,107,218,197,97,142,225,11,80,75,3,4,20,0,0,0,8,0,197,174,247,84,125,16,35,51,209,0,0,0,89,1,0,0,12,0,28,0,112,97,99,107,97,103,101,46,106,115,111,110,85,84,9,0,3,81,180,220,98,180,186,220,98,117,120,11,0,1,4,245,1,0,0,4,20,0,0,0,85,79,187,170,2,49,16,237,247,43,66,234,187,113,162,139,47,16,44,110,115,11,59,107,33,102,71,12,100,147,176,137,11,23,241,223,77,38,136,10,83,204,156,71,206,201,189,97,140,59,53,32,223,50,30,125,187,90,192,70,66,55,231,63,133,152,112,140,198,187,194,129,144,2,42,154,254,3,201,7,223,223,44,86,44,234,209,132,20,51,124,207,103,6,180,31,130,177,164,75,81,147,168,200,112,156,106,84,82,201,104,214,182,193,143,105,183,6,128,188,107,165,175,184,187,40,27,145,133,219,217,26,205,179,237,65,1,249,64,23,201,123,248,59,214,208,30,167,95,12,232,122,116,218,224,71,248,190,84,140,51,139,234,98,49,21,207,73,138,149,144,242,213,195,249,30,219,218,129,88,248,98,201,77,31,34,178,203,100,247,110,50,121,155,212,59,171,60,85,100,114,41,242,0,233,154,71,243,4,80,75,3,4,20,0,0,0,8,0,239,181,247,84,19,66,213,63,231,1,0,0,179,3,0,0,13,0,28,0,116,115,99,111,110,102,105,103,46,106,115,111,110,85,84,9,0,3,210,192,220,98,212,192,220,98,117,120,11,0,1,4,245,1,0,0,4,20,0,0,0,141,83,193,110,219,48,12,189,231,43,8,239,178,21,107,124,207,105,93,183,67,128,21,43,154,116,151,162,24,100,137,137,181,72,162,65,209,113,140,162,255,62,201,142,155,164,167,2,190,232,233,241,241,209,143,122,153,1,20,154,124,99,29,242,239,70,44,133,88,44,224,37,193,0,101,9,43,97,171,5,104,188,129,207,235,218,70,72,223,122,181,0,233,27,132,168,54,40,125,134,172,111,136,69,5,249,50,20,23,120,80,90,70,73,229,238,153,26,100,233,215,169,38,55,16,110,241,235,200,179,145,156,18,52,119,100,90,247,254,50,208,99,208,53,234,29,154,101,48,120,64,115,163,53,198,119,172,56,184,188,196,218,136,143,97,23,168,11,203,112,171,68,215,127,20,91,85,157,119,152,134,252,185,186,59,90,142,163,137,101,16,76,134,47,5,253,112,149,176,68,11,120,144,226,2,127,192,52,70,155,135,205,140,64,6,143,156,145,228,108,149,240,167,225,0,39,133,220,253,87,26,62,74,50,1,177,15,162,14,176,65,37,45,99,156,200,134,252,200,252,206,212,69,100,224,54,136,245,8,24,246,150,41,248,32,103,212,185,77,222,243,156,197,7,74,158,39,127,162,120,139,114,62,92,174,190,49,255,218,100,77,114,232,66,208,83,203,80,29,21,199,10,8,136,38,30,69,168,149,31,150,179,72,211,86,206,234,81,36,65,168,133,184,135,13,147,135,174,182,186,78,146,105,117,146,83,232,172,115,80,165,3,242,30,205,91,36,247,74,106,240,170,105,108,216,78,216,3,110,22,80,139,52,113,81,150,93,215,205,243,2,70,205,182,17,167,194,118,78,188,45,13,233,88,214,42,152,138,104,87,142,209,92,243,91,54,243,90,188,251,212,36,241,235,115,241,162,82,105,91,216,101,235,243,41,215,204,58,189,133,156,33,170,141,27,126,210,211,16,240,223,81,62,150,223,6,35,229,116,255,60,20,188,158,246,107,122,4,105,72,145,212,115,76,182,96,244,180,199,91,242,30,131,76,91,57,27,42,243,179,8,218,181,6,135,110,145,117,121,117,85,94,37,233,215,217,127,80,75,3,4,10,0,0,0,0,0,236,157,247,84,0,0,0,0,0,0,0,0,0,0,0,0,4,0,28,0,115,114,99,47,85,84,9,0,3,156,150,220,98,45,152,220,98,117,120,11,0,1,4,245,1,0,0,4,20,0,0,0,80,75,3,4,20,0,0,0,8,0,50,187,247,84,183,28,133,184,171,1,0,0,246,2,0,0,11,0,28,0,115,114,99,47,109,97,105,110,46,116,115,85,84,9,0,3,191,201,220,98,192,201,220,98,117,120,11,0,1,4,245,1,0,0,4,20,0,0,0,125,82,77,111,219,48,12,189,235,87,16,190,196,14,50,123,217,146,174,117,208,219,122,24,144,1,195,154,158,91,197,166,109,161,250,200,100,186,73,17,228,191,143,114,236,0,93,128,233,32,144,143,212,227,211,147,178,169,16,241,111,172,208,163,45,16,10,103,12,90,106,65,89,136,52,202,74,35,61,119,166,124,110,27,101,82,106,35,168,156,231,46,75,120,160,68,60,28,164,217,105,4,87,129,117,246,211,222,249,87,101,107,176,210,96,9,202,236,156,167,92,136,115,0,71,82,26,215,242,29,253,9,42,239,12,76,134,1,147,149,16,63,8,246,174,211,37,80,227,221,158,119,228,73,90,187,125,224,243,157,37,101,16,240,80,224,142,148,179,185,136,158,108,33,187,186,33,120,124,183,36,15,15,222,59,159,195,134,207,121,252,211,97,75,172,192,184,178,99,117,151,57,80,58,108,89,41,193,206,187,55,85,162,144,150,73,123,117,103,205,147,139,198,73,36,196,166,81,45,16,22,141,85,76,217,19,43,207,12,231,11,5,101,65,39,251,197,40,60,253,252,62,14,116,22,100,79,8,49,190,161,5,85,113,163,36,209,67,76,25,149,88,201,78,83,148,176,59,211,76,136,44,131,199,80,147,45,188,140,110,13,61,1,91,255,107,216,75,62,154,186,190,182,146,95,167,229,99,112,15,235,84,75,90,219,58,94,126,78,151,51,248,202,123,178,26,234,219,15,245,249,85,189,84,45,201,240,37,238,65,166,99,178,113,241,54,25,70,56,141,169,118,117,124,148,51,216,206,46,253,167,100,5,217,20,126,121,21,190,209,135,119,228,203,30,5,64,36,163,28,66,192,33,207,231,164,151,55,0,182,102,32,40,225,252,20,192,104,123,213,62,255,95,251,40,132,241,57,175,187,69,122,247,229,230,102,177,88,46,111,191,45,196,169,55,252,47,80,75,3,4,20,0,0,0,8,0,242,180,247,84,94,247,21,86,106,2,0,0,125,4,0,0,23,0,28,0,115,114,99,47,108,101,97,102,108,101,116,95,117,109,100,95,115,104,105,109,46,116,115,85,84,9,0,3,247,190,220,98,248,190,220,98,117,120,11,0,1,4,245,1,0,0,4,20,0,0,0,117,83,75,110,219,48,16,221,243,20,3,111,236,4,174,212,238,138,4,93,37,5,186,80,178,104,154,189,41,114,100,209,161,72,133,31,203,66,16,160,135,232,9,123,146,14,37,202,73,81,20,208,98,40,206,231,125,56,101,9,55,14,121,64,15,28,122,103,79,35,4,11,161,69,120,188,187,133,10,121,163,49,128,173,15,40,2,236,6,101,164,29,138,106,7,60,229,135,177,199,15,158,55,8,95,31,238,0,79,189,117,129,177,242,146,177,31,173,242,160,45,151,30,54,220,72,186,67,17,105,200,197,63,173,189,112,170,15,211,239,70,57,79,145,234,144,142,60,176,144,154,116,86,70,141,64,145,234,82,127,148,160,76,134,152,239,246,142,247,237,22,134,86,137,150,128,121,181,55,158,253,135,2,85,190,177,40,96,194,73,159,23,182,71,232,173,214,49,40,107,182,144,64,43,207,172,65,176,205,52,140,208,152,189,159,144,17,221,60,155,84,56,90,37,183,80,199,144,250,24,20,232,61,119,35,180,232,16,106,20,60,122,100,163,141,73,30,71,119,132,95,42,74,9,202,55,92,164,97,192,103,250,252,200,149,230,53,17,90,48,159,199,128,237,83,166,103,148,138,39,229,3,65,129,155,219,123,120,252,94,249,34,203,157,221,67,209,26,245,28,17,86,131,117,79,126,5,3,106,253,23,156,165,63,163,34,110,22,101,102,251,74,195,59,223,115,129,89,1,144,86,196,14,77,210,157,180,171,17,98,162,48,89,51,240,177,128,111,118,192,35,186,45,51,54,204,190,193,239,159,191,160,177,14,44,177,114,103,161,102,123,8,228,81,73,178,46,234,160,122,98,54,143,205,186,114,135,140,220,69,35,207,227,222,185,46,21,149,70,174,245,8,245,8,4,20,167,81,19,150,55,218,131,141,90,154,117,160,98,198,97,111,173,164,135,21,206,220,41,116,248,28,21,121,49,169,78,212,40,158,158,74,214,122,158,219,113,249,206,18,150,108,2,79,178,83,194,38,141,150,23,25,122,1,155,251,51,245,212,81,98,195,137,93,190,78,26,30,34,189,107,62,33,150,203,154,196,212,108,202,159,136,172,114,213,234,130,236,188,44,25,155,121,195,186,13,161,247,87,101,41,164,57,248,66,104,27,101,163,73,167,66,216,174,228,7,126,42,181,170,125,169,103,75,203,79,197,231,226,227,114,42,14,126,125,125,110,149,182,21,46,211,230,46,239,171,113,182,131,117,78,78,153,130,222,88,128,151,234,21,190,192,188,37,41,61,154,39,99,7,147,194,23,168,174,166,70,180,20,75,151,87,42,44,75,120,72,52,40,101,151,121,191,84,233,148,105,189,238,174,88,254,191,200,83,93,179,63,80,75,1,2,30,3,20,0,0,0,8,0,173,178,247,84,63,79,13,255,254,0,0,0,4,24,0,0,9,0,24,0,0,0,0,0,0,0,0,0,164,129,0,0,0,0,46,68,83,95,83,116,111,114,101,85,84,5,0,3,182,186,220,98,117,120,11,0,1,4,245,1,0,0,4,20,0,0,0,80,75,1,2,30,3,10,0,0,0,0,0,135,182,247,84,0,0,0,0,0,0,0,0,0,0,0,0,18,0,24,0,0,0,0,0,0,0,16,0,237,65,65,1,0,0,46,109,101,116,97,95,105,103,110,111,114,101,95,116,104,105,115,47,85,84,5,0,3,237,193,220,98,117,120,11,0,1,4,245,1,0,0,4,20,0,0,0,80,75,1,2,30,3,20,0,0,0,8,0,210,178,247,84,4,129,138,94,194,1,0,0,133,3,0,0,50,0,24,0,0,0,0,0,1,0,0,0,164,129,141,1,0,0,46,109,101,116,97,95,105,103,110,111,114,101,95,116,104,105,115,47,99,114,101,97,116,101,45,105,110,108,105,110,101,45,97,114,99,104,105,118,101,45,115,99,114,105,112,116,46,109,106,115,85,84,5,0,3,252,186,220,98,117,120,11,0,1,4,245,1,0,0,4,20,0,0,0,80,75,1,2,30,3,20,0,0,0,8,0,128,182,247,84,134,228,110,93,72,0,0,0,86,0,0,0,28,0,24,0,0,0,0,0,1,0,0,0,164,129,187,3,0,0,46,109,101,116,97,95,105,103,110,111,114,101,95,116,104,105,115,47,82,69,65,68,77,69,46,116,120,116,85,84,5,0,3,224,193,220,98,117,120,11,0,1,4,245,1,0,0,4,20,0,0,0,80,75,1,2,30,3,20,0,0,0,8,0,39,179,247,84,89,60,189,69,88,0,0,0,119,0,0,0,21,0,24,0,0,0,0,0,1,0,0,0,228,129,89,4,0,0,46,109,101,116,97,95,105,103,110,111,114,101,95,116,104,105,115,47,114,117,110,85,84,5,0,3,153,187,220,98,117,120,11,0,1,4,245,1,0,0,4,20,0,0,0,80,75,1,2,30,3,10,0,0,0,0,0,198,181,247,84,0,0,0,0,0,0,0,0,0,0,0,0,7,0,24,0,0,0,0,0,0,0,16,0,237,65,0,5,0,0,112,117,98,108,105,99,47,85,84,5,0,3,131,192,220,98,117,120,11,0,1,4,245,1,0,0,4,20,0,0,0,80,75,1,2,30,3,20,0,0,0,8,0,138,181,247,84,83,75,4,148,85,1,0,0,77,2,0,0,17,0,24,0,0,0,0,0,1,0,0,0,164,129,65,5,0,0,112,117,98,108,105,99,47,105,110,100,101,120,46,104,116,109,108,85,84,5,0,3,19,192,220,98,117,120,11,0,1,4,245,1,0,0,4,20,0,0,0,80,75,1,2,30,3,20,0,0,0,8,0,72,187,247,84,206,95,24,128,103,0,0,0,156,0,0,0,14,0,24,0,0,0,0,0,1,0,0,0,164,129,225,6,0,0,112,117,98,108,105,99,47,109,97,105,110,46,106,115,85,84,5,0,3,232,201,220,98,117,120,11,0,1,4,245,1,0,0,4,20,0,0,0,80,75,1,2,30,3,20,0,0,0,8,0,72,187,247,84,107,96,82,240,103,0,0,0,114,0,0,0,26,0,24,0,0,0,0,0,1,0,0,0,164,129,144,7,0,0,112,117,98,108,105,99,47,108,101,97,102,108,101,116,95,117,109,100,95,115,104,105,109,46,106,115,85,84,5,0,3,232,201,220,98,117,120,11,0,1,4,245,1,0,0,4,20,0,0,0,80,75,1,2,30,3,20,0,0,0,8,0,197,174,247,84,125,16,35,51,209,0,0,0,89,1,0,0,12,0,24,0,0,0,0,0,1,0,0,0,164,129,75,8,0,0,112,97,99,107,97,103,101,46,106,115,111,110,85,84,5,0,3,81,180,220,98,117,120,11,0,1,4,245,1,0,0,4,20,0,0,0,80,75,1,2,30,3,20,0,0,0,8,0,239,181,247,84,19,66,213,63,231,1,0,0,179,3,0,0,13,0,24,0,0,0,0,0,1,0,0,0,164,129,98,9,0,0,116,115,99,111,110,102,105,103,46,106,115,111,110,85,84,5,0,3,210,192,220,98,117,120,11,0,1,4,245,1,0,0,4,20,0,0,0,80,75,1,2,30,3,10,0,0,0,0,0,236,157,247,84,0,0,0,0,0,0,0,0,0,0,0,0,4,0,24,0,0,0,0,0,0,0,16,0,237,65,144,11,0,0,115,114,99,47,85,84,5,0,3,156,150,220,98,117,120,11,0,1,4,245,1,0,0,4,20,0,0,0,80,75,1,2,30,3,20,0,0,0,8,0,50,187,247,84,183,28,133,184,171,1,0,0,246,2,0,0,11,0,24,0,0,0,0,0,1,0,0,0,164,129,206,11,0,0,115,114,99,47,109,97,105,110,46,116,115,85,84,5,0,3,191,201,220,98,117,120,11,0,1,4,245,1,0,0,4,20,0,0,0,80,75,1,2,30,3,20,0,0,0,8,0,242,180,247,84,94,247,21,86,106,2,0,0,125,4,0,0,23,0,24,0,0,0,0,0,1,0,0,0,164,129,190,13,0,0,115,114,99,47,108,101,97,102,108,101,116,95,117,109,100,95,115,104,105,109,46,116,115,85,84,5,0,3,247,190,220,98,117,120,11,0,1,4,245,1,0,0,4,20,0,0,0,80,75,5,6,0,0,0,0,14,0,14,0,209,4,0,0,121,16,0,0,0,0]),
"so-73091042.zip",
"application/zip",
);
Example
This example will be served using a static file server from the ./public directory, and the entrypoint html file is here:
./public/index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Stack Overflow 73091042</title>
<!-- First, define an import map for the "leaflet" module specifier
which points to the UMD-to-ESM shim module: -->
<script type="importmap">
{
"imports": {
"leaflet": "/leaflet_umd_shim.js"
}
}
</script>
<!-- Then, import the entrypoint module: -->
<script type="module" src="/main.js"></script>
</head>
<body>
<h1>See console output</h1>
</body>
</html>
Nothing special there except maybe the import map if you aren't familiar: WICG/import-maps: How to control the behavior of JavaScript imports
Next, there are two TypeScript source files in the ./src directory which are transpiled to JavaScript and copied into the ./public directory during compilation.
The first is a shim:
./src/leaflet_umd_shim.ts:
// Creates a proxy to the UMD Leaflet object `window.L` as a type-safe ESM export
/*
This loads (and executes) the UMD Leaflet script the first time that
this module is imported into the module graph, which assigns
the UMD Leaflet object to `window.L`. This is scope pollution, and is
one of the things that ES modules avoid, but is necessary here because
you expressed dissatisfaction at the available Leaflet ES module options
at existing CDN URLs.
This proxy technique "works" well here because Leaflet
is an object export/namspace and is documented to be used this way. However,
note that — for other modules which provide multiple exports that are
intended to be imported individually by name — this technique wouldn't be
a good fit because it requires the entire UMD module to be made available
on a single (named) export. (Note that the default export is just a named export
using the name "default").
*/
import 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.8.0/leaflet.js';
import type * as Leaflet from 'leaflet';
const {L} = window as unknown as { L: typeof Leaflet };
// Same as `export {L as default}`:
export default L;
The "leaflet" import specifier in the import map is bound to the location of the JavaScript module produced by this file during compilation.
That specifier is used in the entrypoint module:
./src/main.ts:
/*
(Reference comments in "leaflet_umd_shim.ts" for context)
Example of non-working named import:
import {tileLayer} from 'leaflet';
It would throw the following runtime exception:
"Uncaught SyntaxError: The requested module 'leaflet' does not provide
an export named 'tileLayer'"
This technique requires importing the entire UMD module on a name (even if that
name is "default"):
*/
// Same as `import {default as L} from 'leaflet'`:
import L from 'leaflet';
const a = L.latLng(50.5, 30.5);
const b = L.latLng(51.5, 30.5);
const distance = a.distanceTo(b);
console.log({a, b, distance}); /* Prints the following:
{
"a": {
"lat": 50.5,
"lng": 30.5
},
"b": {
"lat": 51.5,
"lng": 30.5
},
"distance": 111194.92664455874
}
*/
When you serve this site on a local http server and access the HTML file, the main module will execute and print that information to the console using those methods from Leaflet to create the data that is logged, proving that this technique works.
Here's my TSConfig:
./tsconfig.json:
{
"compilerOptions": {
// Strict options (This is TS: type safety is important)
"exactOptionalPropertyTypes": true,
"isolatedModules": true,
"noUncheckedIndexedAccess": true,
"strict": true,
"useUnknownInCatchVariables": true,
// ESM
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "nodenext",
"lib": [
"esnext", // Latest ES syntax features
"dom", // Browser runtime environmnt
"dom.iterable" // Browser runtime environmnt
],
"target": "esnext", // Adjust this to your browser target needs
"outDir": "public", // Directory from which the site will be served
// Path mapping
// Ref: https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping
"baseUrl": ".",
"paths": {
"leaflet": ["node_modules/#types/leaflet"]
},
// Optional settings
"removeComments": true
},
"include": ["src/**/*"]
}
And, lastly, here's the npm package file:
./package.json:
{
"name": "so-73091042",
"version": "0.1.0",
"type": "module",
"scripts": {
"compile": "tsc",
"serve": "static --port=8000 --cache=false public"
},
"license": "MIT",
"devDependencies": {
"#types/leaflet": "^1.7.11",
"node-static": "^0.7.11",
"typescript": "^4.7.4"
},
"volta": {
"node": "16.16.0"
}
}
You can ignore the volta property: it just shows that I was using Volta and the version of Node that I had installed when creating this repository example.
The node-static dependency is the package recommended by the official Node.js website for serving static files in the article How to serve static files | Node.js.
First use npm install to install the dependencies:
% npm install
added 9 packages, and audited 10 packages in 4s
Then — to compile the TS files and emit them — use npm run compile:
% npm run compile
> so-73091042#0.1.0 compile
> tsc
There should now be two new files in the ./public directory after compilation:
./public/leaflet_umd_shim.js:
import 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.8.0/leaflet.js';
const { L } = window;
export default L;
./public/main.js:
import L from 'leaflet';
const a = L.latLng(50.5, 30.5);
const b = L.latLng(51.5, 30.5);
const distance = a.distanceTo(b);
console.log({ a, b, distance });
Now everything is ready to be served by the static file server, so use the command npm run serve:
% npm run serve
> so-73091042#0.1.0 serve
> static --port=8000 --cache=false public
serving "public" at http://127.0.0.1:8000
If you navigate to http://127.0.0.1:8000 in your browser (this is the same as http://localhost:8000), you'll see the index page with the text "See console output", and if you look at your browser's JS console, you'll see a representation of the object data that was logged to the console in the main.js module.
When you're ready to stop the server, just use ctrl + c in your terminal
And that's it!

How to import a js file to another js in html project [duplicate]

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:
<link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/css/main.css">
<script src="https://js.arcgis.com/4.12/"></script>
<script type="module" src="milsymbol-2.0.0/src/milsymbol.js"></script>
<script>
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
});
});
</script>
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 };

Update For Node.js / NPM
Add "type": "module" to your package.json file.
{
// ...
"type": "module",
// ...
}
Note: When using modules, if you get ReferenceError: require is not defined, you'll need to use the import syntax instead of require. You can't natively mix and match between them, so you'll need to pick one or use a bundler if you need to use both.

I got this error because I forgot the type="module" inside the script tag:
<script type="module" src="milsymbol-2.0.0/src/milsymbol.js"></script>

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.

I resolved my case by replacing "import" by "require".
// import { parse } from 'node-html-parser';
const parse = require('node-html-parser');

I was also facing the same issue until I added the type="module" to the script.
Before it was like this
<script src="../src/main.js"></script>
And after changing it to
<script type="module" src="../src/main.js"></script>
It worked perfectly.

There are several common ways to resolve the conflict associated with the above issue
1. The first: In the script, include type=module
<script type="module" src="milsymbol-2.0.0/src/milsymbol.js"></script>
2. The second: In node.js, into your package.json file
{
"type": "module",
}
Restart the project npm start
3. The third: replace import by required
Try this
import { parse } from 'node-html-parser';
parse = require('node-html-parser');
Else try this
//import { parse } from 'node-html-parser';
parse = require('node-html-parser');

Applicable for node 12. This answer is no longer maintained for new node versions. Feel free to comment solutions for more recent versions.
I solved this issue by doing the following:
When using ECMAScript 6 modules from the browser, use the .js extension in your files, and in the script tag add type = "module".
When using ECMAScript 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
Edit: This was written when node12 was the latest LTS, this does not apply to node 14 LTS.

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="module" 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.:
<!DOCTYPE html><html><body>
<script type="module" src="test.js"></script><!-- Here use type="module" rather than type="text/javascript" -->
</body></html>
test.js:
import {a} from "./module.js";
alert(a);
You can also use it in an internal script, eg.:
<!DOCTYPE html><html><body>
<script type="module">
import {a} from "./module.js";
alert(a);
</script>
</body></html>
It is worthwhile mentioning that for relative paths, you must not omit the "./" characters, ie.:
import {a} from "module.js"; // this won't work

For me, it was caused by not referencing a library (specifically typeORM, using the ormconfig.js file, under the entities key) to the src folder, instead of the dist folder...
"entities": [
"src/db/entity/**/*.ts", // Pay attention to "src" and "ts" (this is wrong)
],
instead of
"entities": [
"dist/db/entity/**/*.js", // Pay attention to "dist" and "js" (this is the correct way)
],

If you want to use import instead of require() for modules, change or add the value of type to module in package.json file
Example:
package.json file
{
"name": "appsample",
"version": "1.0.0",
"type": "module",
"description": "Learning Node",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Chikeluba Anusionwu",
"license": "ISC"
}
import http from 'http';
var host = '127.0.0.1',
port = 1992,
server = http.createServer();
server.on('request', (req, res) => {
res.writeHead(200, {"Content-Type": "text/plain"});
res.end("I am using type module in package.json file in this application.");
});
server.listen(port, () => console.log(
'Listening to server ${port}. Connection has been established.'));

I got this error in React and fixed it with the following steps:
Go to the project root directory, and open the Package.json file for editing.
Add "type":"module";
Save it and restart the server.

Add "type": "module", to your package.json file.
And restart your application:
npm start
Then your problem is solved.

I'm coding on vanilla JavaScript. If you're doing same, simply add a type="module" to your script tag.
That is, previous code:
<script src="./index.js"></script>
Updated code:
<script type="module" src="./index.js"></script>`

Why this occurs and more possible causes:
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 set up 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.

For me this helped:
In the .ts file I used: import prompts from "prompts";
And used "module": "commonjs" in file tsconfig.json

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.

Use this code. It worked well for me:
Add this script tag to file index.html:
<script type="module">
import { ms } from "./ms.js";
import Symbol from "./ms/symbol.js";
</script>

I ran into this error while trying to use import Express.js.
Instead of   import express from 'express';
I used   const express = require('express');

I have faced the same error by EXPO.
Mainly the solution is that to add "type": "module", in the package.json file.
However, you have to check that which is your correct package.json.
In my case, there are two package.json files, then you should add that to the server file.
To identify which is correct package.json, find "scripts": { "test": "echo \"Error: no test specified\" && exit 1" },
Below ↑　this line, add "type": "module",

None of the provided answers worked for me, but I found a different solution from: How to enable ECMAScript 6 imports in Node.js
Install ESM:
npm install --save esm
Run with ESM:
node -r esm server.js

In my case, I updated
"lib": [
"es2020",
"dom"
]
with
"lib": [
"es2016",
"dom"
]
in my tsconfig.json file.

I had to import some data from an external file (JavaScript file), to my script.js file present in my HTML file.
File data.js
const data = {a: 1, b: 2}
By adding type=module I got CORS error.
I found out that I can import file data.js into my script.js file just by including file data.js inside my HTML file.
For example, previously my HTML file consists of
<script src="assets/script.js"></script>
As I required some data from file data.js, I just changed my HTML file to:
<script src="assets/data.js"></script>
<script src="assets/script.js"></script>
I.e., include file data.js before file script.js, giving access to my data variable inside file script.js.

I just added "type": "module" to my Package.json file and it worked for me.

I thought I would add this note because it was not apparently obvious to me. You need to add type="module" to all script includes, not just the one you want to use for your utility file.
index.html:
<script type="module" src="js/controllers/utils.js"></script>
<script type="module" src="js/controllers/main.js"></script>`
main.js:
import myFunction from './utils.js
utils.js:
export default myFunction

if you want to import functions from module.
let's say, main.js has func1 and func2 defined, and you want to import those to function to a new module say, test.js
Below will solve the problem.
main.js:
const func1 = () => {console.log('do sth in func1')};
const func2 = () => {console.log('do sth in func2')};
//at the end of module
//export specific functions here
module.exports = { func1, func2 };
test.js :
// import them here
const{ func1, func2} = require('./main.js');
func1();
func2();

Well, in my case, I didn't want to update my package.json file and change the file type to mjs.
So I was looking around and found out that changing the module in file tsconfig.json affected the result. My ts.config file was:
{
"compilerOptions": {
"target": "es2020",
"module": "es2020",
"lib": [
"es2020",
],
"skipLibCheck": true,
"sourceMap": true,
"outDir": "./dist",
"moduleResolution": "node",
"removeComments": true,
"noImplicitAny": true,
"strictNullChecks": true,
"strictFunctionTypes": true,
"noImplicitThis": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"resolveJsonModule": true,
"baseUrl": "."
},
"exclude": [
"node_modules"
],
"include": [
"./src/**/*.ts"
]
}
Like this and changing the module from "module": "es2020" to "module" : "commonjs" solved my issue.
I was using MikroORM and thought maybe it doesn't support any module above CommonJS.

It's because you haven't exported. The .ts file requires an export class format, whereas in a .js file we would use the exports function.
So, we have to use var_name = require("<pathfile>") to use those file functions.

Use
<script type="module" src="/src/moduleA.js"></script>
instead of
<script>System.import("/src/moduleA.js")</script>

For me it was a compilation problem. I've added
"devDependencies": {
...
"#babel/cli": "^7.7.5",
"#babel/core": "^7.7.5",
"#babel/node": "^7.7.4",
"#babel/plugin-proposal-class-properties": "^7.7.4",
"#babel/plugin-transform-instanceof": "^7.8.3",
"#babel/plugin-transform-runtime": "^7.7.6",
"#babel/preset-env": "^7.7.5",
"#babel/register": "^7.7.4",
"#babel/runtime": "^7.9.6"
},
"dependencies": {
...
"#babel/plugin-transform-classes": "^7.15.4"
},
added .babelrc file
{
"plugins": [
"#babel/plugin-proposal-class-properties",
"#babel/plugin-transform-instanceof",
"#babel/plugin-transform-classes"
],
"presets": ["#babel/preset-env"],
"env": {
"test": {
"plugins": ["#babel/plugin-transform-runtime"]
}
}
}

Just add .pack between the name and the extension in the <script> tag in src.
I.e.:
<script src="name.pack.js">
// Code here
</script>

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

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:
<link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/css/main.css">
<script src="https://js.arcgis.com/4.12/"></script>
<script type="module" src="milsymbol-2.0.0/src/milsymbol.js"></script>
<script>
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
});
});
</script>
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 };

Update For Node.js / NPM
Add "type": "module" to your package.json file.
{
// ...
"type": "module",
// ...
}
Note: When using modules, if you get ReferenceError: require is not defined, you'll need to use the import syntax instead of require. You can't natively mix and match between them, so you'll need to pick one or use a bundler if you need to use both.

I got this error because I forgot the type="module" inside the script tag:
<script type="module" src="milsymbol-2.0.0/src/milsymbol.js"></script>

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.

I resolved my case by replacing "import" by "require".
// import { parse } from 'node-html-parser';
const parse = require('node-html-parser');

I was also facing the same issue until I added the type="module" to the script.
Before it was like this
<script src="../src/main.js"></script>
And after changing it to
<script type="module" src="../src/main.js"></script>
It worked perfectly.

There are several common ways to resolve the conflict associated with the above issue
1. The first: In the script, include type=module
<script type="module" src="milsymbol-2.0.0/src/milsymbol.js"></script>
2. The second: In node.js, into your package.json file
{
"type": "module",
}
Restart the project npm start
3. The third: replace import by required
Try this
import { parse } from 'node-html-parser';
parse = require('node-html-parser');
Else try this
//import { parse } from 'node-html-parser';
parse = require('node-html-parser');

Applicable for node 12. This answer is no longer maintained for new node versions. Feel free to comment solutions for more recent versions.
I solved this issue by doing the following:
When using ECMAScript 6 modules from the browser, use the .js extension in your files, and in the script tag add type = "module".
When using ECMAScript 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
Edit: This was written when node12 was the latest LTS, this does not apply to node 14 LTS.

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="module" 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.:
<!DOCTYPE html><html><body>
<script type="module" src="test.js"></script><!-- Here use type="module" rather than type="text/javascript" -->
</body></html>
test.js:
import {a} from "./module.js";
alert(a);
You can also use it in an internal script, eg.:
<!DOCTYPE html><html><body>
<script type="module">
import {a} from "./module.js";
alert(a);
</script>
</body></html>
It is worthwhile mentioning that for relative paths, you must not omit the "./" characters, ie.:
import {a} from "module.js"; // this won't work

For me, it was caused by not referencing a library (specifically typeORM, using the ormconfig.js file, under the entities key) to the src folder, instead of the dist folder...
"entities": [
"src/db/entity/**/*.ts", // Pay attention to "src" and "ts" (this is wrong)
],
instead of
"entities": [
"dist/db/entity/**/*.js", // Pay attention to "dist" and "js" (this is the correct way)
],

If you want to use import instead of require() for modules, change or add the value of type to module in package.json file
Example:
package.json file
{
"name": "appsample",
"version": "1.0.0",
"type": "module",
"description": "Learning Node",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Chikeluba Anusionwu",
"license": "ISC"
}
import http from 'http';
var host = '127.0.0.1',
port = 1992,
server = http.createServer();
server.on('request', (req, res) => {
res.writeHead(200, {"Content-Type": "text/plain"});
res.end("I am using type module in package.json file in this application.");
});
server.listen(port, () => console.log(
'Listening to server ${port}. Connection has been established.'));

I got this error in React and fixed it with the following steps:
Go to the project root directory, and open the Package.json file for editing.
Add "type":"module";
Save it and restart the server.

Add "type": "module", to your package.json file.
And restart your application:
npm start
Then your problem is solved.

I'm coding on vanilla JavaScript. If you're doing same, simply add a type="module" to your script tag.
That is, previous code:
<script src="./index.js"></script>
Updated code:
<script type="module" src="./index.js"></script>`

Why this occurs and more possible causes:
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 set up 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.

For me this helped:
In the .ts file I used: import prompts from "prompts";
And used "module": "commonjs" in file tsconfig.json

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.

Use this code. It worked well for me:
Add this script tag to file index.html:
<script type="module">
import { ms } from "./ms.js";
import Symbol from "./ms/symbol.js";
</script>

I ran into this error while trying to use import Express.js.
Instead of   import express from 'express';
I used   const express = require('express');

I have faced the same error by EXPO.
Mainly the solution is that to add "type": "module", in the package.json file.
However, you have to check that which is your correct package.json.
In my case, there are two package.json files, then you should add that to the server file.
To identify which is correct package.json, find "scripts": { "test": "echo \"Error: no test specified\" && exit 1" },
Below ↑　this line, add "type": "module",

None of the provided answers worked for me, but I found a different solution from: How to enable ECMAScript 6 imports in Node.js
Install ESM:
npm install --save esm
Run with ESM:
node -r esm server.js

In my case, I updated
"lib": [
"es2020",
"dom"
]
with
"lib": [
"es2016",
"dom"
]
in my tsconfig.json file.

I had to import some data from an external file (JavaScript file), to my script.js file present in my HTML file.
File data.js
const data = {a: 1, b: 2}
By adding type=module I got CORS error.
I found out that I can import file data.js into my script.js file just by including file data.js inside my HTML file.
For example, previously my HTML file consists of
<script src="assets/script.js"></script>
As I required some data from file data.js, I just changed my HTML file to:
<script src="assets/data.js"></script>
<script src="assets/script.js"></script>
I.e., include file data.js before file script.js, giving access to my data variable inside file script.js.

I just added "type": "module" to my Package.json file and it worked for me.

I thought I would add this note because it was not apparently obvious to me. You need to add type="module" to all script includes, not just the one you want to use for your utility file.
index.html:
<script type="module" src="js/controllers/utils.js"></script>
<script type="module" src="js/controllers/main.js"></script>`
main.js:
import myFunction from './utils.js
utils.js:
export default myFunction

if you want to import functions from module.
let's say, main.js has func1 and func2 defined, and you want to import those to function to a new module say, test.js
Below will solve the problem.
main.js:
const func1 = () => {console.log('do sth in func1')};
const func2 = () => {console.log('do sth in func2')};
//at the end of module
//export specific functions here
module.exports = { func1, func2 };
test.js :
// import them here
const{ func1, func2} = require('./main.js');
func1();
func2();

Well, in my case, I didn't want to update my package.json file and change the file type to mjs.
So I was looking around and found out that changing the module in file tsconfig.json affected the result. My ts.config file was:
{
"compilerOptions": {
"target": "es2020",
"module": "es2020",
"lib": [
"es2020",
],
"skipLibCheck": true,
"sourceMap": true,
"outDir": "./dist",
"moduleResolution": "node",
"removeComments": true,
"noImplicitAny": true,
"strictNullChecks": true,
"strictFunctionTypes": true,
"noImplicitThis": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"resolveJsonModule": true,
"baseUrl": "."
},
"exclude": [
"node_modules"
],
"include": [
"./src/**/*.ts"
]
}
Like this and changing the module from "module": "es2020" to "module" : "commonjs" solved my issue.
I was using MikroORM and thought maybe it doesn't support any module above CommonJS.

It's because you haven't exported. The .ts file requires an export class format, whereas in a .js file we would use the exports function.
So, we have to use var_name = require("<pathfile>") to use those file functions.

Use
<script type="module" src="/src/moduleA.js"></script>
instead of
<script>System.import("/src/moduleA.js")</script>

For me it was a compilation problem. I've added
"devDependencies": {
...
"#babel/cli": "^7.7.5",
"#babel/core": "^7.7.5",
"#babel/node": "^7.7.4",
"#babel/plugin-proposal-class-properties": "^7.7.4",
"#babel/plugin-transform-instanceof": "^7.8.3",
"#babel/plugin-transform-runtime": "^7.7.6",
"#babel/preset-env": "^7.7.5",
"#babel/register": "^7.7.4",
"#babel/runtime": "^7.9.6"
},
"dependencies": {
...
"#babel/plugin-transform-classes": "^7.15.4"
},
added .babelrc file
{
"plugins": [
"#babel/plugin-proposal-class-properties",
"#babel/plugin-transform-instanceof",
"#babel/plugin-transform-classes"
],
"presets": ["#babel/preset-env"],
"env": {
"test": {
"plugins": ["#babel/plugin-transform-runtime"]
}
}
}

Just add .pack between the name and the extension in the <script> tag in src.
I.e.:
<script src="name.pack.js">
// Code here
</script>