diff --git a/.esbuild/serve.cjs b/.esbuild/serve.cjs
index 7f00215f7..4c06572f3 100644
--- a/.esbuild/serve.cjs
+++ b/.esbuild/serve.cjs
@@ -71,8 +71,8 @@ const generateHandler = (server) => {
   app.all('/mermaid.js', generateHandler(iifeServer));
   app.all('/mermaid.esm.mjs', generateHandler(esmServer));
 
-  app.all('/e2e.js', generateHandler(iifeServer));
-  app.all('/bundle-test.js', generateHandler(iifeServer));
+  app.all('/e2e.esm.mjs', generateHandler(esmServer));
+  app.all('/bundle-test.esm.mjs', generateHandler(esmServer));
   app.listen(9000, () => {
     console.log(`Listening on http://localhost:9000`);
   });
diff --git a/cypress.config.js b/cypress.config.cjs
similarity index 100%
rename from cypress.config.js
rename to cypress.config.cjs
diff --git a/cypress/platform/e2e.html b/cypress/platform/e2e.html
index 021e2ad58..a23911334 100644
--- a/cypress/platform/e2e.html
+++ b/cypress/platform/e2e.html
@@ -2,7 +2,7 @@
   <head>
     <meta charset="utf-8" />
     <!-- <meta charset="iso-8859-15"/> -->
-    <script src="/e2e.js"></script>
+    <script src="/e2e.esm.mjs" type="module"></script>
     <!-- <link href="https://fonts.googleapis.com/css?family=Mansalva&display=swap" rel="stylesheet" /> -->
     <link
       href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
@@ -37,7 +37,7 @@
     </style>
   </head>
   <body>
-    <script src="./mermaid.js"></script>
+    <!-- <script src="./mermaid.js"></script> -->
     <script>
       // Notice startOnLoad=false
       // This prevents default handling in mermaid from render before the e2e logic is applied
diff --git a/cypress/platform/viewer.js b/cypress/platform/viewer.js
index 2ce15f88a..00f45ff94 100644
--- a/cypress/platform/viewer.js
+++ b/cypress/platform/viewer.js
@@ -3,7 +3,8 @@ import mermaid2 from '../../src/mermaid';
 
 /**
  * ##contentLoaded Callback function that is called when page is loaded. This functions fetches
- * configuration for mermaid rendering and calls init for rendering the mermaid diagrams on the page.
+ * configuration for mermaid rendering and calls init for rendering the mermaid diagrams on the
+ * page.
  */
 const contentLoaded = function () {
   let pos = document.location.href.indexOf('?graph=');
@@ -32,8 +33,8 @@ const contentLoaded = function () {
       document.getElementsByTagName('body')[0].appendChild(div);
     }
 
-    global.mermaid.initialize(graphObj.mermaid);
-    global.mermaid.init();
+    mermaid2.initialize(graphObj.mermaid);
+    mermaid2.init();
   }
 };
 
diff --git a/cypress/platform/webpackUsage.html b/cypress/platform/webpackUsage.html
index 12755c359..ec6edb4ea 100644
--- a/cypress/platform/webpackUsage.html
+++ b/cypress/platform/webpackUsage.html
@@ -12,6 +12,6 @@
   </head>
   <body>
     <div id="graph-to-be"></div>
-    <script src="./bundle-test.js" charset="utf-8"></script>
+    <script src="./bundle-test.esm.mjs" type="module" charset="utf-8"></script>
   </body>
 </html>
diff --git a/cypress/platform/xss.html b/cypress/platform/xss.html
index 4c0fc91ea..2d3661a4e 100644
--- a/cypress/platform/xss.html
+++ b/cypress/platform/xss.html
@@ -1,6 +1,6 @@
 <html>
   <head>
-    <script src="/e2e.js"></script>
+    <script src="/e2e.esm.mjs" type="module"></script>
     <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
     <style>
       .malware {
