Skip to content

Commit 7922b84

Browse files
ystemsrxclaude
andcommitted
fix(landing): expose Prism globally before loading prism-sql
prismjs/components/prism-sql references the global Prism at module top level, which is undefined under ESM. The manualChunks rule also stuffed core and the language file into one chunk, so even a dynamic import would still trigger prism-sql synchronously when vendor-prism evaluated. Import Prism as a value, assign window.Prism, then dynamic-import prism-sql; split components out of vendor-prism so the language chunk is only evaluated after the global is set. This unblocks the inline module on Pages, where the ReferenceError was killing the hero ER graph and every scroll-reveal animation. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1 parent 981feb2 commit 7922b84

2 files changed

Lines changed: 13 additions & 3 deletions

File tree

index.html

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1954,14 +1954,18 @@ <h2 class="cta-title" data-i18n-html="cta_title">
19541954
</div>
19551955
<script type="module">
19561956
import "prismjs/themes/prism.css";
1957-
import "prismjs";
1958-
import "prismjs/components/prism-sql";
1957+
import Prism from "prismjs";
19591958
import G6 from "@antv/g6";
19601959
import { parseSQLTables } from "./src/parser/sql";
19611960
import { parseDBML } from "./src/parser/dbml";
19621961
import * as ERBuilder from "./src/builder";
19631962
import * as Layout from "./src/layout";
19641963

1964+
// prism-sql 在模块顶层引用全局 Prism;ESM 下 prismjs 不会自挂 window,
1965+
// 必须先把核心赋到全局,再用动态 import 让语言定义晚于赋值执行。
1966+
window.Prism = Prism;
1967+
await import("prismjs/components/prism-sql");
1968+
19651969
// ───── YEAR ─────
19661970
document.getElementById("year").textContent = new Date().getFullYear();
19671971

vite.config.ts

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,13 @@ export default defineConfig({
4141
) {
4242
return "vendor-editor";
4343
}
44-
if (id.includes("node_modules/prismjs")) {
44+
// prismjs/components/* 在模块顶层访问全局 Prism,必须落在独立 chunk
45+
// 里,等运行时显式 window.Prism = Prism 后再动态加载,否则会和 core 一起
46+
// 被同步求值并抛 ReferenceError。
47+
if (
48+
id.includes("node_modules/prismjs") &&
49+
!id.includes("node_modules/prismjs/components/")
50+
) {
4551
return "vendor-prism";
4652
}
4753
},

0 commit comments

Comments
 (0)