Issues with Swagger Ui not displaying on browser

Question

Here is Swagger has been setup in our backend and prior it was working just fine but today for certain unknown reasons I can't seem to figure out it stopped working and when we visit our endpoint locally we just get a blank page and the tab loader just keeps spinning

const options = {
definition: {
openapi: "3.0.0",
info: {
  title: "Docs",
  version,
},
compontents: {
  securitySchemas: {
    bearerAuth: {
      type: "http",
      scheme: "bearer",
      bearerFormat: "JWT",
    },
  },
},
security: [
  {
    bearerAuth: [],
  },
],
},

apis: ["./backend/api/V1/routes/*.routes.js"],
swaggerOptions: {
url: "/api-docs/swagger.json",
},
};

const openapiSpecification = swaggerJsdoc(options);
function swaggerDocs(app, port) {
app.use("/api-docs", swaggerUi.serve, swaggerUi.setup(openapiSpecification));
app.get("/api-docs.json", (req, res) => {
res.setHeader("Content-Type", "application/json");

res.send(openapiSpecification);
});
logger.info(`Swagger docs are running at http://localhost:${port}/api-docs`);
}

module.exports = {
swaggerDocs,
};

Here are the various package versions we are using

• "swagger-jsdoc": "^6.2.1",
• "swagger-ui-express": "^4.5.0",

Answer 1

Look Like you are missing info of version here:

info: {
  title: "Docs",
  version,
}

You can fix that by adding version to it, for example version: "1.0.0"

Let me know if it works or not

Answer 2

How i resolved the issue was move the entire code into my app.js. and everything works as expected