Bugfix: Monaco 离线加载(预构建 min/vs 自托管) #13
Assignees
tao.chen (tao chen)
Clear assignees
tao.chen (tao chen)
No Assignees
Notifications
Due Date
No due date set.
Dependencies
No dependencies set.
Reference: tao.chen/model-platform#13
Reference in New Issue
Block a user
Bug
Python 编辑与预览一直卡在 loading,控制台报
Monaco initialization: error。但 contents API(/jupyter/.../api/contents/...)正常返回内容,排除了后端问题。根因
@monaco-editor/react默认通过@monaco-editor/loader从 jsDelivr CDN(https://cdn.jsdelivr.net/npm/monaco-editor@.../min/vs)异步加载 Monaco 核心 + worker。离线 / 内网环境 CDN 不可达 →<Editor>初始化失败、永远停在内部 loading 状态。PythonEditor 和 PythonPreview 都依赖<Editor>,所以一起打不开。修复路线(已验证可走通)
走 monaco 预构建
min/vs(IIFE/AMD)+loader.config({ paths })自托管 路线,绕开 Vite 8 / Rolldown 与 monaco ESM 的new URL(...?esm, import.meta.url)worker bootstrap 兼容坑(Failed to resolve module specifier "../../../base/common/worker/webWorkerBootstrap.js")。不要走
loader.config({ monaco })+import * as monaco from "monaco-editor"的 ESM bundle 路线 —— Rolldown 不会改写 monaco 内部深嵌套相对 worker URL,运行时崩。改动文件
frontend/app/lib/monacoSetup.client.ts(新建,.client后缀防 SSR 预渲染崩)frontend/scripts/copy-monaco.mjs(新建,fs.cpSync复制node_modules/monaco-editor/min/vs→public/monaco/vs)frontend/package.json(加monaco-editor@^0.56.0依赖;scripts 同时挂postinstall/predev/prebuild跑 copy —— pnpm v11 idempotent install 跳 postinstall,三处都挂才稳)frontend/.gitignore(加/public/monaco/vs/,24MB min/vs 不进 git)frontend/public/monaco/.gitkeep(占位)frontend/app/root.tsx(顶部 importmonacoSetup.client)验证
pnpm build✓build/client/monaco/vs/loader.js+editor.main.js完整pnpm typecheck✓记忆
已更新
~/.claude/projects/.../memory/monaco-offline-loading.md,记录正确路线与 ESM 路线失败原因。Task: xx2rymd46h42lopsayehbkag
tao.chen commented:
修复路径: 预构建
min/vs+loader.config({ paths })自托管到/monaco/vs。关键经验(已沉淀到项目记忆
monaco-offline-loading.md):loader.config({ monaco })+import * as monaco from "monaco-editor"—— Vite 8 / Rolldown 与 monaco ESM 的new URL(...?esm, import.meta.url)worker bootstrap 不兼容,运行时Failed to resolve module specifier webWorkerBootstrap.jsmin/vs(IIFE/AMD) +loader.config({ paths: { vs: "/monaco/vs" } })—— 自带 worker 加载,完全绕开 bundlercopy-monaco必须同时挂postinstall/predev/prebuild兜底pnpm build仍跑 server 预渲染,monaco 配置必须用.client后缀验证:
pnpm build✓ /pnpm typecheck✓ /build/client/monaco/vs/完整。tao.chen commented:
报错:
Cannot find module '/app/scripts/copy-monaco.mjs'根因:
frontend/Dockerfile分层复制利用缓存 —— 先COPY frontend/package.json frontend/pnpm-lock.yaml ./再RUN pnpm install --frozen-lockfile,完整源码(含scripts/)在COPY frontend/ ./之后才进来。postinstall在 install 阶段跑,此时/app/scripts/还不存在,直接MODULE_NOT_FOUND。修复:
frontend/package.json删除postinstall,只保留predev+prebuild(外加copy:monaco作手动入口)。Why not 修 Dockerfile(把
COPY frontend/ ./提前): 会破坏 install 层缓存,每次源码改动都重装依赖,得不偿失。Why not 只删 postinstall 的 Docker 坑、保留 pnpm 兜底: pnpm v11 idempotent install 本来就会跳 postinstall,postinstall 本身就不可靠。两层问题都指向同一个解法 —— 不要用 postinstall。
验证:
pnpm build✓ (prebuild 跑 copy 正常)。Docker 重新构建应能通过。