Latest package not working with CommonJS

[ankitchoudary]

Q&A (please complete the following information)

• OS: Win 10 pro
• Browser: chrome
• Version: 108.0.5359.73
• Method of installation: npm
• Swagger-UI version: 4.15.5
• Swagger/OpenAPI version: OpenAPI 3.0

Content & configuration

Example Swagger/OpenAPI definition:

# your YAML here

Swagger-UI configuration options:

SwaggerUI({
 url: 'http://localhost:7071/api/swagger.json',
 dom_id: '#body'
})

?yourQueryStringConfig

Describe the bug you're encountering

I am getting following error while starting the nodejs server
'Cannot use import statement outside a module'
Stack: C:\Development\connect-supplier-link\Dev\ConnectSupplierLink\node_modules\react-syntax-highlighter\dist\esm\light.js:1
import highlight from './highlight';
^^^^^^

To reproduce...

Steps to reproduce the behavior:
Try to use SwaggerUI package with CommonJS

const SwaggerUI = require('swagger-ui');
SwaggerUI({
url: 'http://localhost:7071/api/swagger.json',
dom_id: '#body'
})

Getting following error on server startup:

'Cannot use import statement outside a module'
Stack: C:\Development\connect-supplier-link\Dev\ConnectSupplierLink\node_modules\react-syntax-highlighter\dist\esm\light.js:1
import highlight from './highlight';
^^^^^^

Expected behavior

I should be able to use SwaggerUI with CommonJS

Screenshots

Additional context or thoughts

[char0n]

Documentation for current SwaggerUI build fragments: #7831

[char0n]

This issue have been addressed in #9137.

Following exports field has been used:

  "exports": {
    "./dist/swagger-ui.css": "./dist/swagger-ui.css",
    "./dist/oauth2-redirect.html": "./dist/oauth2-redirect.html",
    "./dist/swagger-ui-standalone-preset": "./dist/swagger-ui-standalone-preset.js",
    ".": {
      "browser": {
        "import": "./dist/swagger-ui-es-bundle-core.js",
        "require": "./dist/swagger-ui.js"
      },
      "node": {
        "import": "./dist/swagger-ui-bundle.js",
        "require": "./dist/swagger-ui-es-bundle.js"
      },
      "default": {
        "import": "./dist/swagger-ui-bundle.js",
        "require": "./dist/swagger-ui-es-bundle.js"
      }
    }
  }

---

Explanation:

1. When in Node.js environment and import SwaggerUI from 'swagger-ui' is used, then swagger-ui-bundle.js is used. This is UMD build that does include production dependencies and exports SwaggerUIBundle symbol on global object.

2. When in Node.js environment and const SwaggerUI = require('swagger-ui') is used, then swagger-ui-es-bundle.js is used. This is commonjs2 build that does include production dependencies.

3. When in Browser environment and import SwaggerUI from 'swagger-ui' is used, then swagger-ui-es-bundle-core.js is used. This is true ESM bundle that doesn't include production dependencies.

4. When in Browser environment and const SwaggerUI = require('swagger-ui') is used, then swagger-ui.js is used. This is UMD build that doesn't include production dependencies and exports SwaggerUICore symbol on global object.

[char0n]

Fixed by #9137

NOTE: note that importing SwaggerUI in Node.js works for Node.js >= 20.0.0. More info in char0n/swagger-ui-nextjs#1