search

scottie1984 / swagger-ui-express

Adds middleware to your express app to serve the Swagger UI bound to your Swagger document. This acts as living documentation for your API hosted from within your app.
MIT License
1.42k stars 225 forks source link

"Could not render OperationContainer, see the console." #363

Open autumn-lindberg opened 11 months ago

autumn-lindberg commented 11 months ago

This implementation was working until I tested new routes yesterday.

Error in the console:

TypeError: ce.first().isEmpty is not a function
    render operation-summary.jsx:66
    React 13
    render root-injects.jsx:85
    downloadSpec index.js:217
    SwaggerUI index.js:238
    onload swagger-ui-init.js:187

Object { componentStack: "\nOperationSummary@http://localhost/api/docs/movies/swagger-ui-bundle.js:2:1076395\ndiv\noperation_Operation@http://localhost/api/docs/movies/swagger-ui-bundle.js:2:1068010\nspan\nOperationWrapper@http://localhost/api/docs/movies/swagger-ui-bundle.js:2:670590\nOperationContainer@http://localhost/api/docs/movies/swagger-ui-bundle.js:2:1072570\nErrorBoundary@http://localhost/api/docs/movies/swagger-ui-standalone-preset.js:2:228989\nWithErrorBoundary@http://localhost/api/docs/movies/swagger-ui-standalone-preset.js:2:228315\nWithSystem@http://localhost/api/docs/movies/swagger-ui-bundle.js:2:1031006\nConnectFunction@http://localhost/api/docs/movies/swagger-ui-bundle.js:2:1027742\ndiv\ndiv\nNoMargin@http://localhost/api/docs/movies/swagger-ui-bundle.js:2:1112723\nCollapse@http://localhost/api/docs/movies/swagger-ui-bundle.js:2:1112791\ndiv\nOperationTag@http://localhost/api/docs/movies/swagger-ui-bundle.js:2:1065410\nspan\nOperationTagWrapper@http://localhost/api/docs/movies/swagger-ui-bundle.js:2:670922\ndiv\nOperations@http://localhost/api/docs/movies/swagger-ui-bundle.js:2:1063785\nWithSystem@http://localhost/api/docs/movies/swagger-ui-bundle.js:2:1031006\nConnectFunction@http://localhost/api/docs/movies/swagger-ui-bundle.js:2:1027742\nsection\nCol@http://localhost/api/docs/movies/swagger-ui-bundle.js:2:1110729\ndiv\nRow@http://localhost/api/docs/movies/swagger-ui-bundle.js:2:1111214\ndiv\nversion_pragma_filter@http://localhost/api/docs/movies/swagger-ui-bundle.js:2:1294555\ndiv\nBaseLayout@http://localhost/api/docs/movies/swagger-ui-bundle.js:2:1252134\nErrorBoundary@http://localhost/api/docs/movies/swagger-ui-standalone-preset.js:2:228989\nWithErrorBoundary@http://localhost/api/docs/movies/swagger-ui-standalone-preset.js:2:228315\nWithSystem@http://localhost/api/docs/movies/swagger-ui-bundle.js:2:1031006\nConnectFunction@http://localhost/api/docs/movies/swagger-ui-bundle.js:2:1027742\nsection\nContainer@http://localhost/api/docs/movies/swagger-ui-bundle.js:2:1110409\nStandaloneLayout@http://localhost/api/docs/movies/swagger-ui-standalone-preset.js:2:161704\nErrorBoundary@http://localhost/api/docs/movies/swagger-ui-standalone-preset.js:2:228989\nWithErrorBoundary@http://localhost/api/docs/movies/swagger-ui-standalone-preset.js:2:228315\nWithSystem@http://localhost/api/docs/movies/swagger-ui-bundle.js:2:1031006\nConnectFunction@http://localhost/api/docs/movies/swagger-ui-bundle.js:2:1027742\nApp@http://localhost/api/docs/movies/swagger-ui-bundle.js:2:1036930\nErrorBoundary@http://localhost/api/docs/movies/swagger-ui-standalone-preset.js:2:228989\nWithErrorBoundary@http://localhost/api/docs/movies/swagger-ui-standalone-preset.js:2:228315\nWithSystem@http://localhost/api/docs/movies/swagger-ui-bundle.js:2:1031006\nConnectFunction@http://localhost/api/docs/movies/swagger-ui-bundle.js:2:1027742\nProvider@http://localhost/api/docs/movies/swagger-ui-bundle.js:2:1030222\nWithRoot@http://localhost/api/docs/movies/swagger-ui-bundle.js:2:1031233" }

startup/api-docs.js

const swaggerUI = require("swagger-ui-express");
const YAML = require("yamljs");

module.exports = function (app) {
  // convert yaml files to JSON
  const customers = YAML.load("./static/yaml/customers.yaml");
  const genres = YAML.load("./static/yaml/genres.yaml");
  const movies = YAML.load("./static/yaml/movies.yaml");
  const products = YAML.load("./static/yaml/products.yaml");
  const rentals = YAML.load("./static/yaml/rentals.yaml");
  const returns = YAML.load("./static/yaml/returns.yaml");

  // load JSON OpenAPI specs to swaggerUI
  app.use("/api/docs/customers", swaggerUI.serve, swaggerUI.setup(customers));
  app.use("/api/docs/genres", swaggerUI.serve, swaggerUI.setup(genres));
  app.use("/api/docs/movies", swaggerUI.serve, swaggerUI.setup(movies));
  app.use("/api/docs/products", swaggerUI.serve, swaggerUI.setup(products));
  app.use("/api/docs/rentals", swaggerUI.serve, swaggerUI.setup(rentals));
  app.use("/api/docs/returns", swaggerUI.serve, swaggerUI.setup(returns));
};

index.js

const helmet = require("helmet");
const morgan = require("morgan");
const express = require("express");
const app = express();
require("./startup/api-docs")(app);
const PORT = process.env.PORT || 80;
app.listen(PORT, () => {
  console.log(`Listening on port ${PORT}...`);
});
module.exports.app = app;