We Keep Coding

Uncaught SyntaxError: Cannot use import statement outside a module in Redux [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>

How do I create an object in Javascript if it's of type Interface? [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>

I am getting "Uncaught SyntaxError: Cannot use import statement outside a module" although i have script type="module" in my html file [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>

Cannot use import statement outside a module javascript error [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>

How do I import libraries in TypeScript in general?

I'm new to TypeScript and just digging into that rabbit hole. I think, I understand the concept so far but what I don't understand is how I finally make use of libraries (in my case D3 for manipulating SVG DOM). In vanilla Javascript I simply did it the old-fashion way by including the library and my main.js script one after another but as my project grows I want to use the advantages of TypeScript with a modular aproach.
Current issue is this browser error (Chrome):
Uncaught TypeError: Failed to resolve module specifier "d3". Relative references must start with either "/", "./", or "../"
Well, I know it points to my import statement but I cannot figure out how to solve it.
tsconfig.json
{
"compilerOptions": {
"target": "ES5",'ESNEXT'. */
"module": "ESNext",
"declaration": true,
"outDir": "./dist/fgn/",
"rootDir": "./src/fgn/",
"strict": true,
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"skipLibCheck": true, // required to avoid checking d3 type definitions
"forceConsistentCasingInFileNames": true
}
// ,"files": [],
// "include": [],
// "exclude": []
}
index.html (excerpt)
<head>
<script src="../dist/fgn/fgn.js" type="module"></script>
</head>
<body>
<button id="testButton" onClick="unreachableFoo();">Test Script</button>
</body>
./src/fgn/fgn.ts
/* Assuming I want to use the whole library. That's how it is documented by Mike Bostock.
However, this import statement throws an error in the browser (tested in Chrome, Firefox)
when being transpiled to javascript */
import * as d3 from "d3"; // points to '[root]/node_modules/#types/d3' (index.d.ts)
console.log('script is running...');
// This is the desired functionality I want to gain: having access to d3 from global namespace (globalThis ?)
d3.select('#testButton').on('click', () => {alert('button clicked!');});
// Also this is not working. The browser complains the function is not defined.
function unreachableFoo() { console.log('foo'); }
I have tried multiple tsconfig setups and changed the import to point to the "[root]/node_modules/d3/" (index.js) while enabling "allowJs" in tsconfig but this led to further issues as tsc somehow included the node_modules/#types/ path causing a mess-up and errors with the declaration files there.
Another attempt was to using webpack, setting up the package.json and building up the dependencies from there. Maybe I am on the right track with that but the browser error was still there.
What am I missing?

Welcome! The D3 documentation is going to be a little tougher to follow because it is using the import statement for JS and not TS. Try switching your import statement to
import { *desired methods* } from 'd3'; // there is no default d3 export
You will want to also undo your changes to your tsconfig.

Got it,
I simply missed the step of browserify. Instead of webpack, I am now using Rollup. For anyone encountering similar difficulties to getting started on that topic, here are some good explanations (take time to follow each):
How to Setup a TypeScript project using Rollup.js -- Rollup installation and required tsconfig.json setup; not all of the proposed installs are required, though.
Missing global variable names #162 -- rollup.config.js setup
#rollup/plugin-node-resolve -- usage of this plugin, in addition
Official rollup.js documentation -- RTFM
However, the Rollup specific fields in the rollup.config.js have changed over time, e.g. the 'entry' attribute was renamed to 'input'. Here's my current config following the above tutorials:
/* buil-in */
import resolve from '#rollup/plugin-node-resolve';
/* Install both plugins:
npm i #rollup/plugin-babel #rollup/plugin-commonjs --save-dev
*/
import commonjs from '#rollup/plugin-commonjs';
import babel from '#rollup/plugin-babel';
export default [
{
input: 'src/scripts/main.js', // change this accordingly
plugins: [
resolve({
jsnext: true,
main: true,
browser:true,
}),
commonjs(),
babel({
exclude: 'node_modules/**',
})
],
output: {
name: 'main',
file: 'public/scripts/main.js', // change this accordingly
/* format: 'iife' wraps everything into a self-executing function
(function () { ... }());
*/
format: 'iife' // or 'cjs'
}
}
];
This does not yet minify the code, though. It's just a development setup but you can add a production one as well.
package.json build script
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "tsc -b && rollup -c rollup.config.js"
}