scriptoriumadmin/Roo-Code
1
0
Fork 0
mirror of https://github.com/RooVetGit/Roo-Code.git synced 2026-08-28 05:27:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: resolve Mermaid CSP errors with enhanced bundling strategy (#3681)

Browse source 
Implements a more robust bundling strategy for Mermaid diagrams to prevent
dynamic chunk loading at runtime, which was causing CSP violations.

Key changes:
- Added manualChunks function in vite.config.ts to consolidate all Mermaid
  code and dependencies into a single bundle
- Added mermaid and dagre to optimizeDeps.include for pre-bundling
- Customized chunkFileNames to ensure predictable output
- Removed incorrect static imports in MermaidBlock.tsx

This resolves the CSP errors where Mermaid was attempting to dynamically
load chunks like chunk-RZ5BOZE2.js and channel.js from the webview origin.

Fixes: #3680

Signed-off-by: Eric Wheeler <roo-code@z.ewheeler.org>
Co-authored-by: Eric Wheeler <roo-code@z.ewheeler.org>
Co-authored-by: Daniel <57051444+daniel-lxs@users.noreply.github.com>
This commit is contained in:
KJ7LNW 2025-06-04 14:29:22 -07:00 • committed by GitHub
parent 4befe5ba24
commit 8cc89149b4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 39 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
webview-ui/src/components/common/MermaidBlock.tsx
View file

@ -1,12 +1,16 @@
import { useEffect, useRef, useState } from "react"
import mermaid from "mermaid"
import { useDebounceEffect } from "@src/utils/useDebounceEffect"
import styled from "styled-components"
import { useDebounceEffect } from "@src/utils/useDebounceEffect"
import { vscode } from "@src/utils/vscode"
import { useAppTranslation } from "@src/i18n/TranslationContext"
import { useCopyToClipboard } from "@src/utils/clipboard"
import CodeBlock from "./CodeBlock"
// Removed previous attempts at static imports for individual diagram types
// as the paths were incorrect for Mermaid v11.4.1 and caused errors.
// The primary strategy will now rely on Vite's bundling configuration.
const MERMAID_THEME = {
background: "#1e1e1e", // VS Code dark theme background
textColor: "#ffffff", // Main text color

35
webview-ui/vite.config.ts
View file

@ -98,8 +98,36 @@ export default defineConfig(({ mode }) => {
rollupOptions: {
output: {
entryFileNames: `assets/[name].js`,
chunkFileNames: `assets/[name].js`,
chunkFileNames: (chunkInfo) => {
if (chunkInfo.name === "mermaid-bundle") {
return `assets/mermaid-bundle.js`
}
// Default naming for other chunks, ensuring uniqueness from entry
return `assets/chunk-[hash].js`
},
assetFileNames: `assets/[name].[ext]`,
manualChunks: (id, { getModuleInfo }) => {
// Consolidate all mermaid code and its direct large dependencies (like dagre)
// into a single chunk. The 'channel.js' error often points to dagre.
if (
id.includes("node_modules/mermaid") ||
id.includes("node_modules/dagre") || // dagre is a common dep for graph layout
id.includes("node_modules/cytoscape") // another potential graph lib
// Add other known large mermaid dependencies if identified
) {
return "mermaid-bundle"
}
// Check if the module is part of any explicitly defined mermaid-related dynamic import
// This is a more advanced check if simple path matching isn't enough.
const moduleInfo = getModuleInfo(id)
if (moduleInfo?.importers.some((importer) => importer.includes("node_modules/mermaid"))) {
return "mermaid-bundle"
}
if (moduleInfo?.dynamicImporters.some((importer) => importer.includes("node_modules/mermaid"))) {
return "mermaid-bundle"
}
},
},
},
},
@ -116,6 +144,11 @@ export default defineConfig(({ mode }) => {
},
define,
optimizeDeps: {
include: [
"mermaid",
"dagre", // Explicitly include dagre for pre-bundling
// Add other known large mermaid dependencies if identified
],
exclude: ["@vscode/codicons", "vscode-oniguruma", "shiki"],
},
assetsInclude: ["**/*.wasm", "**/*.wav"],