jsops: migrate to ESM from CJM (#228)

* jsops: migrate to ESM from CJM

* rm unused code

* fix ci

package.json

@@ -1,6 +1,7 @@
 {
   "name": "codex.docs",
   "license": "Apache-2.0",
+  "type": "module",
   "browserslist": [
     "last 2 versions",
     "> 1%"
@@ -12,7 +13,7 @@
     "build-frontend": "webpack --mode=production",
     "build-frontend:dev": "webpack --mode=development --watch",
     "test:js": "cross-env NODE_ENV=testing mocha --recursive ./dist/test --exit",
-    "test": "cross-env NODE_ENV=testing ts-mocha ./src/test/*.ts ./src/test/**/*.ts --exit",
+    "test": "cross-env NODE_ENV=testing ts-mocha -n loader=ts-node/esm ./src/test/*.ts ./src/test/**/*.ts --exit ",
     "lint": "eslint --fix --ext .ts ./src/backend",
     "editor-upgrade": "yarn add -D @editorjs/{editorjs,header,code,delimiter,list,link,image,table,inline-code,marker,warning,checklist,raw}@latest"
   },
@@ -34,7 +35,7 @@
     "multer": "^1.4.2",
     "nedb": "^1.8.0",
     "node-cache": "^5.1.2",
-    "node-fetch": "^2.6.1",
+    "node-fetch": "^3.2.10",
     "open-graph-scraper": "^4.9.0",
     "twig": "^1.15.4",
     "uuid4": "^2.0.2"
@@ -98,7 +99,7 @@
     "eslint-plugin-node": "^11.1.0",
     "highlight.js": "^11.1.0",
     "mini-css-extract-plugin": "^2.6.0",
-    "mocha": "^5.2.0",
+    "mocha": "^10.0.0",
     "mocha-sinon": "^2.1.2",
     "module-dispatcher": "^2.0.0",
     "normalize.css": "^8.0.1",
@@ -118,10 +119,10 @@
     "postcss-nesting": "^10.1.3",
     "postcss-smart-import": "^0.7.6",
     "rimraf": "^3.0.2",
-    "sinon": "^11.1.2",
-    "ts-mocha": "^8.0.0",
-    "ts-node": "^10.1.0",
-    "typescript": "^4.3.5",
+    "sinon": "^14.0.0",
+    "ts-mocha": "^10.0.0",
+    "ts-node": "^10.9.1",
+    "typescript": "^4.7.4",
     "webpack": "^5.70.0",
     "webpack-cli": "^4.9.2"
   }

src/backend/app.ts

@@ -1,17 +1,24 @@
 import express, { NextFunction, Request, Response } from 'express';
 import path from 'path';
+import { fileURLToPath } from 'url';
 import cookieParser from 'cookie-parser';
 import morgan from 'morgan';
-import rcParser from './utils/rcparser';
-import routes from './routes';
-import HttpException from './exceptions/httpException';
+import rcParser from './utils/rcparser.js';
+import routes from './routes/index.js';
+import HttpException from './exceptions/httpException.js';
 import * as dotenv from 'dotenv';
 import config from 'config';
-import HawkCatcher from '@hawk.so/nodejs';
+import { default as HawkCatcher } from '@hawk.so/nodejs';
 import os from 'os';
 import appConfig from 'config';
-import { downloadFavicon, FaviconData } from './utils/downloadFavicon';
+import { downloadFavicon, FaviconData } from './utils/downloadFavicon.js';
 
+/**
+ * The __dirname CommonJS variables are not available in ES modules.
+ * https://nodejs.org/api/esm.html#no-__filename-or-__dirname
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 dotenv.config();
 const app = express();
@@ -34,7 +41,7 @@ if (process.env.HAWK_TOKEN_CLIENT) {
 // view engine setup
 app.set('views', path.join(__dirname, './', 'views'));
 app.set('view engine', 'twig');
-require('./utils/twig');
+import('./utils/twig.js');
 
 const downloadedFaviconFolder = os.tmpdir();
 

src/backend/controllers/aliases.ts

@@ -1,4 +1,4 @@
-import Alias from '../models/alias';
+import Alias from '../models/alias.js';
 
 /**
  * @class Aliases

src/backend/controllers/pages.ts

@@ -1,9 +1,9 @@
-import Page, { PageData } from '../models/page';
-import Alias from '../models/alias';
-import PagesOrder from './pagesOrder';
-import PageOrder from '../models/pageOrder';
-import HttpException from '../exceptions/httpException';
-import PagesFlatArray from '../models/pagesFlatArray';
+import Page, { PageData } from '../models/page.js';
+import Alias from '../models/alias.js';
+import PagesOrder from './pagesOrder.js';
+import PageOrder from '../models/pageOrder.js';
+import HttpException from '../exceptions/httpException.js';
+import PagesFlatArray from '../models/pagesFlatArray.js';
 
 type PageDataFields = keyof PageData;
 

src/backend/controllers/pagesOrder.ts

@@ -1,6 +1,6 @@
-import PageOrder from '../models/pageOrder';
-import Page from '../models/page';
-import PagesFlatArray from '../models/pagesFlatArray';
+import PageOrder from '../models/pageOrder.js';
+import Page from '../models/page.js';
+import PagesFlatArray from '../models/pagesFlatArray.js';
 
 /**
  * @class PagesOrder

src/backend/controllers/transport.ts

@@ -3,9 +3,9 @@ import fetch from 'node-fetch';
 import fs from 'fs';
 import nodePath from 'path';
 import config from 'config';
-import File, { FileData } from '../models/file';
-import crypto from '../utils/crypto';
-import deepMerge from '../utils/objects';
+import File, { FileData } from '../models/file.js';
+import crypto from '../utils/crypto.js';
+import deepMerge from '../utils/objects.js';
 
 const random16 = crypto.random16;
 

src/backend/models/alias.ts

@@ -1,5 +1,5 @@
-import crypto from '../utils/crypto';
-import database from '../utils/database/index';
+import crypto from '../utils/crypto.js';
+import database from '../utils/database/index.js';
 
 const binaryMD5 = crypto.binaryMD5;
 const aliasesDb = database['aliases'];

src/backend/models/file.ts

@@ -1,4 +1,4 @@
-import database from '../utils/database/index';
+import database from '../utils/database/index.js';
 
 const filesDb = database['files'];
 

src/backend/models/page.ts

@@ -1,5 +1,5 @@
-import urlify from '../utils/urlify';
-import database from '../utils/database/index';
+import urlify from '../utils/urlify.js';
+import database from '../utils/database/index.js';
 
 const pagesDb = database['pages'];
 

src/backend/models/pageOrder.ts

@@ -1,4 +1,4 @@
-import database from '../utils/database/index';
+import database from '../utils/database/index.js';
 
 const db = database['pagesOrder'];
 

src/backend/models/pagesFlatArray.ts

@@ -1,5 +1,5 @@
-import Page from './page';
-import PageOrder from './pageOrder';
+import Page from './page.js';
+import PageOrder from './pageOrder.js';
 import NodeCache from 'node-cache';
 
 // Create cache for flat array

src/backend/routes/aliases.ts

@@ -1,9 +1,9 @@
 import express, { Request, Response } from 'express';
-import Aliases from '../controllers/aliases';
-import Pages from '../controllers/pages';
-import Alias from '../models/alias';
-import verifyToken from './middlewares/token';
-import PagesFlatArray from '../models/pagesFlatArray';
+import Aliases from '../controllers/aliases.js';
+import Pages from '../controllers/pages.js';
+import Alias from '../models/alias.js';
+import verifyToken from './middlewares/token.js';
+import PagesFlatArray from '../models/pagesFlatArray.js';
 
 const router = express.Router();
 

src/backend/routes/api/index.ts

@@ -1,7 +1,7 @@
 import express from 'express';
-import pagesAPI from './pages';
-import transportAPI from './transport';
-import linksAPI from './links';
+import pagesAPI from './pages.js';
+import transportAPI from './transport.js';
+import linksAPI from './links.js';
 
 const router = express.Router();
 

src/backend/routes/api/pages.ts

@@ -1,7 +1,7 @@
 import express, { Request, Response } from 'express';
 import multerFunc from 'multer';
-import Pages from '../../controllers/pages';
-import PagesOrder from '../../controllers/pagesOrder';
+import Pages from '../../controllers/pages.js';
+import PagesOrder from '../../controllers/pagesOrder.js';
 
 const router = express.Router();
 const multer = multerFunc();

src/backend/routes/api/transport.ts

@@ -3,8 +3,8 @@ import multer, { StorageEngine } from 'multer';
 import mime from 'mime';
 import mkdirp from 'mkdirp';
 import config from 'config';
-import Transport from '../../controllers/transport';
-import { random16 } from '../../utils/crypto';
+import Transport from '../../controllers/transport.js';
+import { random16 } from '../../utils/crypto.js';
 
 const router = Router();
 

src/backend/routes/home.ts

@@ -1,5 +1,5 @@
 import express, { Request, Response } from 'express';
-import verifyToken from './middlewares/token';
+import verifyToken from './middlewares/token.js';
 
 const router = express.Router();
 

src/backend/routes/index.ts

@@ -1,10 +1,10 @@
 import express from 'express';
-import home from './home';
-import pages from './pages';
-import auth from './auth';
-import aliases from './aliases';
-import api from './api';
-import pagesMiddleware from './middlewares/pages';
+import home from './home.js';
+import pages from './pages.js';
+import auth from './auth.js';
+import aliases from './aliases.js';
+import api from './api/index.js';
+import pagesMiddleware from './middlewares/pages.js';
 
 const router = express.Router();
 

src/backend/routes/middlewares/pages.ts

@@ -1,9 +1,9 @@
 import { NextFunction, Request, Response } from 'express';
-import Pages from '../../controllers/pages';
-import PagesOrder from '../../controllers/pagesOrder';
-import Page from '../../models/page';
-import asyncMiddleware from '../../utils/asyncMiddleware';
-import PageOrder from '../../models/pageOrder';
+import Pages from '../../controllers/pages.js';
+import PagesOrder from '../../controllers/pagesOrder.js';
+import Page from '../../models/page.js';
+import asyncMiddleware from '../../utils/asyncMiddleware.js';
+import PageOrder from '../../models/pageOrder.js';
 
 /**
  * Process one-level pages list to parent-children list

src/backend/routes/pages.ts

@@ -1,9 +1,9 @@
 import express, { NextFunction, Request, Response } from 'express';
-import Pages from '../controllers/pages';
-import PagesOrder from '../controllers/pagesOrder';
-import verifyToken from './middlewares/token';
-import allowEdit from './middlewares/locals';
-import PagesFlatArray from '../models/pagesFlatArray';
+import Pages from '../controllers/pages.js';
+import PagesOrder from '../controllers/pagesOrder.js';
+import verifyToken from './middlewares/token.js';
+import allowEdit from './middlewares/locals.js';
+import PagesFlatArray from '../models/pagesFlatArray.js';
 
 const router = express.Router();
 

src/backend/utils/database/index.ts

@@ -1,9 +1,9 @@
 import Datastore from 'nedb';
-import { AliasData } from '../../models/alias';
-import { FileData } from '../../models/file';
-import { PageData } from '../../models/page';
-import { PageOrderData } from '../../models/pageOrder';
-import initDb from './initDb';
+import { AliasData } from '../../models/alias.js';
+import { FileData } from '../../models/file.js';
+import { PageData } from '../../models/page.js';
+import { PageOrderData } from '../../models/pageOrder.js';
+import initDb from './initDb.js';
 
 /**
  * @typedef Options - optional params

src/backend/utils/downloadFavicon.ts

@@ -1,6 +1,6 @@
 import path from 'path';
 import fs from 'fs';
-import fetch from 'node-fetch';
+import fetch, { RequestInit } from 'node-fetch';
 
 /**
  * Uploaded favicon data
@@ -61,7 +61,7 @@ export async function downloadFavicon(destination: string, faviconFolder: string
   }, 5000);
 
   // Make get request to url
-  const res = await fetch(destination, { signal: controller.signal });
+  const res = await fetch(destination, { signal: controller.signal as RequestInit['signal'] });
   // Get buffer data from response
   const fileData = await res.buffer();
 

src/backend/utils/rcparser.ts

@@ -1,6 +1,14 @@
 import fs from 'fs';
 import path from 'path';
 import config from 'config';
+import { fileURLToPath } from 'url';
+
+/**
+ * The __dirname CommonJS variables are not available in ES modules.
+ * https://nodejs.org/api/esm.html#no-__filename-or-__dirname
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 const rcPath = path.resolve(__dirname, '../../../', config.get('rcFile') || './.codexdocsrc');
 

src/backend/utils/twig.ts

@@ -3,8 +3,16 @@
  */
 import twig from 'twig';
 import fs from 'fs';
-import urlify from './urlify';
+import urlify from './urlify.js';
 import path from 'path';
+import { fileURLToPath } from 'url';
+
+/**
+ * The __dirname CommonJS variables are not available in ES modules.
+ * https://nodejs.org/api/esm.html#no-__filename-or-__dirname
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 export default (function () {
   'use strict';

src/backend/utils/urlify.ts

@@ -1,4 +1,4 @@
-import translateString from './translation';
+import translateString from './translation.js';
 
 /**
  * Convert text to URL-like string

src/bin/server.ts

@@ -1,7 +1,7 @@
 /**
  * Module dependencies.
  */
-import app from '../backend/app';
+import app from '../backend/app.js';
 import http from 'http';
 import config from 'config';
 import Debug from 'debug';
@@ -96,4 +96,4 @@ function onListening(): void {
 export default {
   server,
   app,
-};
+};

src/test/database.ts

@@ -3,7 +3,7 @@ import config from 'config';
 import { expect } from 'chai';
 import Datastore from 'nedb';
 
-import { Database } from '../backend/utils/database';
+import { Database } from '../backend/utils/database/index.js';
 
 interface Document {
   data?: any;

src/test/express.ts

@@ -1,7 +1,7 @@
 import chaiHTTP from 'chai-http';
 import chai, { expect } from 'chai';
 
-import server from '../bin/server';
+import server from '../bin/server.js';
 
 const app = server.app;
 
@@ -16,4 +16,4 @@ describe('Express app', () => {
 
     expect(result).to.have.status(200);
   });
-});
+});

