Generated spec causing a route to load infinitely when expanded

[fredachang]

Hi Omer,

Thanks for this library, it was exactly what we needed to generate typesafe routes in our Next app.

However, I am encountering a strange issue where a simple test GET route would load infinitely in the UI when expanded.

• I have confirmed this route works via Postman
• I have confirmed its not a problem with swagger-ui-react as the specs generated by another js-doc based library next-swagger-docs works with the UI
• I have confirmed our stack meets the requirements of the package
• We've had to change the moduleResolution of our ts-config to be bundler in order to import from your packages

If you could see if there is anything we are doing obviously wrong that would be much appreciated!

The route we set up to test:

import defineRoute from '@omer-x/next-openapi-route-handler';
import z from 'zod';

export const { GET } = defineRoute({
  operationId: 'getHello',
  method: 'GET',
  summary: 'Get hello world message',
  description: 'Returns a simple hello world message',
  tags: ['Hello'],
  pathParams: sayHelloParamsSchema,
  action: async (request) => {
    const { name } = request.pathParams;
    return Response.json({ message: `Hello ${name}!` });
  },
  responses: {
    200: {
      description: 'Hello world message returned successfully',
      content: z.object({
        message: z.string(),
      }),
    },
  },
});

where the api docs are rendered

import { ReactSwaggerDynamic } from '@/components/api-docs/react-swagger-dynamic';
import generateOpenApiSpec from '@omer-x/next-openapi-json-generator';

const Page = async () => {
  const spec = await generateOpenApiSpec({});

  return <ReactSwaggerDynamic spec={spec} />;
};

export default Page;

the react swagger component

'use client';

import dynamic from 'next/dynamic';
import 'swagger-ui-react/swagger-ui.css';

// Swagger UI is a class component which requires dynamic import
// see: https://github.com/swagger-api/swagger-ui/issues/9243
export const ReactSwaggerDynamic = dynamic(() => import('swagger-ui-react'), {
  ssr: false,
  loading: () => <p>Loading...</p>,
});

A console log of the spec generated by generateOpenApiSpec:

{
    "openapi": "3.1.0",
    "info": {
        "title": "Lawy",
        "version": "1.0.0"
    },
    "paths": {
        "/api/integrations/v2/hello/{name}": {
            "get": {
                "operationId": "getHello",
                "summary": "Get hello world message",
                "description": "Returns a simple hello world message",
                "tags": [
                    "Hello"
                ],
                "parameters": [
                    {
                        "in": "path",
                        "name": "name",
                        "required": true,
                        "schema": {
                            "type": "string"
                        }
                    }
                ],
                "responses": {
                    "200": {
                        "description": "Hello world message returned successfully",
                        "content": {
                            "application/json": {
                                "schema": {
                                    "$schema": "https://json-schema.org/draft/2020-12/schema",
                                    "type": "object",
                                    "properties": {
                                        "message": {
                                            "type": "string"
                                        }
                                    },
                                    "required": [
                                        "message"
                                    ],
                                    "additionalProperties": false
                                }
                            }
                        }
                    },
                    "500": {
                        "description": "Internal Server Error"
                    }
                }
            }
        }
    },
    "components": {
        "schemas": {}
    },
    "tags": []
}

The UI:

There is a strange error in the console as well, not sure if related:

[omermecitoglu]

Is this only happening on dev server? or production too?

It only worked well on dev server for the first time I made this library. Then everytime they updated some stuff in next.js, webpack, and swagger-ui-react there were different kind of errors on the console, and I couldn't keep up with them. At this point I can only blame webpack and hope turbopack will be better.

I'll try to make a working example with turbopack when next.js 16 is stable. But I don't believe I can fix the current problem that occurs on dev server.