使用Vite+Redoc开发React应用时左侧快捷链接面板缺失排查

我正在使用Vite和Redoc开发React应用，生成API规格文档时，带有快捷链接的左侧面板未显示。已确认并非API规格本身的问题，以下是预期效果与实际效果对比图：

相关依赖（package.json） #

"@mui/material": "^5.11.12",
"core-js": "^3.31.1",
"mobx": "^6.3.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.4.3",
"redoc": "^2.0.0-rc.72",
"styled-components": "^5.3.5",
"vite-plugin-node-polyfills": "^0.9.0"

Vite配置（vite.ts） #

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import eslint from 'vite-plugin-eslint';
import { nodePolyfills } from 'vite-plugin-node-polyfills';

// https://vitejs.dev/config/
export default defineConfig({
  build: {
    manifest: true,
  },
  plugins: [react(), eslint(), nodePolyfills({ globals: { process: true }, protocolImports: true })],
});

可能的原因排查方向 #

• Redoc配置错误：检查Redoc组件的props，确认是否误设了hideSidebar={true}，或者缺少expandDefaultServerVariables等影响侧边栏渲染的必要配置，确保没有手动隐藏侧边栏。
• 样式冲突：项目中的@mui/material、styled-components等样式库可能与Redoc内置样式冲突，导致侧边栏被隐藏或渲染异常。可以尝试暂时移除全局样式，或者用Shadow DOM隔离Redoc组件的样式环境。
• Redoc版本问题：当前使用的Redoc 2.0.0-rc.72是候选版本，存在侧边栏渲染bug的可能性较高。建议升级到最新稳定版，或降级至已知稳定的版本（如2.0.0正式版）测试。
• Vite插件影响：vite-plugin-node-polyfills的配置可能干扰Redoc的依赖加载逻辑，比如process全局变量的注入导致侧边栏功能异常。可暂时移除该插件，验证是否恢复正常。
• 容器尺寸不足：Redoc侧边栏需要足够的容器宽度才能显示，若父容器宽度过窄，可能会自动隐藏侧边栏。检查Redoc组件所在容器的样式，确保宽度满足渲染要求（例如设置min-width: 1200px）。

内容的提问来源于stack exchange，提问作者kboq