diff --git a/experimental/javascript-wc-indexeddb/package.json b/experimental/javascript-wc-indexeddb/package.json
index c8d06962c..2129abdd0 100644
--- a/experimental/javascript-wc-indexeddb/package.json
+++ b/experimental/javascript-wc-indexeddb/package.json
@@ -9,7 +9,7 @@
     "private": true,
     "scripts": {
         "dev": "http-server ./ -p 7005 -c-1 --cors -o",
-        "build": "node scripts/build.js",
+        "build": "node scripts/build.mjs",
         "serve": "http-server ./dist -p 7006 -c-1 --cors -o"
     },
     "keywords": [],
diff --git a/experimental/javascript-wc-indexeddb/scripts/build.js b/experimental/javascript-wc-indexeddb/scripts/build.mjs
similarity index 98%
rename from experimental/javascript-wc-indexeddb/scripts/build.js
rename to experimental/javascript-wc-indexeddb/scripts/build.mjs
index 64ef1ad34..9db636c3a 100644
--- a/experimental/javascript-wc-indexeddb/scripts/build.js
+++ b/experimental/javascript-wc-indexeddb/scripts/build.mjs
@@ -1,5 +1,5 @@
-const fs = require("fs").promises;
-const { dirname } = require("path");
+import fs from "fs/promises";
+import { dirname } from "path";
 
 /**
  * createDirectory
diff --git a/experimental/todomvc-localstorage/package.json b/experimental/todomvc-localstorage/package.json
index c55abb8ff..13ae66a90 100644
--- a/experimental/todomvc-localstorage/package.json
+++ b/experimental/todomvc-localstorage/package.json
@@ -9,7 +9,7 @@
     "private": true,
     "scripts": {
         "dev": "http-server ./ -p 7001 -c-1 --cors",
-        "build": "node scripts/build.js",
+        "build": "node scripts/build.mjs",
         "serve": "http-server ./dist -p 7002 -c-1 --cors"
     },
     "dependencies": {
diff --git a/experimental/todomvc-localstorage/scripts/build.js b/experimental/todomvc-localstorage/scripts/build.mjs
similarity index 96%
rename from experimental/todomvc-localstorage/scripts/build.js
rename to experimental/todomvc-localstorage/scripts/build.mjs
index 046de0e7e..cc923230e 100644
--- a/experimental/todomvc-localstorage/scripts/build.js
+++ b/experimental/todomvc-localstorage/scripts/build.mjs
@@ -1,5 +1,5 @@
-const fs = require("fs").promises;
-const path = require("path");
+import fs from "fs/promises";
+import path from "path";
 
 const rootDirectory = "./";
 const sourceDirectory = "./src";
diff --git a/resources/todomvc/architecture-examples/angular-complex/package.json b/resources/todomvc/architecture-examples/angular-complex/package.json
index 117910824..4b39a8321 100644
--- a/resources/todomvc/architecture-examples/angular-complex/package.json
+++ b/resources/todomvc/architecture-examples/angular-complex/package.json
@@ -8,7 +8,7 @@
         "npm": ">=8.19.3"
     },
     "scripts": {
-        "build": "node scripts/build.js",
+        "build": "node scripts/build.mjs",
         "serve": "http-server ./dist -p 7002 -c-1 --cors"
     },
     "devDependencies": {
diff --git a/resources/todomvc/architecture-examples/angular-complex/scripts/build.js b/resources/todomvc/architecture-examples/angular-complex/scripts/build.mjs
similarity index 84%
rename from resources/todomvc/architecture-examples/angular-complex/scripts/build.js
rename to resources/todomvc/architecture-examples/angular-complex/scripts/build.mjs
index 3a13c300a..0967ca52d 100644
--- a/resources/todomvc/architecture-examples/angular-complex/scripts/build.js
+++ b/resources/todomvc/architecture-examples/angular-complex/scripts/build.mjs
@@ -1,8 +1,9 @@
 /**
  * Builds the TodoMVC Angular Complex DOM.
  */
