Vite with Redoc Left Panel Missing

Question

I'm developing an React application with vite and redoc. For some reason the left panel with the quick links is just not appearing when I generate the spec. I've verified it isn't the specs. Imaged demonstrating the expected versus actual behavior is below. Any idea why the left panel could be missing?

Relevant dependencies in 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"

My 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 })],
});

Thanks,

Answer 1

After a painstaking few days, finally got this working.

When running npm install redoc, one of its dependencies mobx-react^7.2.0 was automatically installed. My organization's private npm repository's latest mobx-react version is 7.2.1. Turns out [email protected] is incompatible with this version of redoc (which shouldn't have been the case, but maybe there's been an update since then) but [email protected] is compatible.

Moral of the story, try downloading from a public registry to see if something works, and narrow down the broken dependency structure from there!