fix: resolve Mermaid CSP errors with enhanced bundling strategy #3681
Conversation
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: cline#3680 Signed-off-by: Eric Wheeler <roo-code@z.ewheeler.org>
|
|
Fixes: #3680 |
|
Hey @KJ7LNW, thank you! Looks like this solves the issue, I don't see this anymore: Just curious, does this increase the bundle size at all? Should we look out for this or is it negligible? |
I do not know what the size difference looks like, but it does load all the mermaid code into the webview. Subjectively, this has the side effect that mermaid diagram seem to load faster and renders more smoothly while scrolling. |
|
You can sort of think of this as analogous to the audio pull request (#3470) where sound output was moved into the webview instead of the backend. |
|
Could this potentially aggravate the memory issues we are having on the webview? Let's say the code is not as small as we think, I think it makes sense to at least have an idea of the impact. |
I had the model build with and without and the results are surprising. The effect of bundling it introduced optimizations that reduce the size. This is the model evaluation with a full clean between two different builds and compared the output size:
|
|
Looks good to me, thank you for the report! |
Context
Mermaid diagrams were causing CSP errors in the webview because Mermaid was attempting to dynamically load chunks from the webview's origin. This PR implements an enhanced bundling strategy to resolve these errors.
Implementation
This PR implements a more robust bundling strategy for Mermaid diagrams to prevent dynamic chunk loading at runtime:
manualChunksfunction invite.config.tsto consolidate all Mermaid code and its dependencies (like dagre) into a single bundle namedmermaid-bundle.jsoptimizeDeps.includefor pre-bundlingchunkFileNamesto ensure predictable outputMermaidBlock.tsxand reordered importsThe solution ensures that all Mermaid-related code is part of the initial JavaScript load, served via
vscode-webview-resource:URIs, which are permitted by the existing Content Security Policy.How to Test
cd webview-ui && npm run buildnet::ERR_ACCESS_DENIEDerrors or CSP violations related to Mermaid chunksGet in Touch
Discord: KJ7LNW
Important
Resolve Mermaid CSP errors by consolidating Mermaid and dependencies into a single bundle using Vite's enhanced bundling strategy.
manualChunksinvite.config.tsto consolidate Mermaid and dependencies (e.g., dagre) intomermaid-bundle.js.optimizeDeps.includefor pre-bundling invite.config.ts.chunkFileNamesinvite.config.tsfor predictable output.MermaidBlock.tsxand reordered imports.MermaidBlock.tsx.This description was created by
for ddea899. You can customize this summary. It will automatically update as commits are pushed.