[Bug] css file dosent load on production

[m0x61h0x64i]

index.js :

const swaggerUi = require('swagger-ui-express')
const swagger = require('./swagger')
app.use('/api-docs', swaggerUi.serve, swagger)

swagger file :

const swaggerJsDoc = require('swagger-jsdoc')
const swaggerUi = require('swagger-ui-express')

swaggerOptions = {
    swaggerDefinition: {
        openapi: '3.0.1',
        info: {
            title: 'APIs',
            version: '2.0.0'
        },
        servers:
        [
            {
                url: 'https://example.com'
            }
        ],
        components: {
            securitySchemes:
            {
                    JWT: 
                {
                    name: 'User Authorization',
                    description: 'Value: Bearer {token}',
                    type: 'apiKey',
                    scheme: 'bearer',
                    in: 'header',
                    bearerFormat: 'JWT'
                }
            }
        }
    },
    apis: ['./routes/*.js']
}

const swaggerDocs = swaggerJsDoc(swaggerOptions)

const options = {
    customCss: '.swagger-ui .topbar { display: none }'
}

module.exports = swaggerUi.setup(swaggerDocs, options)

others have same issue : https://github.com/scottie1984/swagger-ui-express/issues/312#issuecomment-1281607569

swagger-ui-express version : 4.5.0

[scottie1984]

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

[Tamir198]

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:

[m0x61h0x64i]

@scottie1984, please help us!

[scottie1984]

I can only really find this in relation to others have issues with Vercel.

https://stackoverflow.com/questions/69146517/swagger-ui-vercel-unexpected-token-in-json-at-position-1

[tnwanna]

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

[scottie1984]

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?

[tnwanna]

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?

[keptt]

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.

[scottie1984]

@keptt Could you raise with swagger-ui directly?

@shockey in case you are still maintaining swagger-ui-dist, might be one worth fixing.

[keptt]

@scottie1984 sure, will do

[m0x61h0x64i]

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