diff --git a/rsbuild.config.ts b/rsbuild.config.ts
index 5f247f6..c9e5918 100644
--- a/rsbuild.config.ts
+++ b/rsbuild.config.ts
@@ -18,6 +18,13 @@ export default defineConfig({
       },
     },
     rspack: {
+      resolve: {
+        // Allow TypeScript sources to use explicit `.js` specifiers (required
+        // by the CLI's NodeNext build) while the bundler resolves them to .ts.
+        extensionAlias: {
+          ".js": [".ts", ".tsx", ".js"],
+        },
+      },
       module: {
         rules: [
           {
diff --git a/src/main.tsx b/src/main.tsx
index b2e3d96..bc273ed 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,8 +1,13 @@
 import { render } from "solid-js/web";
 import { Router, Route } from "@solidjs/router";
+import mermaid from "mermaid";
 import App from "./App";
 import "./styles.css";
 
+// Mermaid is a runtime concern; the markdown module only emits
+// <pre class="mermaid"> placeholders. Initialize before any `mermaid.run()`.
+mermaid.initialize({ theme: "dark" });
+
 const root = document.getElementById("root");
 
 if (root) {
diff --git a/src/markdown/code-block-yaml-tag.ts b/src/markdown/code-block-yaml-tag.ts
index 9253504..b898c75 100644
--- a/src/markdown/code-block-yaml-tag.ts
+++ b/src/markdown/code-block-yaml-tag.ts
@@ -1,6 +1,6 @@
 import type { MarkedExtension } from "marked";
 import yaml from "js-yaml";
-import { parseBlockAttrs } from "./block-attrs";
+import { parseBlockAttrs } from "./block-attrs.js";
 
 /**
  * YAML-defined tag blocks:
diff --git a/src/markdown/index.ts b/src/markdown/index.ts
index fa7d619..6d63f7f 100644
--- a/src/markdown/index.ts
+++ b/src/markdown/index.ts
@@ -1,12 +1,12 @@
 import { Marked, type MarkedExtension } from "marked";
 import { createDirectives, presetDirectiveConfigs } from "marked-directive";
 import markedAlert from "marked-alert";
-import markedMermaid from "./mermaid";
+import markedMermaid from "./mermaid.js";
 import { gfmHeadingId } from "marked-gfm-heading-id";
-import markedColumns from "./columns";
-import markedCodeBlockYamlTag from "./code-block-yaml-tag";
-import { iconDirective, setIconBase } from "./icon";
-import { cmdDirective } from "./cmd";
+import markedColumns from "./columns.js";
+import markedCodeBlockYamlTag from "./code-block-yaml-tag.js";
+import { iconDirective, setIconBase } from "./icon.js";
+import { cmdDirective } from "./cmd.js";
 
 // 使用 marked-directive 来支持指令语法
 const marked = new Marked()
diff --git a/src/markdown/mermaid.ts b/src/markdown/mermaid.ts
index 439af52..db3ce7e 100644
--- a/src/markdown/mermaid.ts
+++ b/src/markdown/mermaid.ts
@@ -1,9 +1,4 @@
 import type {MarkedExtension} from "marked";
-import mermaid from "mermaid";
-
-mermaid.initialize({
-    theme: 'dark'
-});
 
 export default function markedMermaid(): MarkedExtension {
     return {