Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
SwaggerUIBundle
✓ import { SwaggerUIBundle } from 'swagger-ui-dist'
✗ const SwaggerUIBundle = require('swagger-ui-dist').SwaggerUIBundle
Primarily consumed in browser contexts after serving. For server-side Node.js ESM, use named import. CommonJS `require` for UI components is typically incorrect for this package's bundle usage.
SwaggerUIStandalonePreset
✓ import { SwaggerUIStandalonePreset } from 'swagger-ui-dist'
✗ const SwaggerUIStandalonePreset = require('swagger-ui-dist').SwaggerUIStandalonePreset
Used as a plugin preset for Swagger UI. Similar to SwaggerUIBundle, for browser consumption.
getAbsoluteFSPath
✓ const getAbsoluteFSPath = require('swagger-ui-dist').getAbsoluteFSPath
✗ import { getAbsoluteFSPath } from 'swagger-ui-dist'
This utility function is specifically for Node.js environments to get the filesystem path to the 'dist' assets and is primarily exported via CommonJS. It will throw an error if called outside Node.js.
Sets up an Express.js server to serve Swagger UI from its 'dist' folder, providing an API documentation endpoint.
const express = require('express');
const path = require('path');
const swaggerUiDist = require('swagger-ui-dist');
const app = express();
const port = 3000;
// Get the absolute file system path to the swagger-ui-dist directory
const swaggerUiAssetPath = swaggerUiDist.getAbsoluteFSPath();
// Serve the static Swagger UI files from the node_modules directory
app.use('/swagger-ui', express.static(swaggerUiAssetPath));
// Endpoint to display Swagger UI
app.get('/api-docs', (req, res) => {
const swaggerSpecUrl = '/swagger.json'; // URL to your OpenAPI spec
res.send(`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Swagger UI</title>
<link rel="stylesheet" type="text/css" href="/swagger-ui/swagger-ui.css" />
<link rel="icon" type="image/png" href="/swagger-ui/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="/swagger-ui/favicon-16x16.png" sizes="16x16" />
<style>
html { box-sizing: border-box; overflow: -moz-scrollbars-vertical; overflow-y: scroll; }
*, *:before, *:after { box-sizing: inherit; }
body { margin:0; background: #fafafa; }
</style>
</head>
<body>
<div id="swagger-ui"></div>
<script src="/swagger-ui/swagger-ui-bundle.js" charset="UTF-8"> </script>
<script src="/swagger-ui/swagger-ui-standalone-preset.js" charset="UTF-8"> </script>
<script>
window.onload = function() {
const ui = SwaggerUIBundle({
url: "${swaggerSpecUrl}",
dom_id: '#swagger-ui',
deepLinking: true,
presets: [
SwaggerUIBundle.presets.apis,
SwaggerUIStandalonePreset
],
plugins: [
SwaggerUIBundle.plugins.DownloadUrl
],
layout: "StandaloneLayout"
});
window.ui = ui;
};
</script>
</body>
</html>
`);
});
// Example API spec endpoint
app.get('/swagger.json', (req, res) => {
res.json({
openapi: '3.0.0',
info: {
title: 'Example API',
version: '1.0.0',
description: 'A simple example API served with Swagger UI.',
},
paths: {
'/hello': {
get: {
summary: 'Returns a greeting',
responses: {
'200': {
description: 'Successful response',
content: {
'application/json': {
schema: {
type: 'object',
properties: {
message: {
type: 'string',
example: 'Hello from Example API!',
},
},
},
},
},
},
},
},
},
},
});
});
app.listen(port, () => {
console.log(`Server is running on http://localhost:${port}`);
console.log(`Swagger UI available at http://localhost:${port}/api-docs`);
});
Errors
Common errors & fixes
Error: getAbsoluteFSPath can only be called within a Nodejs environment
Attempting to call `require('swagger-ui-dist').getAbsoluteFSPath()` or `import { getAbsoluteFSPath } from 'swagger-ui-dist'` in a browser environment.
fixThis function is server-side only. Call `getAbsoluteFSPath` in your Node.js application to resolve the path and then serve those files. Do not include this call in client-side code that runs in a browser.
ReferenceError: SwaggerUIBundle is not defined
The `swagger-ui-bundle.js` script was not correctly loaded or executed in the HTML page before `SwaggerUIBundle` was accessed.
fixVerify that your HTML includes `<script src="/swagger-ui/swagger-ui-bundle.js"></script>` and that the path is correct and accessible by your web server. Ensure the initialization script runs after the bundle is loaded.
Cannot find module 'swagger-ui-dist'
The `swagger-ui-dist` package has not been installed or cannot be resolved by your module loader.
fixRun `npm install swagger-ui-dist` or `yarn add swagger-ui-dist` in your project directory. Ensure your Node.js process has access to `node_modules`.
Audit
Dependencies
No dependency data recorded yet.