Swagger-codegen: [JavaScript] Usage with create-react-app + Promises + ES6 unsupported?

Created on 16 Apr 2018  ·  9Comments  ·  Source: swagger-api/swagger-codegen
Description


The generated JavaScript output from passing the usePromises and/or useES6 options don't seem to play nicely with a fresh non-ejected React app created using create-react-app. I realize this sounds more like a create-react-app problem than a Swagger problem, but some initial findings indicate that Swagger's ES6 static property syntax isn't (yet) supported. It's possible I'm just overlooking something simple, but figured I'd float it to the community.

Swagger-codegen version


2.3.1

Swagger declaration file content or url

http://petstore.swagger.io/v2/swagger.json

Command line used for generation


JavaScript, with Promises:

swagger-codegen generate -i http://petstore.swagger.io/v2/swagger.json -l javascript -o . --additional-properties usePromises=true

Yields:

Failed to compile.

../my-app/src/index.js
Module not found: Can't resolve 'ApiClient' in '/Users/jgoldsmith/Sites/my-app/src'

(which, to me, just looks like some missing relative path qualifiers, e.g., ./ApiClient)

JavaScript, with Promises and ES6:

swagger-codegen generate -i http://petstore.swagger.io/v2/swagger.json -l javascript -o . --additional-properties usePromises=true,useES6=true

Yields:

