Webpack runtime problem in Next.js dev server

[omermecitoglu]

I think this is because Next.js runtime is commonjs and module is esm, and I'm almost sure that the source of the problem is eval

[GorgeousPuree]

Pretty annoying issue. Right now it's necessary to build next project and then start it to make generateOpenApiSpec work fine. In dev mode it's almost unusable.

[omermecitoglu]

New require(esm) feature of Node.js is supposed to fix this actually, but there is an issue with webpack polyfills. I'm looking for a solution without changing a lot things.

[GorgeousPuree]

Looking forward!

[omermecitoglu]

I discovered a solution for this

• remove generateOpenApiSpec from your docs page

"use client";
import SwaggerUI from "swagger-ui-react";
import "swagger-ui-react/swagger-ui.css";

const DocsPage = () => (
  <SwaggerUI url="/swagger" />
);

export default DocsPage;

• add export const dynamic = "force-static"; to your /swagger route

import generateOpenApiSpec from "@omer-x/next-openapi-json-generator";

export const dynamic = "force-static";

export async function GET() {
  const spec = await generateOpenApiSpec({
    ...
  });
  return Response.json(spec);
}

[omermecitoglu]

Actually that is just a temporary solution. It happens again if you change something in /swagger route

[btnalexandre]

Hello, this error seems to persist for me with this :

I tried your fix @omermecitoglu but nothing seems to work :( any idea ?

[GorgeousPuree]

any idea ?

you need to rerun the app everytime you change the code

[btnalexandre]

any idea ?

you need to rerun the app everytime you change the code

Yes that's what I do 😕

[btnalexandre]

#20 (comment)

Another problem for me, I have separated it on an existing (closed) ticket

[Glavin001]

This is a blocker for me using this library -- can't really accept needing to restart the app server to fix.
However, I'd really love to use library for my project.

How can I contribute to fixing this properly ASAP? I don't fully understand the problem yet or what would solve it. If there are any pointers I can do some more research and will push up a Pull Request.

Thank you for this library! It is exactly the right approach to this (Zod + TypeScript >> JSDoc).

[Glavin001]

Workaround: Save to a file (e.g. at public/openapi.json) and rebuild only once at first route call.

package.json:

  "scripts": {
+    "clean-openapi": "rm -f ./public/openapi.json",
+    "dev": "npm run clean-openapi && next dev",
-    "dev": "next dev",

app/api/docs/page.tsx:

"use client";

import ReactSwagger from "@/components/ReactSwagger";

export default function ApiDocsPage() {
  return (
      <ReactSwagger url="/api/openapi.json" />
  );
}

app/api/openapi.json/route.ts (for route /api/openapi.json):

import generateOpenApiSpec from "@omer-x/next-openapi-json-generator";
import { schemas } from "@/models";
import { NextResponse } from "next/server";
import fs from 'node:fs/promises';
import path from 'node:path';

export const dynamic = "force-static";

// Path to store the OpenAPI JSON file
const OPENAPI_FILE_PATH = path.join(process.cwd(), 'public', 'openapi.json');
console.log("OPENAPI_FILE_PATH", OPENAPI_FILE_PATH);

export async function GET() {
    try {
        // Check if we're in development mode
        const isDev = process.env.NODE_ENV === 'development';
        let spec: any;

        if (isDev) {
            // In development, check if the file exists first
            const fileExists = await fs.stat(OPENAPI_FILE_PATH)
                .then(() => true)
                .catch(() => false);
                
            if (fileExists) {
                console.log("Using existing OpenAPI spec from file (dev mode)");
                const fileContent = await fs.readFile(OPENAPI_FILE_PATH, 'utf-8');
                spec = JSON.parse(fileContent);
                return NextResponse.json(spec);
            }
        }
        
        // If not in dev mode or file doesn't exist, generate the spec
        console.log(`Generating OpenAPI spec (${process.env.NODE_ENV} mode)`);
        spec = await generateOpenApiSpec(schemas, {
            // options
        });
        
        // In development mode, write to file for persistence
        if (isDev) {
            await fs.writeFile(OPENAPI_FILE_PATH, JSON.stringify(spec, null, 2), 'utf-8');
            console.log("OpenAPI spec written to public/openapi.json");
        }
        
        return NextResponse.json(spec);
    } catch (error) {
        console.error("Error handling OpenAPI spec:", error);
        return NextResponse.json({ error: "Failed to generate or retrieve OpenAPI spec" }, { status: 500 });
    }
}