api doesn't load component on production

[jellydn]

api doesn't load component on production

[octavioamu]

@jellydn Thanks for responding.
That is because the api-doc is using the static generated file swagger.json which is the 3rd option.
Same with the playground for example if you where using the 2nd to generate an api/doc probably because you want 3rd parties UI with the schemas you would use it like:

<APIDocumentUI
          apiDescriptionUrl="/api/doc"
          layout="sidebar"
          router="hash"
/>

Instead of the static one https://github.com/jellydn/next-swagger-doc/blob/main/examples/example/pages/playground.tsx#L51

A good way to test it is looking the api/doc endpoint I posted https://next-swagger-doc-demo.productsway.com/api/doc
when you run locally you will see the data will be in place when going localhost:3000/api/doc, even if you run yarn build and then yarn start api/doc will have the components schema there, which is really weird that got removed when deployed on vercel.

Spent my day yesterday testing different approach to try to see if I could make the api/doc append the schemas as local without good luck :( .

Let me know if you need some other info or I can help in any way, I will keep fighting it and post here if I realize something else.
Thanks!!

[octavioamu]

Also because is working on local with "yarn build" and not in vercel (that runs by default the same command) which is very strange my high guess is have something todo with async code on the server taking more time than local and for that not being appended. But again, really high guess.

Adding also my project urls just in case
https://public-api-git-feat-swagger-windranger.vercel.app/api-doc (working fine)
https://public-api-git-feat-swagger-windranger.vercel.app/api/doc (empty component on prod)
https://public-api-git-feat-swagger-windranger.vercel.app/playground (use api/doc so on prod no schema are showed)

[octavioamu]

Interesting I tried with vercel-cli to avoid deploying each time, and worked, but now that Im thinking I didn't remove the folders created by yarn dev, so maybe on my local is working because still fetching from the other folders previously created.

edit: from tests I did nextjs doesn't seems to remove comments so seems that is not the problem I believe the problem is on the path to the files. api-doc page works perfectly as it fetch the data on build time, is able to read the files and generate the static data served. The reason of that working is because is using getStaticProps which looks into the public folder /files without problem.

[jellydn]

Thanks, @octavioamu it does work on the demo https://next-swagger-doc-demo.productsway.com/api-doc. I will check tonight or so for the API endpoint.

[octavioamu]

I think I know what is going on, you are using process.cwd() https://github.com/jellydn/next-swagger-doc/blob/main/src/swagger.ts#L39 I added a console log on the /api/doc endpoint and this is what cwd is on vercel as function are actually edge functions /var/task so the problem is how is being routed to find paths, the public folder is already "/" so probably doesn't need pwd to find the path and could go relative instead of absolute

more about this topic
vercel/next.js#36031
https://nextjs.org/docs/advanced-features/output-file-tracing
diff approach to go around this issue
vercel/next.js#32236

[octavioamu]

I keep digging on this, one little suggestion is change join() to resolve() at least seems will be more secure if people input '/models/' on schemaFolders

[octavioamu]

no, resolve doesn't solve it, this is the server log of urls getting generated with resolve

[GET] /api/doc
15:55:31:07
process.cwd() 1 /var/task
apiss [
  '/var/task/pages/api/**/*.ts',
  '/var/task/pages/api/**/*.tsx',
  '/var/task/pages/api/**/*.jsx',
  '/var/task/pages/api/**/*.js',
  '/var/task/pages/api/**/*.json',
  '/var/task/pages/api/**/*.swagger.yaml',
  '/var/task/.next/server/pages/api/**/*.js',
  '/var/task/.next/server/pages/api/**/*.swagger.yaml',
  '/var/task/.next/server/pages/api/**/*.json',
  '/var/task/public/**/*.swagger.yaml',
  '/var/task/public/**/*.json',
  '/types/**/*.ts',
  '/types/**/*.tsx',
  '/types/**/*.jsx',
  '/types/**/*.js',
  '/types/**/*.json',
  '/types/**/*.swagger.yaml',
  '/types/**/*.js',
  '/types/**/*.swagger.yaml',
  '/types/**/*.json',
  '/var/task/public/**/*.swagger.yaml',
  '/var/task/public/**/*.json'
]

The created structure on vercel

[jellydn]

I think we could have possible solutions here:

• 1st solution: as far I as know, NextJs will remove comment on build project (next build) so we need to find a way to keep the comment code for generate swagger spec
• 2nd solution: write a custom Webpack plugin to generate swagger file on build

[jellydn]

Hi @octavioamu I've just released version from #639 Could you take a try again? Thanks.

Also updated example aps.
0106836