viteredoc

Vite with Redoc Left Panel Missing

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

Expectation

Reality

Thanks,

Solution

  • 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 mobx@7.2.1 is incompatible with this version of redoc (which shouldn't have been the case, but maybe there's been an update since then) but mobx@7.6.0 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!