StandalonePreset isn't exported in 4.14.0

[sohail-ikigai]

Q&A (please complete the following information)

• OS: macOS
• Browser: Chrome
• Version: N/A
• Method of installation: npm
• Swagger-UI version: 4.14.0
• Swagger/OpenAPI version: OpenAPI 3.0

Content & configuration

React application bootstrapped using CRA with react 17.0.2 and react-dom 17.0.2. App.tsx looks like

// Swagger UI
import SwaggerUI from 'swagger-ui'
// @ts-ignore
import SwaggerUIStandalonePreset from 'swagger-ui/dist/swagger-ui-standalone-preset'
import 'swagger-ui/dist/swagger-ui.css'

const swaggerUiConfig = SwaggerUI({
  urls: [
    {
      url: 'specs/petstoreV1.json',
      name: 'PetstoreV1',
    },
    {
      url: 'specs/petstoreV2.json',
      name: 'PetstoreV2',
    },
  ],
  deepLinking: true,
  // @ts-ignore
  presets: [SwaggerUI.presets.apis, SwaggerUIStandalonePreset],
  // @ts-ignore
  plugins: [SwaggerUI.plugins.DownloadUrl],
  layout: 'StandaloneLayout',
})
// @ts-ignore
const UI = swaggerUiConfig.getComponent('App', 'root')

export const App = () => (
  <div className="App">
    <UI />
  </div>
)

Describe the bug you're encountering

Unable to import and use standalone preset, getting Uncaught Error: Cannot find module 'swagger-ui/dist/swagger-ui-standalone-preset'

swagger-ui-dist can't be used since it's mean't for server side usage and using nodejs modules like path which aren't supported out of the box by webpack 5 and CRA.

To reproduce...

Steps to reproduce the behavior:

1. Import 'swagger-ui/dist/swagger-ui-standalone-preset'.
2. TypeScript throws an error which is ignored.
3. Webpack throws an error `Uncaught Error: Cannot find module 'swagger-ui/dist/swagger-ui-standalone-preset'`` resulting in the app not starting.

Expected behavior

We should be able to import and use the StandaloneLayoutPreset. Further, types seem to be incorrect for plugins, presets and import SwaggerUIStandalonePreset from 'swagger-ui/dist/swagger-ui-standalone-preset'

Additional context or thoughts

I have a work around by using patch-package to patch the swagger-ui/package.json file to export "./dist/swagger-ui-standalone-preset": "./dist/swagger-ui-standalone-preset.js". The patch file looks like: // docs/patches/swagger-ui+4.14.0.patch

diff --git a/node_modules/swagger-ui/package.json b/node_modules/swagger-ui/package.json
index 3d7a7fa..8473151 100644
--- a/node_modules/swagger-ui/package.json
+++ b/node_modules/swagger-ui/package.json
@@ -6,6 +6,7 @@
   "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",
     ".": {
       "import": "./dist/swagger-ui-es-bundle-core.js",
       "require": "./dist/swagger-ui.js"

[adamsiwiec]

Having the same issue

[Gounlaf]

Thanks @sohail-ikigai for you solution!

[char0n]

Resolved by community PR: https://github.com/swagger-api/swagger-ui/pull/8906