src/test/models/alias.ts

@@ -2,12 +2,20 @@ import { expect } from 'chai';
 import fs from 'fs';
 import path from 'path';
 import config from 'config';
-import Alias from '../../backend/models/alias';
-import { binaryMD5 } from '../../backend/utils/crypto';
-import database from '../../backend/utils/database';
+import Alias from '../../backend/models/alias.js';
+import { binaryMD5 } from '../../backend/utils/crypto.js';
+import database from '../../backend/utils/database/index.js';
+import { fileURLToPath } from 'url';
 
 const aliases = database['aliases'];
 
+/**
+ * The __dirname CommonJS variables are not available in ES modules.
+ * https://nodejs.org/api/esm.html#no-__filename-or-__dirname
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
 describe('Alias model', () => {
   after(() => {
     const pathToDB = path.resolve(__dirname, '../../../', config.get('database'), './aliases.db');

src/test/models/file.ts

@@ -2,8 +2,16 @@ import { expect } from 'chai';
 import fs from 'fs';
 import path from 'path';
 import config from 'config';
-import File from '../../backend/models/file';
-import database from '../../backend/utils/database';
+import File from '../../backend/models/file.js';
+import database from '../../backend/utils/database/index.js';
+import { fileURLToPath } from 'url';
+
+/**
+ * The __dirname CommonJS variables are not available in ES modules.
+ * https://nodejs.org/api/esm.html#no-__filename-or-__dirname
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 const files = database['files'];
 
@@ -159,9 +167,9 @@ describe('File model', () => {
 
     if (savedFile._id !== undefined){
       const foundFile = await File.get(savedFile._id);
-  
+
       const { data } = foundFile;
-  
+
       expect(data._id).to.equal(savedFile._id);
       expect(data.name).to.equal(savedFile.name);
       expect(data.filename).to.equal(savedFile.filename);
@@ -188,9 +196,9 @@ describe('File model', () => {
 
     if (savedFile.filename !== undefined){
       const foundFile = await File.getByFilename(savedFile.filename);
-  
+
       const { data } = foundFile;
-  
+
       expect(data._id).to.equal(savedFile._id);
       expect(data.name).to.equal(savedFile.name);
       expect(data.filename).to.equal(savedFile.filename);

src/test/models/page.ts

@@ -2,9 +2,17 @@ import { expect } from 'chai';
 import fs from 'fs';
 import path from 'path';
 import config from 'config';
-import Page from '../../backend/models/page';
-import translateString from '../../backend/utils/translation';
-import database from '../../backend/utils/database';
+import Page from '../../backend/models/page.js';
+import translateString from '../../backend/utils/translation.js';
+import database from '../../backend/utils/database/index.js';
+import { fileURLToPath } from 'url';
+
+/**
+ * The __dirname CommonJS variables are not available in ES modules.
+ * https://nodejs.org/api/esm.html#no-__filename-or-__dirname
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 const pages = database['pages'];
 

src/test/models/pageOrder.ts

@@ -2,8 +2,16 @@ import { expect } from 'chai';
 import fs from 'fs';
 import path from 'path';
 import config from 'config';
-import PageOrder from '../../backend/models/pageOrder';
-import database from '../../backend/utils/database';
+import PageOrder from '../../backend/models/pageOrder.js';
+import database from '../../backend/utils/database/index.js';
+import { fileURLToPath } from 'url';
+
+/**
+ * The __dirname CommonJS variables are not available in ES modules.
+ * https://nodejs.org/api/esm.html#no-__filename-or-__dirname
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 const pagesOrder = database['pagesOrder'];
 

src/test/rcparser.ts

@@ -4,7 +4,7 @@ import path from 'path';
 import config from 'config';
 import sinon = require('sinon');
 
-import rcParser from '../backend/utils/rcparser';
+import rcParser from '../backend/utils/rcparser.js';
 
 const rcPath = path.resolve(process.cwd(), config.get('rcFile'));
 

src/test/rest/aliases.ts

@@ -3,7 +3,15 @@ import path from 'path';
 import config from 'config';
 import chai from 'chai';
 import chaiHTTP from 'chai-http';
-import server from '../../bin/server';
+import server from '../../bin/server.js';
+import { fileURLToPath } from 'url';
+
+/**
+ * The __dirname CommonJS variables are not available in ES modules.
+ * https://nodejs.org/api/esm.html#no-__filename-or-__dirname
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 const {expect} = chai;
 const app = server.app;

src/test/rest/pages.ts

@@ -3,11 +3,20 @@ import path from 'path';
 import config from 'config';
 import chai from 'chai';
 import chaiHTTP from 'chai-http';
-import server from '../../bin/server';
-import model from '../../backend/models/page';
-import Page from '../../backend/models/page';
-import PageOrder from '../../backend/models/pageOrder';
-import translateString from '../../backend/utils/translation';
+import server from '../../bin/server.js';
+import model from '../../backend/models/page.js';
+import Page from '../../backend/models/page.js';
+import PageOrder from '../../backend/models/pageOrder.js';
+import translateString from '../../backend/utils/translation.js';
+import { fileURLToPath } from 'url';
+
+/**
+ * The __dirname CommonJS variables are not available in ES modules.
+ * https://nodejs.org/api/esm.html#no-__filename-or-__dirname
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
 
 const {expect} = chai;
 const app = server.app;
@@ -516,7 +525,7 @@ describe('Pages REST: ', () => {
 
     page6 = await Page.get(pages[6]);
     expect(page6.data._id).to.be.undefined;
-    
+
     page7 = await Page.get(pages[7]);
     expect(page7.data._id).to.be.undefined;
 

src/test/rest/transport.ts

@@ -5,8 +5,17 @@ import chai from 'chai';
 import chaiHTTP from 'chai-http';
 import rimraf from 'rimraf';
 import config from 'config';
-import server from '../../bin/server';
-import model from '../../backend/models/file';
+import server from '../../bin/server.js';
+import model from '../../backend/models/file.js';
+import { fileURLToPath } from 'url';
+
+/**
+ * The __dirname CommonJS variables are not available in ES modules.
+ * https://nodejs.org/api/esm.html#no-__filename-or-__dirname
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
 
 const {expect} = chai;
 const app = server.app;
@@ -119,7 +128,7 @@ describe('Transport routes: ', () => {
     if (file.path !== undefined){
       const getRes = await agent
         .get(file.path);
-  
+
       expect(getRes).to.have.status(200);
       expect(getRes).to.have.header('content-type', new RegExp(`^${file.mimetype}`));
     }
@@ -170,7 +179,7 @@ describe('Transport routes: ', () => {
     if (file.path !== undefined){
       const getRes = await agent
         .get(file.path);
-  
+
       expect(getRes).to.have.status(200);
       expect(getRes).to.have.header('content-type', file.mimetype);
     }

tsconfig.json

@@ -4,9 +4,11 @@
 
     /* Basic Options */
     // "incremental": true,                         /* Enable incremental compilation */
