No operations defined in spec! error

[alexHlebnikov]

Describe the bug

While trying to add swagger to my project I faced error:
No operations defined in spec!

Docs folder: pages/api.

My code looks like this:

api-doc.tsx

import { GetStaticProps, InferGetStaticPropsType } from 'next';
import { createSwaggerSpec } from 'next-swagger-doc';
import 'swagger-ui-react/swagger-ui.css';
import dynamic from 'next/dynamic';

const SwaggerUI = dynamic(import('swagger-ui-react'), { ssr: false });

const ApiDoc = ({ _spec }: InferGetStaticPropsType<typeof getStaticProps>) => {
  return <SwaggerUI url="/api/doc" />;
};

export const getStaticProps: GetStaticProps = async () => {
  const spec: Record<string, any> = createSwaggerSpec({
    definition: {
      openapi: '3.0.0',
      info: {
        title: 'Stories Api',
        version: '1.0',
      },
    },
    apiFolder: 'pages/api',
  });
  return {
    props: {
      spec,
    },
  };
};

export default ApiDoc;

And here's my spec definition in /pages/api/doc.ts:

Reproduction

npm run dev

System Info

System:
    OS: macOS 12.5.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 312.75 MB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.15.0 - ~/.nvm/versions/node/v16.15.0/bin/node
    Yarn: 1.22.5 - ~/.yarn/bin/yarn
    npm: 8.11.0 - ~/.nvm/versions/node/v16.15.0/bin/npm
    Watchman: 2022.03.21.00 - /usr/local/bin/watchman
  Browsers:
    Brave Browser: 91.1.26.74
    Chrome: 105.0.5195.102
    Firefox: 102.0.1
    Safari: 15.6.1
    Safari Technology Preview: 16.0

package.json: 

"next": "^12.2.5",
"next-swagger-doc": "0.3.6",
"swagger-ui-react": "4.14.0",
"typescript": "4.8.2"

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

[jellydn]

Quick question here. Did you check the example app? Is that same setup? If not, could you create a reproduce repository so I could take a look? Thanks.

[marcus-castanho]

I was facing the same error trying to generate the specs both from api-doc page and from api/doc route. It turns out the 'apiFolder' property uses an absolute path to find the api routes with the swagger comments. That said, with a projet structure like someNextProject/src/pages/api you must set the swaggerOptions object to something like this:

{
  definition: {
    openapi: "3.0.0",
    info: {
      title: "NextJS Swagger",
      version: "0.1.0",
    },
  },
  apiFolder: "src/pages/api",
}

Also, since this concerns the structure of the project, maybe it should described in the README example and/or in the type definitions that 'apiProperty' uses an absolute path of the next projet.

[raulmarindev]

Wow, I was struggling with this issue too. Thank you so much!

[MonzerTransTec]

Thanks @marcus-castanho

[maukoese]

Thank you so much for this. Been struggling for the last couple of hours

[edtimer]

Also ensure that the following is typed exactly, wasted hours figuring the issue. replace /api/v1/rules with your route

 * @swagger
 * /api/v1/rules:
 *   get:
 *     summary: Returns all the rule groups

 *     responses:
 *       200:
 *         description: All rules have been fetched successfully
 *       400:
 *         description: No rules found
 *       401:
 *         description: UnAuthorized access
 */