fix: restore Swagger UI on api-docs page
All checks were successful
CI / build (push) Successful in 1m23s
CI / cleanup-branch (push) Has been skipped
CI / docker (push) Successful in 50s
CI / deploy (push) Successful in 38s
CI / deploy-feature (push) Has been skipped

- Change Vite proxy pattern from /api to /api/ so /api-docs client
  route is not captured and proxied to the backend
- Fix SwaggerUIBundle init: remove empty presets/layout overrides that
  crashed the internal persistConfigs function
- Use correct CSS import (swagger-ui.css instead of index.css)
- Add requestInterceptor to auto-attach JWT token to Try-it-out calls
- Add swagger-ui-bundle to optimizeDeps.include for reliable loading
- Remove unused swagger-ui-dist.d.ts type declarations

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
2026-03-24 20:53:48 +01:00
parent 57ce1db248
commit e7590d72fd
3 changed files with 19 additions and 17 deletions

View File

@@ -1,24 +1,32 @@
import { useEffect, useRef } from 'react';
import { config } from '../../config';
import { useAuthStore } from '../../auth/auth-store';
import 'swagger-ui-dist/swagger-ui.css';
export default function SwaggerPage() {
const containerRef = useRef<HTMLDivElement>(null);
const token = useAuthStore((s) => s.accessToken);
useEffect(() => {
let cleanup: (() => void) | undefined;
let cancelled = false;
import('swagger-ui-dist/swagger-ui-bundle').then(({ default: SwaggerUIBundle }) => {
if (!containerRef.current) return;
import('swagger-ui-dist/swagger-ui-bundle').then((mod) => {
const SwaggerUIBundle = mod.default || mod;
if (cancelled || !containerRef.current || typeof SwaggerUIBundle !== 'function') return;
SwaggerUIBundle({
url: `${config.apiBaseUrl}/api-docs`,
domNode: containerRef.current,
presets: [],
layout: 'BaseLayout',
requestInterceptor: (req: { headers: Record<string, string> }) => {
if (token) {
req.headers['Authorization'] = `Bearer ${token}`;
}
return req;
},
});
});
return () => cleanup?.();
}, []);
return () => { cancelled = true; };
}, [token]);
return (
<div>

View File

@@ -1,9 +0,0 @@
declare module 'swagger-ui-dist' {
export function getAbsoluteFSPath(): string;
export const SwaggerUIBundle: unknown;
export const SwaggerUIStandalonePreset: unknown;
}
declare module 'swagger-ui-dist/swagger-ui-bundle' {
const SwaggerUIBundle: (config: Record<string, unknown>) => void;
export default SwaggerUIBundle;
}

View File

@@ -9,7 +9,7 @@ export default defineConfig({
plugins: [react()],
server: {
proxy: {
'/api': {
'/api/': {
target: apiTarget,
changeOrigin: true,
secure: false,
@@ -21,6 +21,9 @@ export default defineConfig({
},
},
},
optimizeDeps: {
include: ['swagger-ui-dist/swagger-ui-bundle'],
},
build: {
outDir: 'dist',
},