-    "target": "ES2015",                             /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ES2021', or 'ESNEXT'. */
-    "module": "commonjs",                           /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
-    // "lib": [],                                   /* Specify library files to be included in the compilation. */
+    "target": "ES2021",                             /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ES2021', or 'ESNEXT'. */
+    "module": "Node16",                           /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
+    "lib": [                                        /* Specify library files to be included in the compilation. */
+      "ESNext" /* ESNext includes new Level-4 features that were recently added to the ECMA-262 JS spec */
+    ],
     // "allowJs": true,                             /* Allow javascript files to be compiled. */
     // "checkJs": true,                             /* Report errors in .js files. */
     // "jsx": "preserve",                           /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */
@@ -44,13 +46,16 @@
     // "noPropertyAccessFromIndexSignature": true,  /* Require undeclared properties from index signatures to use element accesses. */
 
     /* Module Resolution Options */
-    // "moduleResolution": "node",                  /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
+    "moduleResolution": "NodeNext",                  /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
     // "baseUrl": "./",                             /* Base directory to resolve non-absolute module names. */
     // "paths": {},                                 /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
     // "rootDirs": [],                              /* List of root folders whose combined content represents the structure of the project at runtime. */
     // "typeRoots": [],                             /* List of folders to include type definitions from. */
