Skip to content

fix(frontend): resolve the refractor chunk failure that remounts the playground and closes the Advanced drawer #5323

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mmabrouk wants to merge 1 commit into
base: main
Choose a base branch
from
+6 −6
Open

fix(frontend): resolve the refractor chunk failure that remounts the playground and closes the Advanced drawer #5323

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions web/oss/next.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,17 +135,17 @@ const COMMON_CONFIG: NextConfig = {
loader: "swc-loader",
})

// Ignore problematic ESM imports from @ant-design/x that we don't use
// This prevents build errors for mermaid and refractor packages
// Ignore the mermaid import from @ant-design/x — we don't use that surface.
// NOTE: do not ignore `refractor/*` here. react-syntax-highlighter's PrismAsync
// dynamically imports `refractor/all` at runtime; stubbing it out throws
// "Cannot find module 'refractor/all'" when a chat code block renders, which trips
// the app error boundary and remounts the playground. refractor@5 resolves every
// subpath rsh imports, so the import must be left intact.
Comment on lines +138 to +143

@coderabbitai coderabbitai Bot Jul 14, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win

Condense the inline comment to comply with guidelines.

The explanation is valid and highlights a genuinely surprising constraint, but it spans six lines. As per coding guidelines, keep in-code comments to one short line maximum unless a genuinely surprising constraint requires a brief exception. The comment can be significantly shortened while retaining the core warning about the runtime constraints.

♻️ Proposed fix 
-                  // Ignore the mermaid import from `@ant-design/x` — we don't use that surface.
-                  // NOTE: do not ignore `refractor/*` here. react-syntax-highlighter's PrismAsync
-                  // dynamically imports `refractor/all` at runtime; stubbing it out throws
-                  // "Cannot find module 'refractor/all'" when a chat code block renders, which trips
-                  // the app error boundary and remounts the playground. refractor@5 resolves every
-                  // subpath rsh imports, so the import must be left intact.
+                  // Ignore unused mermaid. Do not ignore `refractor/*`; react-syntax-highlighter requires it at runtime to prevent code block rendering crashes.
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
// Ignore the mermaid import from @ant-design/x — we don't use that surface.
// NOTE: do not ignore `refractor/*` here. react-syntax-highlighter's PrismAsync
// dynamically imports `refractor/all` at runtime; stubbing it out throws
// "Cannot find module 'refractor/all'" when a chat code block renders, which trips
// the app error boundary and remounts the playground. refractor@5 resolves every
// subpath rsh imports, so the import must be left intact.
// Ignore unused mermaid. Do not ignore `refractor/*`; react-syntax-highlighter requires it at runtime to prevent code block rendering crashes.

Source: Coding guidelines

config.plugins.push(
new webpack.IgnorePlugin({
resourceRegExp: /^mermaid$/,
contextRegExp: /@ant-design[\\/]x/,
}),
new webpack.IgnorePlugin({
resourceRegExp: /^refractor\/.+$/,
contextRegExp: /react-syntax-highlighter/,
}),
)

if (!isServer) {
Expand Down
Loading