swagger-ui: Version 4.9.0 causes jest tests fail to run due to a SyntaxError

Q&A (please complete the following information)

OS: Ubuntu 18.04.1, but AFAIK not relevant
Browser: Not applicable, issue in CLI
Method of installation: npm
Swagger-UI version: 4.9.0
Swagger/OpenAPI version: AFAIK not relevant

Describe the bug you’re encountering

After upgrading to swagger-ui 4.9.0, my jest tests of a page that uses import SwaggerUI from 'swagger-ui'; fail to run because of a SyntaxError (see full output below).

To reproduce…

I’ve created a minimum reproduction repo: https://github.com/slaweet/swagger-ui-import-issue/. The repo contains 3 commits to illustrate the problem. (1) is a general basic app created with https://cli.vuejs.org/. (2) is adding the swagger-ui v4.8.1 which has no problem. (3) is changing the version of swagger-ui required to use the ^ caret version notation (^4.8.1), which causes yarn install to install 4.9.0.

Steps to reproduce the behavior:

Run:

git clone git@github.com:slaweet/swagger-ui-import-issue.git
cd swagger-ui-import-issue
yarn install
yarn jest

See error as in the screenshot below

Additionally, to see that there was no issue before v4.9.0, you can revert swagger-ui to v4.8.1 by running:

git reset HEAD^ --hard
yarn install
yarn jest

Expected behavior

Either there is some (package.json?) config that needs to be made so that running a jest test of a component that imports svagger-ui still works.

Or the release 4.9.0 should instead be 5.0.0, because switching to ESM (https://github.com/swagger-api/swagger-ui/pull/7937) apparently is a breaking change. Using a major SemVer version would prevent the caret version notation from silently switching swagger-ui to that version.

Screenshots

Screenshot from 2022-03-25 11-49-41

Additional context or thoughts

The test output:

$ /home/slaweet/git/swagger-ui-import-issue/node_modules/.bin/jest
 FAIL  tests/unit/example.spec.js
  ● Test suite failed to run

    /home/slaweet/git/swagger-ui-import-issue/node_modules/react-syntax-highlighter/dist/esm/light.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import highlight from './highlight';
                                                                                             ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
      at Object.6068 (node_modules/swagger-ui/dist/webpack:/SwaggerUICore/external commonjs "react-syntax-highlighter/dist/esm/languages/hljs/javascript":1:46)
      at n (node_modules/swagger-ui/dist/webpack:/SwaggerUICore/webpack/runtime/compat get default export:6:32)
      at Object.4206 (node_modules/swagger-ui/dist/webpack:/SwaggerUICore/src/core/plugins/request-snippets/request-snippets.jsx:8:17)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        1.696s
Ran all test suites.

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 1
Comments: 15 (7 by maintainers)

Commits related to this issue

feat(build): add support for Create React App without eject (#7946) Refs #7898 Refs #7944 Refs #7935 Refs #7910 Refs #7908 Refs #7902 — committed to swagger-api/swagger-ui by char0n 2 years ago

Most upvoted comments

Unfortunately still seeing this using:

create-react-app 5.0.0
swagger-ui-react 4.12.0

pdavid31 on Jun 29, 2022

Unfortunately still seeing this using:

create-react-app 5.0.0

swagger-ui-react 4.12.0

Still facing this issue in 4.12.0

waqar-ali-intagleo on Jul 5, 2022

@slaweet did you use the jest config I’ve suggested in my previous comments?

"transformIgnorePatterns": ["/node_modules/(?!(swagger-client|react-syntax-highlighter)/)"]

char0n on Mar 28, 2022

@scottohara,

Here is a patch that makes your tests work. It’s usually a matter of configuration with jest.

0001-working-swagger-ui-test.patch.zip

char0n on Mar 29, 2022

@char0n I thought the transformIgnorePatterns config is to be added to swagger-ui. Apparently, I haven’t read your previous comment carefully enough. With the transformIgnorePatterns it works well for me. Thanks for your help.

slaweet on Mar 28, 2022

Hi @slaweet.

First if all, thank you for your detailed report.

After upgrading to swagger-ui 4.9.0, my jest tests of a page that uses import SwaggerUI from ‘swagger-ui’; fail to run because of a SyntaxError (see full output below).

Yes, I’ve realized that after 4.9.0 release. I’ve issued PR https://github.com/swagger-api/swagger-ui/pull/7946 that will remedy the issue by using following jest config in package.json. It may even work on 4.9.0 release.

  "jest": {
    "preset": "@vue/cli-plugin-unit-jest",
    "transformIgnorePatterns": ["/node_modules/(?!(swagger-client|react-syntax-highlighter)/)"]
  }

I’ve created a minimum reproduction repo: https://github.com/slaweet/swagger-ui-import-issue/. The repo contains 3 commits to illustrate the problem. (1) is a general basic app created with https://cli.vuejs.org/. (2) is adding the swagger-ui v4.8.1 which has no problem. (3) is changing the version of swagger-ui required to use the ^ caret version notation (^4.8.1), which causes yarn install to install 4.9.0.

I’ve cloned the repo and verified that after the above mentioned PR is merged and transformIgnorePatterns, your tests will work again.

Or the release 4.9.0 should instead be 5.0.0, because switching to ESM (https://github.com/swagger-api/swagger-ui/pull/7937) apparently is a breaking change. Using a major SemVer version would prevent the caret version notation from silently switching swagger-ui to that version.

Some time ago, we switched our primary build fragment to be commonjs2 with excluded production dependencies. This caused problem with anybody that was consuming SwaggerUI from webpack@4 environment. webpack@4 was having issues with symbols from webpack@5 runtime in this fragment. In order to fix this issue I’ve decided to change format from commonjs2 to ESM (module). The change should be transparent to bundling systems like webpack or rollup, and that’s the reason we didn’t considered it a breaking change. There are currently two contexts in JavaScript regarding ESM:

Pure ESM package

More info about this is here and here. This is about type of npm package.

ESM build fragments

This is our case. SwaggerUI is still technically commonjs type package. What we did in 4.9.0, is that we used ESM type bundle as a primary build fragment, to allow proper tree shaking and other bundler magic. We also distribute other type of build fragments in swagger-ui npm package but modern bundlers will use the primary ESM now. So that’s why in our mind we didn’t consider this change a breaking one, if that make any sense. Of course it had side effects like Jest usage, but this can be easily compensated with simple Jest config change.

More information about SwaggerUI build fragments and future plans is here: https://github.com/swagger-api/swagger-ui/issues/7831

char0n on Mar 26, 2022