diff --git a/frontend/src/components/custom-tools/combined-output/CombinedOutput.jsx b/frontend/src/components/custom-tools/combined-output/CombinedOutput.jsx index 7e30a99339..a80d0d145c 100644 --- a/frontend/src/components/custom-tools/combined-output/CombinedOutput.jsx +++ b/frontend/src/components/custom-tools/combined-output/CombinedOutput.jsx @@ -1,4 +1,4 @@ -import "prismjs"; +// global Prism is installed eagerly at app entry (helpers/prismSetup.js) import "prismjs/components/prism-json"; import "prismjs/plugins/line-numbers/prism-line-numbers.css"; import "prismjs/plugins/line-numbers/prism-line-numbers.js"; diff --git a/frontend/src/helpers/prismSetup.js b/frontend/src/helpers/prismSetup.js new file mode 100644 index 0000000000..6c20d8ce2e --- /dev/null +++ b/frontend/src/helpers/prismSetup.js @@ -0,0 +1,20 @@ +import Prism from "prismjs"; + +// The prismjs language/plugin add-ons used across the app (`prismjs/components/*`, +// `prismjs/plugins/*`) register their grammars onto a *bare global* `Prism` and +// carry no import edge back to prismjs core. Under Vite's code-split production +// build those add-ons get hoisted into a shared chunk (Combined Output *and* the +// manual-review ResultEditor both import `prism-json`), which can evaluate before +// any per-component setup runs — so they threw `ReferenceError: Prism is not +// defined`, blanking the Prompt Studio detail page and the HITL review page. +// +// This module is imported EAGERLY from the app entry (`index.jsx`) so the global +// is installed at bootstrap, before any lazy chunk — including the shared one +// holding the add-ons — can load. Assign unconditionally: the global must be THIS +// instance, the one the add-ons extend and that `Prism.highlightAll()` reads; a +// `!globalThis.Prism` guard could leave a different, pre-existing Prism in place +// and silently drop highlighting. The used `Prism` binding also keeps the bundler +// from tree-shaking core away. +globalThis.Prism = Prism; + +export default Prism; diff --git a/frontend/src/index.jsx b/frontend/src/index.jsx index 66079513dd..608edbf951 100644 --- a/frontend/src/index.jsx +++ b/frontend/src/index.jsx @@ -1,3 +1,6 @@ +// Install the global `Prism` at bootstrap, before any lazy chunk (incl. the +// shared one holding prismjs add-ons) can load. See helpers/prismSetup.js. +import "./helpers/prismSetup"; import posthog from "posthog-js"; import { PostHogProvider } from "posthog-js/react"; import React from "react";