-const path = require("path");
-const { buildComplex } = require("big-dom-generator/utils/buildComplex");
+import path from "path";
+import { buildComplex } from "big-dom-generator/utils/buildComplex.mjs";
+const __dirname = import.meta.dirname;
 
 const options = {
     callerDirectory: path.resolve(__dirname),
diff --git a/resources/todomvc/architecture-examples/backbone-complex/package.json b/resources/todomvc/architecture-examples/backbone-complex/package.json
index b75840505..419c73368 100644
--- a/resources/todomvc/architecture-examples/backbone-complex/package.json
+++ b/resources/todomvc/architecture-examples/backbone-complex/package.json
@@ -8,7 +8,7 @@
     },
     "private": true,
     "scripts": {
-        "build": "node scripts/build.js",
+        "build": "node scripts/build.mjs",
         "serve": "http-server ./dist -p 7002 -c-1 --cors"
     },
     "devDependencies": {
diff --git a/resources/todomvc/architecture-examples/backbone-complex/scripts/build.js b/resources/todomvc/architecture-examples/backbone-complex/scripts/build.mjs
similarity index 84%
rename from resources/todomvc/architecture-examples/backbone-complex/scripts/build.js
rename to resources/todomvc/architecture-examples/backbone-complex/scripts/build.mjs
index 802c9f845..691f04619 100644
--- a/resources/todomvc/architecture-examples/backbone-complex/scripts/build.js
+++ b/resources/todomvc/architecture-examples/backbone-complex/scripts/build.mjs
@@ -1,8 +1,9 @@
 /**
  * Builds the TodoMVC Backbone Complex DOM.
  */
-const path = require("path");
-const { buildComplex } = require("big-dom-generator/utils/buildComplex");
+import path from "path";
+import { buildComplex } from "big-dom-generator/utils/buildComplex.mjs";
+const __dirname = import.meta.dirname;
 
 const options = {
     callerDirectory: path.resolve(__dirname),
diff --git a/resources/todomvc/architecture-examples/backbone/package.json b/resources/todomvc/architecture-examples/backbone/package.json
index c50e58031..eaa6428d1 100644
--- a/resources/todomvc/architecture-examples/backbone/package.json
+++ b/resources/todomvc/architecture-examples/backbone/package.json
@@ -8,7 +8,7 @@
     },
     "private": true,
     "scripts": {
-        "build": "node scripts/build.js",
+        "build": "node scripts/build.mjs",
         "dev": "http-server ./ -p 7001 -c-1 --cors",
         "serve": "http-server ./dist -p 7002 -c-1 --cors"
     },
diff --git a/resources/todomvc/architecture-examples/backbone/scripts/build.js b/resources/todomvc/architecture-examples/backbone/scripts/build.mjs
similarity index 96%
rename from resources/todomvc/architecture-examples/backbone/scripts/build.js
rename to resources/todomvc/architecture-examples/backbone/scripts/build.mjs
index ff06b6773..c6ec2b793 100644
--- a/resources/todomvc/architecture-examples/backbone/scripts/build.js
+++ b/resources/todomvc/architecture-examples/backbone/scripts/build.mjs
@@ -1,5 +1,5 @@
-const fs = require("fs").promises;
-const path = require("path");
+import fs from "fs/promises";
+import path from "path";
 
 const rootDirectory = "./";
 const sourceDirectory = "./src";
diff --git a/resources/todomvc/architecture-examples/jquery-complex/package.json b/resources/todomvc/architecture-examples/jquery-complex/package.json
index 65303e18a..d635cde0d 100644
--- a/resources/todomvc/architecture-examples/jquery-complex/package.json
+++ b/resources/todomvc/architecture-examples/jquery-complex/package.json
@@ -2,7 +2,7 @@
   "name": "todomvc-jquery-complex",
   "private": true,
   "scripts": {
-    "build": "node scripts/build.js",
+    "build": "node scripts/build.mjs",
     "serve": "http-server ./dist -p 7002 -c-1 --cors"
   },
   "devDependencies": {
diff --git a/resources/todomvc/architecture-examples/jquery-complex/scripts/build.js b/resources/todomvc/architecture-examples/jquery-complex/scripts/build.mjs
similarity index 85%
rename from resources/todomvc/architecture-examples/jquery-complex/scripts/build.js
rename to resources/todomvc/architecture-examples/jquery-complex/scripts/build.mjs
index 6f69450f0..302d57cee 100644
--- a/resources/todomvc/architecture-examples/jquery-complex/scripts/build.js
+++ b/resources/todomvc/architecture-examples/jquery-complex/scripts/build.mjs
@@ -1,8 +1,10 @@
 /**
  * Builds the TodoMVC jQuery Complex DOM.
  */
-const path = require("path");
-const { buildComplex } = require("big-dom-generator/utils/buildComplex");
+import path from "path";
+import { buildComplex } from "big-dom-generator/utils/buildComplex.mjs";
+const __dirname = import.meta.dirname;
+
 
 const options = {
     callerDirectory: path.resolve(__dirname),
diff --git a/resources/todomvc/architecture-examples/jquery/package.json b/resources/todomvc/architecture-examples/jquery/package.json
index 70e1b5d10..910d0e360 100644
--- a/resources/todomvc/architecture-examples/jquery/package.json
+++ b/resources/todomvc/architecture-examples/jquery/package.json
@@ -3,7 +3,7 @@
   "private": true,
   "scripts": {
     "dev": "http-server . -p 7001 -c-1 --cors",
-    "build": "node scripts/build.js",
+    "build": "node scripts/build.mjs",
     "serve": "http-server ./dist -p 7002 -c-1 --cors"
   },
   "dependencies": {
diff --git a/resources/todomvc/architecture-examples/jquery/scripts/build.js b/resources/todomvc/architecture-examples/jquery/scripts/build.mjs
similarity index 96%
rename from resources/todomvc/architecture-examples/jquery/scripts/build.js
rename to resources/todomvc/architecture-examples/jquery/scripts/build.mjs
index 06924222d..e94df94b2 100644
--- a/resources/todomvc/architecture-examples/jquery/scripts/build.js
+++ b/resources/todomvc/architecture-examples/jquery/scripts/build.mjs
@@ -1,5 +1,5 @@
-const fs = require("fs").promises;
-const path = require("path");
+import fs from "fs/promises";
+import path from "path";
 
 const rootDirectory = "./";
 const sourceDirectory = "./src";
diff --git a/resources/todomvc/architecture-examples/lit-complex/package.json b/resources/todomvc/architecture-examples/lit-complex/package.json
index a48f27a2e..796c7e2ea 100644
--- a/resources/todomvc/architecture-examples/lit-complex/package.json
+++ b/resources/todomvc/architecture-examples/lit-complex/package.json
@@ -6,7 +6,7 @@
         "npm": ">=8.19.3"
     },
     "scripts": {
-        "build": "node scripts/build.js",
+        "build": "node scripts/build.mjs",
         "serve": "http-server ./dist -p 8000 -c-1 --cors"
     },
     "devDependencies": {
diff --git a/resources/todomvc/architecture-examples/lit-complex/scripts/build.js b/resources/todomvc/architecture-examples/lit-complex/scripts/build.mjs
similarity index 88%
rename from resources/todomvc/architecture-examples/lit-complex/scripts/build.js
rename to resources/todomvc/architecture-examples/lit-complex/scripts/build.mjs
index a8b2448ca..894318a0c 100644
--- a/resources/todomvc/architecture-examples/lit-complex/scripts/build.js
+++ b/resources/todomvc/architecture-examples/lit-complex/scripts/build.mjs
@@ -1,8 +1,9 @@
 /**
  * Builds the TodoMVC Lit Complex DOM.
  */
-const path = require("path");
-const { buildComplex } = require("big-dom-generator/utils/buildComplex");
+import path from "path";
+import { buildComplex } from "big-dom-generator/utils/buildComplex.mjs";
+const __dirname = import.meta.dirname;
 
 const options = {
     callerDirectory: path.resolve(__dirname),
diff --git a/resources/todomvc/architecture-examples/preact-complex/package.json b/resources/todomvc/architecture-examples/preact-complex/package.json
index 181a955b4..50053e036 100644
--- a/resources/todomvc/architecture-examples/preact-complex/package.json
+++ b/resources/todomvc/architecture-examples/preact-complex/package.json
@@ -8,7 +8,7 @@
         "npm": ">=8.19.3"
     },
     "scripts": {
-        "build": "node scripts/build.js",
+        "build": "node scripts/build.mjs",
         "serve": "http-server ./dist -p 7002 -c-1 --cors"
     },
     "devDependencies": {
diff --git a/resources/todomvc/architecture-examples/preact-complex/scripts/build.js b/resources/todomvc/architecture-examples/preact-complex/scripts/build.mjs
similarity index 83%
rename from resources/todomvc/architecture-examples/preact-complex/scripts/build.js
rename to resources/todomvc/architecture-examples/preact-complex/scripts/build.mjs
index d9309af11..133d2924a 100644
--- a/resources/todomvc/architecture-examples/preact-complex/scripts/build.js
+++ b/resources/todomvc/architecture-examples/preact-complex/scripts/build.mjs
@@ -1,8 +1,9 @@
 /**
  * Build the TodoMVC Preact Complex DOM example.
  */
-const path = require("path");
-const { buildComplex } = require("big-dom-generator/utils/buildComplex");
+import path from "path";
+import { buildComplex } from "big-dom-generator/utils/buildComplex.mjs";
+const __dirname = import.meta.dirname;
 
 const options = {
     callerDirectory: path.resolve(__dirname),
diff --git a/resources/todomvc/architecture-examples/react-complex/package.json b/resources/todomvc/architecture-examples/react-complex/package.json
index f04f6e93a..dab30bd09 100755
--- a/resources/todomvc/architecture-examples/react-complex/package.json
+++ b/resources/todomvc/architecture-examples/react-complex/package.json
@@ -8,7 +8,7 @@
         "npm": ">=8.19.3"
     },
     "scripts": {
-        "build": "node scripts/build.js",
+        "build": "node scripts/build.mjs",
         "serve": "http-server ./dist -p 7002 -c-1 --cors"
     },
     "devDependencies": {
diff --git a/resources/todomvc/architecture-examples/react-complex/scripts/build.js b/resources/todomvc/architecture-examples/react-complex/scripts/build.mjs
similarity index 80%
rename from resources/todomvc/architecture-examples/react-complex/scripts/build.js
rename to resources/todomvc/architecture-examples/react-complex/scripts/build.mjs
index 814d42210..49fdf8eaf 100644
--- a/resources/todomvc/architecture-examples/react-complex/scripts/build.js
+++ b/resources/todomvc/architecture-examples/react-complex/scripts/build.mjs
@@ -1,8 +1,9 @@
 /**
  * Build the TodoMVC: React Complex DOM example.
  */
-const path = require("path");
-const { buildComplex } = require("big-dom-generator/utils/buildComplex");
+import path from "path";
+import { buildComplex } from "big-dom-generator/utils/buildComplex.mjs";
+const __dirname = import.meta.dirname;
 
 const options = {
     callerDirectory: path.resolve(__dirname),
diff --git a/resources/todomvc/architecture-examples/react-redux-complex/package.json b/resources/todomvc/architecture-examples/react-redux-complex/package.json
index 540dfea7e..55eb1184e 100644
--- a/resources/todomvc/architecture-examples/react-redux-complex/package.json
+++ b/resources/todomvc/architecture-examples/react-redux-complex/package.json
@@ -8,7 +8,7 @@
         "npm": ">=8.19.3"
     },
     "scripts": {
-        "build": "node scripts/build.js",
+        "build": "node scripts/build.mjs",
         "serve": "http-server ./dist -p 7002 -c-1 --cors"
     },
     "devDependencies": {
diff --git a/resources/todomvc/architecture-examples/react-redux-complex/scripts/build.js b/resources/todomvc/architecture-examples/react-redux-complex/scripts/build.mjs
similarity index 83%
rename from resources/todomvc/architecture-examples/react-redux-complex/scripts/build.js
rename to resources/todomvc/architecture-examples/react-redux-complex/scripts/build.mjs
index b51b34ec0..870e615c8 100644
--- a/resources/todomvc/architecture-examples/react-redux-complex/scripts/build.js
+++ b/resources/todomvc/architecture-examples/react-redux-complex/scripts/build.mjs
@@ -1,8 +1,9 @@
 /**
  * Builds the TodoMVC React-Redux Complex DOM.
  */
-const path = require("path");
-const { buildComplex } = require("big-dom-generator/utils/buildComplex");
+import path from "path";
+import { buildComplex } from "big-dom-generator/utils/buildComplex.mjs";
+const __dirname = import.meta.dirname;
 
 const options = {
     callerDirectory: path.resolve(__dirname),
diff --git a/resources/todomvc/architecture-examples/svelte-complex/package.json b/resources/todomvc/architecture-examples/svelte-complex/package.json
index c87f3dd1c..c112b6b1c 100644
--- a/resources/todomvc/architecture-examples/svelte-complex/package.json
+++ b/resources/todomvc/architecture-examples/svelte-complex/package.json
@@ -8,7 +8,7 @@
     },
     "private": true,
     "scripts": {
-        "build": "node scripts/build.js",
+        "build": "node scripts/build.mjs",
         "serve": "http-server ./dist -p 7002 -c-1 --cors"
     },
     "devDependencies": {
diff --git a/resources/todomvc/architecture-examples/svelte-complex/scripts/build.js b/resources/todomvc/architecture-examples/svelte-complex/scripts/build.mjs
similarity index 82%
rename from resources/todomvc/architecture-examples/svelte-complex/scripts/build.js
rename to resources/todomvc/architecture-examples/svelte-complex/scripts/build.mjs
index 42fcbdefc..ee7b201cd 100644
--- a/resources/todomvc/architecture-examples/svelte-complex/scripts/build.js
+++ b/resources/todomvc/architecture-examples/svelte-complex/scripts/build.mjs
@@ -1,8 +1,9 @@
 /**
  * Builds the TodoMVC Svelte Complex DOM.
  */
-const path = require("path");
-const { buildComplex } = require("big-dom-generator/utils/buildComplex");
+import path from "path";
+import { buildComplex } from "big-dom-generator/utils/buildComplex.mjs";
+const __dirname = import.meta.dirname;
 
 const options = {
     callerDirectory: path.resolve(__dirname),
diff --git a/resources/todomvc/architecture-examples/vue-complex/package.json b/resources/todomvc/architecture-examples/vue-complex/package.json
index 4d8012c9d..effae0f73 100644
--- a/resources/todomvc/architecture-examples/vue-complex/package.json
+++ b/resources/todomvc/architecture-examples/vue-complex/package.json
@@ -8,7 +8,7 @@
         "npm": ">=8.19.3"
     },
     "scripts": {
-        "build": "node scripts/build.js",
+        "build": "node scripts/build.mjs",
         "serve": "http-server ./dist -p 7002 -c-1 --cors"
     },
     "devDependencies": {
diff --git a/resources/todomvc/architecture-examples/vue-complex/scripts/build.js b/resources/todomvc/architecture-examples/vue-complex/scripts/build.mjs
similarity index 82%
rename from resources/todomvc/architecture-examples/vue-complex/scripts/build.js
rename to resources/todomvc/architecture-examples/vue-complex/scripts/build.mjs
index cb46077d8..b2a7e475c 100644
--- a/resources/todomvc/architecture-examples/vue-complex/scripts/build.js
+++ b/resources/todomvc/architecture-examples/vue-complex/scripts/build.mjs
@@ -1,8 +1,9 @@
 /**
  * Builds the TodoMVC Vue Complex DOM.
  */
-const path = require("path");
-const { buildComplex } = require("big-dom-generator/utils/buildComplex");
+import path from "path";
+import { buildComplex } from "big-dom-generator/utils/buildComplex.mjs";
+const __dirname = import.meta.dirname;
 
 const options = {
     callerDirectory: path.resolve(__dirname),
diff --git a/resources/todomvc/big-dom-generator/package.json b/resources/todomvc/big-dom-generator/package.json
index fcb08e29f..deff56c34 100644
--- a/resources/todomvc/big-dom-generator/package.json
+++ b/resources/todomvc/big-dom-generator/package.json
@@ -8,7 +8,7 @@
     },
     "scripts": {
         "build": "webpack --config webpack.prod.mjs",
-        "postbuild": "node dist/app.bundle.js && purgecss -css dist/big-dom.css --content dist/index.html --output=dist/big-dom.css && rm dist/app.bundle.js && rm dist/app.bundle.js.LICENSE.txt && node utils/createVariant.js",
+        "postbuild": "node dist/app.bundle.js && purgecss -css dist/big-dom.css --content dist/index.html --output=dist/big-dom.css && rm dist/app.bundle.js && rm dist/app.bundle.js.LICENSE.txt && node utils/createVariant.mjs",
         "dev": "webpack serve --open --config webpack.dev.mjs",
         "serve": "http-server ./dist -p 7002 -c-1 --cors"
     },
diff --git a/resources/todomvc/big-dom-generator/utils/buildComplex.js b/resources/todomvc/big-dom-generator/utils/buildComplex.mjs
similarity index 96%
rename from resources/todomvc/big-dom-generator/utils/buildComplex.js
rename to resources/todomvc/big-dom-generator/utils/buildComplex.mjs
index 0fbd7f629..4e1cc1378 100644
--- a/resources/todomvc/big-dom-generator/utils/buildComplex.js
+++ b/resources/todomvc/big-dom-generator/utils/buildComplex.mjs
@@ -1,6 +1,10 @@
-const fs = require("fs");
-const path = require("path");
-const { execSync } = require("child_process");
+import fs from "fs";
+import path from "path";
+import { execSync } from "child_process";
+import { createRequire } from "module";
+
+const require = createRequire(import.meta.url);
+const __dirname = import.meta.dirname;
 
 /**
  * Builds the complex version of TodoMVC.
@@ -21,7 +25,7 @@ const { execSync } = require("child_process");
  * @param {string} options.standaloneDirectory - The directory of the TodoMVC standalone version.
  * @param {string} options.complexDirectory - The directory of the TodoMVC complex version.
  */
-function buildComplex(options) {
+export function buildComplex(options) {
     const {
         callerDirectory,
         sourceDirectory,
@@ -156,5 +160,3 @@ function getHtmlBodySync(filePath) {
 
     return htmlContent.substring(bodyStartIndex + 6, bodyEndIndex);
 }
-
-module.exports = { buildComplex };
diff --git a/resources/todomvc/big-dom-generator/utils/createVariant.js b/resources/todomvc/big-dom-generator/utils/createVariant.mjs
similarity index 91%
rename from resources/todomvc/big-dom-generator/utils/createVariant.js
rename to resources/todomvc/big-dom-generator/utils/createVariant.mjs
index f3a1df4c5..934864288 100644
--- a/resources/todomvc/big-dom-generator/utils/createVariant.js
+++ b/resources/todomvc/big-dom-generator/utils/createVariant.mjs
@@ -1,12 +1,12 @@
+import fs from "fs";
+import postcss from "postcss";
+
 /**
  * Create a variant of big-dom.css by adding a property
  * that creates a CSS stacking context for the overflow scroller (<div class="tree-area">)
  * to trigger different code paths related to scrolling in browsers.
  */
 try {
-    const fs = require("fs");
-    const postcss = require("postcss");
-
     const INPUT_FILE_PATH = "./dist/big-dom.css";
     const OUTPUT_FILE_PATH = "./dist/big-dom-with-stacking-context-scrollable.css";
 
diff --git a/resources/todomvc/vanilla-examples/javascript-es5-complex/package.json b/resources/todomvc/vanilla-examples/javascript-es5-complex/package.json
index 6666a2451..c76b8f402 100644
--- a/resources/todomvc/vanilla-examples/javascript-es5-complex/package.json
+++ b/resources/todomvc/vanilla-examples/javascript-es5-complex/package.json
@@ -9,7 +9,7 @@
     "private": true,
     "scripts": {
         "dev": "http-server ./ -p 7001 -c-1 --cors",
-        "build": "node scripts/build.js",
+        "build": "node scripts/build.mjs",
         "serve": "http-server ./dist -p 7002 -c-1 --cors"
     },
     "devDependencies": {
diff --git a/resources/todomvc/vanilla-examples/javascript-es5-complex/scripts/build.js b/resources/todomvc/vanilla-examples/javascript-es5-complex/scripts/build.mjs
similarity index 85%
rename from resources/todomvc/vanilla-examples/javascript-es5-complex/scripts/build.js
rename to resources/todomvc/vanilla-examples/javascript-es5-complex/scripts/build.mjs
index 2590e7875..2d75a1108 100644
--- a/resources/todomvc/vanilla-examples/javascript-es5-complex/scripts/build.js
+++ b/resources/todomvc/vanilla-examples/javascript-es5-complex/scripts/build.mjs
@@ -1,8 +1,9 @@
 /**
  * Builds the TodoMVC JavaScript Es5 Complex DOM.
  */
-const path = require("path");
-const { buildComplex } = require("big-dom-generator/utils/buildComplex");
+import path from "path";
+import { buildComplex } from "big-dom-generator/utils/buildComplex.mjs";
+const __dirname = import.meta.dirname;
 
 const options = {
     callerDirectory: path.resolve(__dirname),
diff --git a/resources/todomvc/vanilla-examples/javascript-es5/package.json b/resources/todomvc/vanilla-examples/javascript-es5/package.json
index 281884e84..3b8af42f9 100644
--- a/resources/todomvc/vanilla-examples/javascript-es5/package.json
+++ b/resources/todomvc/vanilla-examples/javascript-es5/package.json
@@ -9,7 +9,7 @@
     "private": true,
     "scripts": {
         "dev": "http-server ./ -p 7001 -c-1 --cors",
-        "build": "node scripts/build.js",
+        "build": "node scripts/build.mjs",
         "serve": "http-server ./dist -p 7002 -c-1 --cors"
     },
     "dependencies": {
diff --git a/resources/todomvc/vanilla-examples/javascript-es5/scripts/build.js b/resources/todomvc/vanilla-examples/javascript-es5/scripts/build.mjs
similarity index 96%
rename from resources/todomvc/vanilla-examples/javascript-es5/scripts/build.js
rename to resources/todomvc/vanilla-examples/javascript-es5/scripts/build.mjs
index 046de0e7e..cc923230e 100644
--- a/resources/todomvc/vanilla-examples/javascript-es5/scripts/build.js
+++ b/resources/todomvc/vanilla-examples/javascript-es5/scripts/build.mjs
@@ -1,5 +1,5 @@
-const fs = require("fs").promises;
-const path = require("path");
+import fs from "fs/promises";
+import path from "path";
 
 const rootDirectory = "./";
 const sourceDirectory = "./src";
diff --git a/resources/todomvc/vanilla-examples/javascript-es6-webpack-complex/package.json b/resources/todomvc/vanilla-examples/javascript-es6-webpack-complex/package.json
index b8f71f54f..83a0ea9e1 100644
--- a/resources/todomvc/vanilla-examples/javascript-es6-webpack-complex/package.json
+++ b/resources/todomvc/vanilla-examples/javascript-es6-webpack-complex/package.json
@@ -8,7 +8,7 @@
     },
     "private": true,
     "scripts": {
-        "build": "node scripts/build.js",
+        "build": "node scripts/build.mjs",
         "serve": "http-server ./dist -p 7002 -c-1 --cors"
     },
     "devDependencies": {
diff --git a/resources/todomvc/vanilla-examples/javascript-es6-webpack-complex/scripts/build.js b/resources/todomvc/vanilla-examples/javascript-es6-webpack-complex/scripts/build.mjs
similarity index 81%
rename from resources/todomvc/vanilla-examples/javascript-es6-webpack-complex/scripts/build.js
rename to resources/todomvc/vanilla-examples/javascript-es6-webpack-complex/scripts/build.mjs
index 9e9481a91..08c7f2bd7 100644
--- a/resources/todomvc/vanilla-examples/javascript-es6-webpack-complex/scripts/build.js
+++ b/resources/todomvc/vanilla-examples/javascript-es6-webpack-complex/scripts/build.mjs
@@ -1,8 +1,9 @@
 /**
  * Builds the TodoMVC JavaScript Es6 Webpack Complex DOM.
  */
-const path = require("path");
-const { buildComplex } = require("big-dom-generator/utils/buildComplex");
+import path from "path";
+import { buildComplex } from "big-dom-generator/utils/buildComplex.mjs";
+const __dirname = import.meta.dirname;
 
 const options = {
     callerDirectory: path.resolve(__dirname),
diff --git a/resources/todomvc/vanilla-examples/javascript-web-components-complex/package.json b/resources/todomvc/vanilla-examples/javascript-web-components-complex/package.json
index 22e9ec184..63f7bb872 100644
--- a/resources/todomvc/vanilla-examples/javascript-web-components-complex/package.json
+++ b/resources/todomvc/vanilla-examples/javascript-web-components-complex/package.json
@@ -8,7 +8,7 @@
     },
     "private": true,
     "scripts": {
-        "build": "node scripts/build.js",
+        "build": "node scripts/build.mjs",
         "serve": "http-server ./dist -p 7006 -c-1 --cors -o"
     },
     "keywords": [],
diff --git a/resources/todomvc/vanilla-examples/javascript-web-components-complex/scripts/build.js b/resources/todomvc/vanilla-examples/javascript-web-components-complex/scripts/build.mjs
similarity index 88%
rename from resources/todomvc/vanilla-examples/javascript-web-components-complex/scripts/build.js
rename to resources/todomvc/vanilla-examples/javascript-web-components-complex/scripts/build.mjs
index 338594b9c..45dce8bd3 100644
--- a/resources/todomvc/vanilla-examples/javascript-web-components-complex/scripts/build.js
+++ b/resources/todomvc/vanilla-examples/javascript-web-components-complex/scripts/build.mjs
@@ -1,8 +1,9 @@
 /**
  * Builds the TodoMVC JavaScript Web Components Complex DOM.
  */
-const path = require("path");
-const { buildComplex } = require("big-dom-generator/utils/buildComplex");
+import path from "path";
+import { buildComplex } from "big-dom-generator/utils/buildComplex.mjs";
+const __dirname = import.meta.dirname;
 
 const options = {
     callerDirectory: path.resolve(__dirname),
diff --git a/resources/todomvc/vanilla-examples/javascript-web-components/package.json b/resources/todomvc/vanilla-examples/javascript-web-components/package.json
index d677c19c8..3e4fc42a9 100644
--- a/resources/todomvc/vanilla-examples/javascript-web-components/package.json
+++ b/resources/todomvc/vanilla-examples/javascript-web-components/package.json
@@ -9,7 +9,7 @@
     "private": true,
     "scripts": {
         "dev": "http-server ./ -p 7005 -c-1 --cors -o",
-        "build": "node scripts/build.js",
+        "build": "node scripts/build.mjs",
         "serve": "http-server ./dist -p 7006 -c-1 --cors -o"
     },
     "keywords": [],
diff --git a/resources/todomvc/vanilla-examples/javascript-web-components/scripts/build.js b/resources/todomvc/vanilla-examples/javascript-web-components/scripts/build.mjs
similarity index 98%
rename from resources/todomvc/vanilla-examples/javascript-web-components/scripts/build.js
rename to resources/todomvc/vanilla-examples/javascript-web-components/scripts/build.mjs
index f8399da34..8980583e2 100644
--- a/resources/todomvc/vanilla-examples/javascript-web-components/scripts/build.js
+++ b/resources/todomvc/vanilla-examples/javascript-web-components/scripts/build.mjs
@@ -1,5 +1,5 @@
-const fs = require("fs").promises;
-const { dirname } = require("path");
+import fs from "fs/promises";
+import { dirname } from "path";
 
 /**
  * createDirectory