Version 4.9.0 causes jest tests fail to run due to a SyntaxError #7944

slaweet · 2022-03-25T11:00:51Z

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 (#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

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.

The text was updated successfully, but these errors were encountered:

char0n · 2022-03-26T16:18:10Z

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 #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 (#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: #7831

Refs #7898 Refs #7944 Refs #7935 Refs #7910 Refs #7908 Refs #7902

char0n · 2022-03-28T09:18:13Z

Fixed in https://github.com/swagger-api/swagger-ui/releases/tag/v4.10.0

slaweet · 2022-03-28T12:09:17Z

@char0n thank you for the update.

I tried to use v4.10.0 and it's still failing with the same error. Can you re-open this or should I create a new issue?

I've pushed the commit to my reproduction repo slaweet/swagger-ui-import-issue@34c7b5c so that you can try it out

The output of yarn jest is almost the same (there's just a different row and column in request-snippets.jsx:12:20):

 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:12:20)

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

char0n · 2022-03-28T14:44:04Z

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

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

slaweet · 2022-03-28T14:55:23Z

@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.

scottohara · 2022-03-29T08:02:31Z

I too am seeing this error, and transformIgnorePatterns doesn't seem to resolve the issue in my case.

One thing worth noting is that I'm using ts-jest and Typescript; so I suspect that my issue might be related to Typescript. (and I appreciate that swagger-ui is not a Typescript project)

I have a small repo here: https://github.com/scottohara/swagger-ui-webpack

Running jest on this project returns the following error:

❯ jest
 FAIL  test/index.test.ts
  ● Test suite failed to run

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

    Details:

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

    SyntaxError: Cannot use import statement outside a module

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1728:14)
      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:7:2)
      at Object.4206 (node_modules/swagger-ui/dist/webpack:/SwaggerUICore/src/core/plugins/request-snippets/request-snippets.jsx:12:20)
      at n (node_modules/swagger-ui/dist/webpack:/SwaggerUICore/webpack/runtime/compat get default export:7:2)

slaweet · 2022-03-29T08:33:14Z

@scottohara I'm using swagger-ui in another project with typescript and transformIgnorePatterns solution works there. So I suspect the difference is in something that "preset": "@vue/cli-plugin-unit-jest", contains and "preset": "ts-jest" doesn't. But from looking at https://github.com/vuejs/vue-cli/blob/v4.4.6/packages/%40vue/cli-plugin-unit-jest/presets/default/jest-preset.js I don't see any obvious candidate.

char0n · 2022-03-29T09:06:18Z

@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

scottohara · 2022-03-29T21:11:44Z

Many thanks, that was a great help.

For anyone reading along that has a similar issue, the main changes in @char0n 's patch that resolves the issue are:

In jest.config.js, change the preset:

- preset: "ts-jest"
+ preset: "ts-jest/presets/js-with-ts"

(Ref: https://kulshekhar.github.io/ts-jest/docs/getting-started/presets)

In tsconfig.json, allows JS:

{
  "compilerOptions": {
+    "allowJs": true

(Ref: https://www.typescriptlang.org/tsconfig#allowJs)

piotrekwitkowski · 2022-06-16T13:55:36Z

For me, this was not working:

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

but this was:

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

pdavid31 · 2022-06-29T06:23:02Z

Unfortunately still seeing this using:

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

waqar-ali-intagleo · 2022-07-05T11:36:19Z

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

bhl-0 · 2022-10-05T12:07:50Z

Still facing the same in v4.14.2

vishaljani2 · 2022-10-13T09:33:19Z

Still facing same issue in v4.14.3 with react. any workaround? with transformIgnorePatterns also jest failing.

char0n · 2023-04-20T07:04:44Z

Unfortunately still seeing this using:

create-react-app 5.0.0

swagger-ui-react 4.12.0

I've just tested on create-react-app@5.0.1 and except some source map related warnings, I was able to build and run the app with SwaggerUI succussfuly.

Regarding jest tests, after injecting following jest config into package.json file, I was able to run the tests successfully as well.

  "jest": {
    "transformIgnorePatterns": [
      "/node_modules/(?!(swagger-ui-react|swagger-client|react-syntax-highlighter)/)"
    ]
  },

If you use swagger-ui instead of swagger-ui-react npm package, use the following jest config:

  "jest": {
    "transformIgnorePatterns": [
      "/node_modules/(?!(swagger-ui|swagger-client|react-syntax-highlighter)/)"
    ]
  },

char0n mentioned this issue Mar 26, 2022

feat(build): add support for Create React App without eject #7946

Merged

17 tasks

char0n added a commit that referenced this issue Mar 28, 2022

feat(build): add support for Create React App without eject (#7946)

81ef19c

Refs #7898 Refs #7944 Refs #7935 Refs #7910 Refs #7908 Refs #7902

char0n self-assigned this Mar 28, 2022

char0n added type: enhancement version: 4.x labels Mar 28, 2022

char0n closed this as completed Mar 28, 2022

simPod mentioned this issue Apr 4, 2022

Version 4.10.3 causes next.js app to fail run due to a SyntaxError #7970

Closed

w0rmr1d3r mentioned this issue Apr 15, 2022

Attempted import error: 'randexp' does not contain a default export (imported as 'i'). #7962

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Version 4.9.0 causes jest tests fail to run due to a SyntaxError #7944

Version 4.9.0 causes jest tests fail to run due to a SyntaxError #7944

slaweet commented Mar 25, 2022 •

edited

Loading

char0n commented Mar 26, 2022

char0n commented Mar 28, 2022

slaweet commented Mar 28, 2022

char0n commented Mar 28, 2022

slaweet commented Mar 28, 2022

scottohara commented Mar 29, 2022

slaweet commented Mar 29, 2022

char0n commented Mar 29, 2022 •

edited

Loading

scottohara commented Mar 29, 2022

piotrekwitkowski commented Jun 16, 2022 •

edited

Loading

pdavid31 commented Jun 29, 2022

waqar-ali-intagleo commented Jul 5, 2022

bhl-0 commented Oct 5, 2022

vishaljani2 commented Oct 13, 2022 •

edited

Loading

char0n commented Apr 20, 2023

Version 4.9.0 causes jest tests fail to run due to a SyntaxError #7944

Version 4.9.0 causes jest tests fail to run due to a SyntaxError #7944

Comments

slaweet commented Mar 25, 2022 • edited Loading

Q&A (please complete the following information)

Describe the bug you're encountering

To reproduce...

Expected behavior

Screenshots

Additional context or thoughts

char0n commented Mar 26, 2022

Pure ESM package

ESM build fragments

char0n commented Mar 28, 2022

slaweet commented Mar 28, 2022

char0n commented Mar 28, 2022

slaweet commented Mar 28, 2022

scottohara commented Mar 29, 2022

slaweet commented Mar 29, 2022

char0n commented Mar 29, 2022 • edited Loading

scottohara commented Mar 29, 2022

piotrekwitkowski commented Jun 16, 2022 • edited Loading

pdavid31 commented Jun 29, 2022

waqar-ali-intagleo commented Jul 5, 2022

bhl-0 commented Oct 5, 2022

vishaljani2 commented Oct 13, 2022 • edited Loading

char0n commented Apr 20, 2023

slaweet commented Mar 25, 2022 •

edited

Loading

char0n commented Mar 29, 2022 •

edited

Loading

piotrekwitkowski commented Jun 16, 2022 •

edited

Loading

vishaljani2 commented Oct 13, 2022 •

edited

Loading