../my-app/src/ApiClient.js
Module parse failed: Unexpected token (231:32)
You may need an appropriate loader to handle this file type.
|     * @readonly
|     */
|     static CollectionFormatEnum = {
|         /**
|          * Comma-separated values. Value: <code>csv</code>

(ref)

I manually changed all instances of static someProperty in the generated SDK to static get someProperty() and things seemed to work fine (but obviously that's not a real solution).

Steps to reproduce

  1. Using swagger-codegen, generate JavaScript SDKs, passing the usePromises and/or useES6 options
  2. Use create-react-app to create a new app
  3. Install/link the generated SDK into the app
  4. Run npm start in the React app
  5. Note the compilation errors
Related issues/PRs

Suggest a fix/enhancement

For non-ES6 output: use the correct relative paths
For ES6 output: change static properties to static get myProp() { return value; } or MyClass.myProp (my personal preference, ref)

picture john-goldsmith
👍1

Most helpful comment

Hi, anyone to summarize the "state or art" on how to integrate a codegen swagger javascript or ES6 in a create-react-app without doing an eject?

picture mvamax on 19 Jun 2018
👍3

All 9 comments

A little more research revealed some additional information.

The "Supported Language Features and Polyfills" section of the create-react-app README states that "Class Fields and Static Properties" are supported via the "Class Public Fields" TC39 proposal. That proposal, however, has been merged with the "Class Fields" TC39 proposal (currently Stage 2) which states:

Placement: Static vs instance -- static postponed to follow-on proposal

So, again, it seems like the Swagger ES6 codegen is a little _too_ bleeding edge.

john-goldsmith picture john-goldsmith on 16 Apr 2018

Just out of curiosity, does the generated SDK with usePromises and useES6 option work with regular react app not generated by create-react-app?

joyfulelement picture joyfulelement on 2 May 2018

@joyfulelement I haven't actually tested your scenario, but I imagine it would depend on how you have webpack/babel/browserify setup for your non-CRA project. The code generated when using both the usePromises and useES6 options is valid _assuming_ that you've setup the transpile step to correctly interpret that syntax. If, however, you don't have a transpile step, then obviously the generated code is not valid JS.

john-goldsmith picture john-goldsmith on 18 May 2018

@john-goldsmith have you found a solution for this? I'm having the same issue. I'm not really wanting to eject my CRA, but cannot seem to find a way to get our library to import into our react app.

I have the same setup CRA + swagger-codegen JS client, and getting this error:

./node_modules/sunflower-client/src/model/DbFloraDocument.js
Module parse failed: Unexpected token (128:10)
You may need an appropriate loader to handle this file type.
|     * @member {String} docId
|     */
|     docId = undefined;
|     /**
|     * @member {Array.<module:model/DbImport>} imports
jimklo picture jimklo on 24 May 2018

@jimklo Sorta -- I'm using the --template-dir CLI option to monkey patch some fixes.

Pros:

  • "Fixes" the problem! 😄
  • Doesn't impact my CRA; no need to eject
  • Overridden files remain isolated to my SDK project/repo
  • Removing the overridden files in the future will be trivial
  • Retains auto-generation features of swagger-codegen without requiring manual intervention

Cons:

  • Overridden files can become out of sync with the ones from this repo
  • Generally good to avoid monkey patching

I created several directories in my SDK repo that mirror the directories in this repo for sanity's sake, but it's not required:

my-sdk
  └ modules
    └ swagger-codegen
      └ src
        └ main
          └ resources
            └ Javascript
              └ es6
                ├ api.mustache # https://github.com/swagger-api/swagger-codegen/blob/master/modules/swagger-codegen/src/main/resources/Javascript/es6/api.mustache
                ├ ApiClient.mustache # https://github.com/swagger-api/swagger-codegen/blob/master/modules/swagger-codegen/src/main/resources/Javascript/es6/ApiClient.mustache
                ├ partial_model_generic.mustache # https://github.com/swagger-api/swagger-codegen/blob/master/modules/swagger-codegen/src/main/resources/Javascript/es6/partial_model_generic.mustache
                ├ partial_model_inner_enum.mustache # https://github.com/swagger-api/swagger-codegen/blob/master/modules/swagger-codegen/src/main/resources/Javascript/es6/partial_model_inner_enum.mustache
                └ README.md # Just for good measure

And I create the SDK with following command:

swagger-codegen generate \
  --input-spec http://petstore.swagger.io/v2/swagger.json \
  --lang javascript \
  --output . \
  --template-dir ./modules/swagger-codegen/src/main/resources/Javascript/es6 \
  --additional-properties usePromises=true,useES6=true

I haven't yet tested @delenius' changes noted above, but on the surface it sounds like it'll be the official/preferred fix.

john-goldsmith picture john-goldsmith on 31 May 2018

Hi, anyone to summarize the "state or art" on how to integrate a codegen swagger javascript or ES6 in a create-react-app without doing an eject?

mvamax picture mvamax on 19 Jun 2018
👍3

@mvamax , this works in the latest master of openapi-generator. It actually does not work with the es6 client, simply because CRA does not transpile the dependencies. You can run it in dev mode, but the build fails. However, it does work with the regular JS client (I only tested with Promises, but it probably works with or without). Try it out.

delenius picture delenius on 19 Jun 2018

@jimklo Sorta -- I'm using the --template-dir CLI option to monkey patch some fixes.

Pros:

  • "Fixes" the problem! 😄
  • Doesn't impact my CRA; no need to eject
  • Overridden files remain isolated to my SDK project/repo
  • Removing the overridden files in the future will be trivial
  • Retains auto-generation features of swagger-codegen without requiring manual intervention

Cons:

  • Overridden files can become out of sync with the ones from this repo
  • Generally good to avoid monkey patching

I created several directories in my SDK repo that mirror the directories in this repo for sanity's sake, but it's not required:

my-sdk
  └ modules
    └ swagger-codegen
      └ src
        └ main
          └ resources
            └ Javascript
              └ es6
                ├ api.mustache # https://github.com/swagger-api/swagger-codegen/blob/master/modules/swagger-codegen/src/main/resources/Javascript/es6/api.mustache
                ├ ApiClient.mustache # https://github.com/swagger-api/swagger-codegen/blob/master/modules/swagger-codegen/src/main/resources/Javascript/es6/ApiClient.mustache
                ├ partial_model_generic.mustache # https://github.com/swagger-api/swagger-codegen/blob/master/modules/swagger-codegen/src/main/resources/Javascript/es6/partial_model_generic.mustache
                ├ partial_model_inner_enum.mustache # https://github.com/swagger-api/swagger-codegen/blob/master/modules/swagger-codegen/src/main/resources/Javascript/es6/partial_model_inner_enum.mustache
                └ README.md # Just for good measure

And I create the SDK with following command:

swagger-codegen generate \
  --input-spec http://petstore.swagger.io/v2/swagger.json \
  --lang javascript \
  --output . \
  --template-dir ./modules/swagger-codegen/src/main/resources/Javascript/es6 \
  --additional-properties usePromises=true,useES6=true

I haven't yet tested @delenius' changes noted above, but on the surface it sounds like it'll be the official/preferred fix.

Hi @john-goldsmith is it possible to generate reactjs component using swagger yaml?

akash-pal picture akash-pal on 4 Jul 2019

@john-goldsmith using the template-dir option seems to still generate incompatible code. Any chance you've found a better workaround in 2019?

Thanks

arthurpankiewicz picture arthurpankiewicz on 12 Aug 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

baartosz picture baartosz  ·  3Comments
mn288 picture mn288  ·  3Comments
dnome2 picture dnome2  ·  3Comments
aliemrahpekesen picture aliemrahpekesen  ·  3Comments
NabiKAZ picture NabiKAZ  ·  3Comments