-    // "types": [],                                 /* Type declaration files to be included in compilation. */
-    // "allowSyntheticDefaultImports": true,        /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
+    "types": [                                      /* Type declaration files to be included in compilation. */
+      "node",
+      "mocha"
+    ],
+    "allowSyntheticDefaultImports": true,        /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
     "esModuleInterop": true,                        /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
     // "preserveSymlinks": true,                    /* Do not resolve the real path of symlinks. */
     // "allowUmdGlobalAccess": true,                /* Allow accessing UMD globals from modules. */
@@ -69,5 +74,12 @@
     "skipLibCheck": true,                           /* Skip type checking of declaration files. */
     "forceConsistentCasingInFileNames": true        /* Disallow inconsistently-cased references to the same file. */
   },
-  "include": ["src/**/*"]
+  "include": ["src/**/*"],
+  "ts-node": {
+    /**
+     * Tell ts-node CLI to install the --loader automatically, explained below
+     * https://typestrong.org/ts-node/docs/imports/
+     */
+    "esm": true
+  }
 }

webpack.config.js

@@ -1,5 +1,12 @@
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const path = require('path');
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+/**
+ * The __dirname CommonJS variables are not available in ES modules.
+ * https://nodejs.org/api/esm.html#no-__filename-or-__dirname
+ */
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 /**
  * Options for the Babel
@@ -22,7 +29,7 @@ const babelLoader = {
   },
 };
 
-module.exports = () => {
+export default () => {
   return {
     entry: './src/frontend/js/app.js',
     output: {
@@ -53,9 +60,18 @@ module.exports = () => {
               loader: 'postcss-loader',
             },
           ],
-        }, {
+        },
+        {
           test: /\.js$/,
           exclude: /(node_modules|bower_components)/,
+          resolve: {
+            /**
+             * Disable mandatory to specify full paths with extensions using '"type": "module"' in package.json
+             * @see https://github.com/webpack/webpack/issues/11467#issuecomment-691873586
+             * @see https://stackoverflow.com/questions/69427025/programmatic-webpack-jest-esm-cant-resolve-module-without-js-file-exten
+             */
+            fullySpecified: false,
+          },
           use: [
             babelLoader,
           ],