Open m0x61h0x64i opened 1 year ago
Can you console.log your swaggerDocs and take the output and put it into the online editor and make sure it is valid:
https://editor.swagger.io/?_ga=2.266158735.1060447764.1666086131-1275609666.1666086130
I tested your code and works file for me however I don't have your full swagger file so it is possible there is an error in the full output
I am having the same problem here.
If it is any help those are my files:
swagger.js rout:
import { Router } from 'express';
const router = Router();
import swaggerUi from 'swagger-ui-express';
import swaggerConfige from '../config/swagger.js';
router.use('/api-docs', swaggerUi.serve);
router.get('/api-docs', swaggerUi.setup(swaggerConfige));
export default router;
my swaggerConfige object:
import swaggerJSDoc from 'swagger-jsdoc';
import confige from '../confige.js';
const options = {
definition: {
openapi: "3.0.0",
info: {
title: "Rick and morty",
version: "1.0.0",
description: "A simple rick and morty website."
},
servers: [
{
url: "https://rickandmortybackend.vercel.app/",
description: "Production"
},
{
url: `http://localhost:${confige.port}/`,
description: "Development"
}
]
},
apis: [`./docs/*.js`],
};
export default swaggerJSDoc(options);
In addition, those are my docs files.
In development mode everything is ok, but in production if I inspect the network tab the CSS file won't load:
@scottie1984, please help us!
I can only really find this in relation to others have issues with Vercel.
So I recently found out what the issue was on our end.
We were using the library modclean
which "Remove unwanted files and directories from your node_modules folder" and was accidentally removing some of the files in node_modules/swagger-ui-dist
that contained the styling.
We had to have it ignore that folder and the styling loaded properly afterwards, so I'd check if anything you're running during deployment is touching files in that folder
That makes sense- i wonder is there anything that can be done to this module to allow the files not to be deleted by any process?
I'm guessing it uses some sort of tree shaking algorithm to go through modules and see which files are imported/required in the javascript or css, and since this is just a directory that is statically served (which is an express only concept) maybe that's why it ended up removing random files from it that ended up being needed. So maybe find some way to "include" all the files somehow?
Hi guys. I was facing the same problem. Html file was loading instead of swagger-ui.css
. The reason was similar to the above comment: something was treeshaking (even though I don't use modclean
) the dependency of swagger-ui-express
, namely, swagger-ui-dist
and removing all the its files except the following:
package.json
index.js
absolute-path.js
swagger-ui-bundle.js
swagger-ui-standalone-preset.js
I wasn't sure what exactly was treeshaking the dependencies, so I tried a bunch of different methods to prevent it. In the end what helped was adding the property files
in package.json
of swagger-ui-dist
, on the same level as other properties like name
and version
, and specifying all the module files there:
"files": [
"LICENSE",
"NOTICE",
"README.md",
"absolute-path.js",
"favicon-16x16.png",
"favicon-32x32.png",
"index.css",
"index.html",
"index.js",
"oauth2-redirect.html",
"package.json",
"swagger-initializer.js",
"swagger-ui-bundle.js",
"swagger-ui-bundle.js.map",
"swagger-ui-es-bundle-core.js",
"swagger-ui-es-bundle-core.js.map",
"swagger-ui-es-bundle.js",
"swagger-ui-es-bundle.js.map",
"swagger-ui-standalone-preset.js",
"swagger-ui-standalone-preset.js.map",
"swagger-ui.css",
"swagger-ui.css.map",
"swagger-ui.js",
"swagger-ui.js.map"
],
I also noticed that the downgrade to swagger-ui-express
3.x version solves the problem as well, since 3.x doesn't rely in the same way on swagger-ui-dist
I believe.
The above solutions, however, are far from ideal since they involve either meddling with the configuration of a third-party library, or downgrading the package.
@keptt Could you raise with swagger-ui directly?
@shockey in case you are still maintaining swagger-ui-dist, might be one worth fixing.
@scottie1984 sure, will do
I solved it this way :
use this as options while passing it into the swaggerUi.setup second parameter :
const options = {
customCssUrl: 'https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/5.4.2/swagger-ui.css'
}
You can get the latest css file on : https://cdnjs.com/libraries/swagger-ui
Idea came from : https://stackoverflow.com/questions/60082388/nestjs-swagger-ui-css-resource-not-found-in-production-mode
index.js :
swagger file :
others have same issue : https://github.com/scottie1984/swagger-ui-express/issues/312#issuecomment-1281607569![image](https://user-images.githubusercontent.com/109550653/196384583-21675d34-c690-45ce-809b-1ac6536d2ec6.png)
swagger-ui-express version :
4.5.0