[Refactor/Chore] eslint error for node/panel components in CustomNode renderer

问题场景

在 Dify 前端仓库中，开发者对 web/app/components/workflow/nodes/index.tsx 执行 lint，或使用未读取 suppression 列表的编辑器时，会看到针对 CustomNode renderer 中 node/panel 组件的 eslint-react/static-components 报错。Issue 附带截图显示该文件存在多处相关告警。该问题被登记为 refactor/chore，不是运行时功能故障。

报错原文

[Refactor/Chore] eslint error for node/panel components in CustomNode renderer

dify/web/app/components/workflow/nodes/index.tsx

eslint-react/static-components

原因分析

最可能的原因是：eslint-react/static-components 规则会标记在渲染期间动态创建或动态选取的组件，而不是在模块作用域静态声明的组件。该文件使用了从 map 中选取组件的模式：

const NodeComponent = useMemo(() => NodeComponentMap[nodeData.type], [nodeData.type])!
...
<NodeComponent />

Panel 导出中的 PanelComponent 以及内联的 () => null fallback 也存在同类写法。规则认为这类模式会让 React 重新挂载组件树，而不是进行协调。

另外，仓库实际使用 Oxlint（不是原生 ESLint），且 web/app/components/workflow/nodes/index.tsx 已在 oxlint-suppressions.json 中记录了 4 处 eslint-react/static-components 违规，规则对所有 web/**/*.{jsx,tsx} 文件配置为 error。因此它当前不会导致 CI 失败，但直接 lint 该文件或使用忽略 suppression 列表的编辑器时会暴露出来。

环境排查

• 确认使用的是 Dify 仓库当前的 lint 配置，而非自定义 ESLint 配置；仓库代码文件由 Oxlint 处理。
• 确认 web/app/components/workflow/nodes/index.tsx 是否仍在 oxlint-suppressions.json 的 suppression 列表中。
• 确认 eslint-react/static-components 在 lint.config.ts 中对 web/**/*.{jsx,tsx} 的配置状态。
• 确认编辑器/插件是否读取了 oxlint-suppressions.json；忽略该文件的工具会直接报出被抑制的告警。
• Issue 未提供 Node、Python、CUDA、显卡、依赖版本等信息，无需据此排查。

解决步骤

1. 定位 web/app/components/workflow/nodes/index.tsx 中通过 NodeComponentMap[nodeData.type] 配合 useMemo 选取 NodeComponent 的写法，以及 Panel 导出中对应的 PanelComponent 和内联 () => null fallback。
2. 可优先尝试去掉 useMemo 选择逻辑，改为对 nodeData.type / nodeClass 做分支，并直接用 createElement 渲染目标组件。
3. 或者重构 NodeComponentMap / PanelComponentMap，让规则能静态验证每个条目都是稳定的模块级组件引用，参考 components.ts 中 WorkflowAgentNode 和 WorkflowAgentPanel 以顶层命名函数声明的做法。
4. 改动完成后，从 oxlint-suppressions.json 中移除 web/app/components/workflow/nodes/index.tsx 对应条目。
5. 重新运行仓库的 lint 流程，确认该文件不再触发 eslint-react/static-components。

验证方法

对该文件单独执行 lint，确认不再出现 eslint-react/static-components 报错；同时检查移除 suppression 后 CI 的 lint 阶段仍然通过。若条件允许，运行工作流页面相关功能，确认节点与面板仍能正常渲染且没有异常重挂载。

参考来源

langgenius/dify #42468

AI 工具推荐

想把多个 AI 模型放在一个入口？

GamsGo AI 集成 ChatGPT、DeepSeek、Gemini、Claude、Midjourney、Veo 等常用模型，适合写作、绘图、视频和日常 AI 工作流。

了解 GamsGo AI

推广链接：通过此链接购买，我可能获得佣金，不影响你的价格。