Uncaught ReferenceError: SwaggerUIBundle is not defined at window.onload with SwaggerUI on typescript

[ag2byte]

I am trying to create documentation using swagger-ui-express and swagger-jsdoc as follows:

import swaggerJsDoc from 'swagger-jsdoc';
import swaggerUi from 'swagger-ui-express';

const options: swaggerJsDoc.Options={
    definition:
    {
        openapi: '3.0.0',
        info: {
            title: 'API',   
            version: '1.0.0',
            description: 'API',
        },
        servers: [ {
                url: 'http://localhost:3000},],},
    apis: ['./src/api/**/*.ts'],
  }

const specs = swaggerJsDoc(options);

 app.use('/api-docs',swaggerUi.serve,swaggerUi.setup(specs));
    app.get('/api-docs.json',(req:Request,res:Response)=>{
        res.setHeader('Content-Type','application/json');
        res.send(specs);
    }
    )

While running I get the following issue on console:

Uncaught SyntaxError: Unexpected token '<' (at swagger-ui-bundle.js:3:1)
swagger-ui-standalone-preset.js:3 
Uncaught SyntaxError: Unexpected token '<' (at swagger-ui-standalone-preset.js:3:1)
Uncaught ReferenceError: SwaggerUIBundle is not defined
    at window.onload

Is this issue related to any missing dependency or is this a bug?

[Emil21]

I'm facing the same issue.
also getting http 502 error for bundle js call '...../swagger-ui-bundle.js'.
Couple of times the UI loaded for me but then after that was always getting the above error.

I think this has something to do with the configurations. Because the issue doesn't appear for me in local and one of the environment , but only in my production env where certain things like load balancer etc are implemented.

[ag2byte]

Seems this issue exists when using webpack to configure the project. I tried in a different express app built from scratch and it was working fine.

[Emil21]

@ag2byte I doubt it has something to do with webpack. Cz for me, app is configured with webpack across all my environments., but I face this issue only in my prod env where these load balancer and stuffs are present

[YUEJINYUAN]

webpack need external swagger module,and you need keep path in webpack.config.js

optimization: {
    // minimize: true,
    minimizer: [
      new TerserPlugin({
        extractComments: { // keep same path with index.js => swaggerOptions.api
          condition: /^\**!|@swagger/i,
          filename: (fileData) => {
            // The "fileData" argument contains object with "filename", "basename", "query" and "hash"
            return './controller/swaggerComments.js';
          },
        },
      }),
    ],
  },

[jcjpsa]

webpack need external swagger module,and you need keep path in webpack.config.js

optimization: {
    // minimize: true,
    minimizer: [
      new TerserPlugin({
        extractComments: { // keep same path with index.js => swaggerOptions.api
          condition: /^\**!|@swagger/i,
          filename: (fileData) => {
            // The "fileData" argument contains object with "filename", "basename", "query" and "hash"
            return './controller/swaggerComments.js';
          },
        },
      }),
    ],
  },

Tried your solution but still throws an error for me, I even tried to load the petstore on the official documentation itself. We are using esbuild for bundling.

[i3i2uno]

This fixed it for me: https://stackoverflow.com/a/63048697/830403

[svinci121]

Hi, I'm not using webpack, but I'm having the same issue, it works locally but, when deployed it shows the following message.

I have it set up like:
const swaggerDocument = YAML.load(path.join(__dirname, 'swagger.yaml'));
const options = {}

app.use('/api-docs',
swaggerUi.serveFiles(swaggerDocument, options),
swaggerUi.setup(swaggerDocument)
);

all other routes and middleware are below and I'm compiling with:

 "build": "rm -rf dist && tsc && cp swagger.yaml dist",
  "prestart": "NODE_OPTIONS=--openssl-legacy-provider npm run build",
  "start": "NODE_OPTIONS=--openssl-legacy-provider node ./dist/index.js",
  ```

[amunim]

@svinci121 you find a solution?

[robertoDCJ]

I have an express project that is also returning these errors in the console, but only in production, locally it works correctly

[andersonfernandes]

I faced the same problem while trying to build the code with esbuild and could solve it by adding swagger-ui-express as external using the flag: --external:swagger-ui-express.

Here is the complete build command of my project:

esbuild src/index.ts --bundle --platform=node --outfile=dist/index.js --external:express --external:cors --external:swagger-ui-express

[Edwin-WB-Li]

Hi, I'm not using webpack, but I'm having the same issue, it works locally but, when deployed it shows the following message.

I have it set up like: const swaggerDocument = YAML.load(path.join(__dirname, 'swagger.yaml')); const options = {}

app.use('/api-docs', swaggerUi.serveFiles(swaggerDocument, options), swaggerUi.setup(swaggerDocument) );

all other routes and middleware are below and I'm compiling with:

 "build": "rm -rf dist && tsc && cp swagger.yaml dist",
  "prestart": "NODE_OPTIONS=--openssl-legacy-provider npm run build",
  "start": "NODE_OPTIONS=--openssl-legacy-provider node ./dist/index.js",

Excuse me, have you solved this problem

[Edwin-WB-Li]

I have an express project that is also returning these errors in the console, but only in production, locally it works correctly

have you solved this problem