ES bundle uses CommonJS-style exports.

[TimUnderhay]

Q&A (please complete the following information)

• Swagger-UI version: 3.37.2
• Swagger/OpenAPI version: N/A

Content & configuration

Apologies if this isn't considered a bug, but I couldn't find anything clearly explaining this. The ES bundle artefacts still use CommonJ-style exports. I expected that they would be utilising ES6/ES2015-style exports, for use in frameworks like Angular and others that prefer the ES format over CommonJS, for tree-shaking purposes.

swagger-ui-es-bundle.js:
module.exports=function(e){var t={};function...

Should be something like:
export default function(e){var t={};function...

Example Swagger/OpenAPI definition:
N/A

Swagger-UI configuration options:
N/A

Describe the bug you're encountering

To reproduce...

1. Have a look at swagger-ui-es-bundle.js

Expected behavior

ES module should use ES-style exports.

Screenshots

N/A

Additional context or thoughts

[tim-lai]

Hi, is your application not able to tree-shake swagger-ui? As an example, swagger-editor uses and tree-shakes the swagger-ui-es-bundle.

https://github.com/swagger-api/swagger-editor

[TimUnderhay]

Hi @tim-lai,

When compiling Swagger UI into an Angular app using the Angular CLI, it outputs this warning:

Warning: /workspace/src/app/my-app/my-component.ts depends on 'swagger-ui'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

** Angular Live Development Server is listening on xxx:yyy, open your browser on http://xxx:yyy/ **

✔ Compiled successfully.

From the link it provides, it states:

"It is recommended that you avoid depending on CommonJS modules in your Angular applications. Depending on CommonJS modules can prevent bundlers and minifiers from optimizing your application, which results in larger bundle sizes. Instead, it is recommended that you use ECMAScript modules in your entire application. For more information, see How CommonJS is making your bundles larger."

How CommonJS is making your bundles larger: https://web.dev/commonjs-larger-bundles/

Now I can, of course, ignore or suppress the warning, but it would be better for the ES bundle to utilise ECMAScript exports so that the best optimisation possible can occur, at least IMHO.

[tim-lai]

Thanks for the additional info. The ES6 distribution needs to get fixed.

[linelson]

Also experiencing this issue with the swagger-ui-react package in a project with a webpack 5 build. Adds ~2.4mb to our pre-gzip bundle size and nearly a megabyte post-gzip because it is not tree-shaking dependencies:

From a bundle analyzer before adding swagger-ui-react:

after adding swagger-ui-react:

[TimUnderhay]

@linelson as a temporary workaround, I've published a version with a corrected ES bundle. I intend to unpublish as soon as this is issue has been fixed, but should you wish to use it, it's @kensingtontech/swagger-ui. I see that there is a PR in progress @ #6720 so hopefully it won't be too much longer.

[andy-han]

Hello, is there any update to this? My organization has pretty strict compliance with our angular app, and this issue is preventing us from using this package.

[rafi0101]

Ping.
Any updates to this topic?

[ShubhamJainSJ]

Any updates for this issue? It's been quite sometime.

[philipwhiuk]

I think this is why building swagger breaks for me following an upgrade:

[16:07:18] Error:SyntaxError: 'import' and 'export' may appear only with 'sourceType: module' (2:0) while parsing 
<PROJECT_PATH>\node_modules\swagger-ui-react\swagger-ui-es-bundle-core.js 
while parsing file: <PROJECT_PATH>\node_modules\swagger-ui-react\swagger-ui-es-bundle-core.js

[char0n]

Hi everybody,

Some aspect of this issue has already been addressed. Here is the full documentation of what each of the fragment represents and what module system is used: #7831. I know the naming is very unfortunate, but we there is a plan to fix it as described in #7831.

swagger-ui-es-bundle-core.js is for some time now a true ES build fragment.

Here is the current mapping of the fragments in package.json file:

  "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"
      }
    }
  },

[char0n]

@philipwhiuk,

It's too few information to help you. I would need to verify that you'll still seeing the issue and provide additional info about your build system or create a POC repo where this can be reproduced.

We maintain POC integration repos in https://github.com/swagger-api/swagger-ui/wiki/Seamless-Integration-with-Bundlers-&-Test-Tools

Please reopen this issue if you feel it's needed.