Swagger-codegen: [Javascript][2.2.0] AMD define module paths fails in Webpack

[darylteo]

Description

Version 2.1.6 produced AMD paths with ./ prefixes. For example:

define(['./ApiClient', './model/Article', './model/ArticleResourceSingle', ... , './api/DefaultApi'], factory);

Version 2.2.0 produces AMD paths without ./ prefixes. For example:

define(['ApiClient', 'model/Article', 'model/ArticleResourceSingle', ..., 'api/DefaultApi'], factory);

This has broken my webpack build.

ERROR in ../api/build/swagger/javascript/src/index.js
Module not found: Error: Cannot resolve module 'model/Article' in ../api/build/swagger/javascript/src
 @ ../api/build/swagger/javascript/src/index.js 28:4-701

ERROR in ../api/build/swagger/javascript/src/index.js
Module not found: Error: Cannot resolve module 'model/ArticleResourceSingle' in ../api/build/swagger/javascript/src
 @ ../api/build/swagger/javascript/src/index.js 28:4-701

Swagger-codegen version

2.2.0

Swagger declaration file content or url

Command line used for generation

Steps to reproduce

Related issues

Suggest a Fix

[darylteo]

Have tried similar exercise by copying codegen output into the node_modules directory to see if it is some sort of module paths issue, no avail. Those don't look like valid paths no matter how I skin it.

If anyone else is facing similar issue in Webpack, I have disabled AMD loading using the imports-loader, which works.

[zsimo]

Hello!
Exactly the same here!

[zsimo]

Solved:

npm install --save-dev imports-loader

and then add this loader to the webpack configs

{ test: /\.js/, loader: 'imports?define=>false'}

[hasangilak]

i wrote a template for webpack build. may help
https://github.com/hasangilak/webpack-swagger-template

[wing328]

If anyone else is facing similar issue in Webpack, I have disabled AMD loading using the imports-loader, which works.

Shall we add an option to disable ADM loading in the auto-generated JS code?

[frol]

Webpack 2 requires using imports-loader loader full name instead of a short name (imports). Thus, here is what works for me for Webpack 2:

module: {
  rules: [
    {
      test: /my_client\/.*\.js$/,
      use: 'imports-loader?define=>false'
    }
  ]
},
node: {
  fs: 'empty'
}

[akeemphilbert]

Any one have any suggestions for solving this in a react app? (I tried adding the loader after ejecting the react-scripts so I could update the webpack config but no luck)

[frol]

I am using it in my react app (using Next.js) with the following next.config.js:

module.exports = {
  webpack: (config, { dev }) => {
    config.module.rules.push({
        test: /cloudsml-client\/.*\.js$/,
        use: 'imports-loader?define=>false'
    })
    config.node = {'fs': 'empty'}

    return config
  }
}

[akeemphilbert]

Thanks I figured out what was wrong when I first added the loader (I was using ES6 to try to import the generated library).

[wing328]

@akeemphilbert thanks for confirming the fix by @frol

[frol]

I think this issue shouldn't be closed just yet. To close it, more detailed installation instructions should be added to the JS client README.

[wing328]

Sure. I just reopen it.

Would you have time to help update the README? modules/swagger-codegen/src/main/resources/Javascript/README.mustache

[frol]

I am not a JS dev, but since I have managed to get it running, I will try my best at writing something useful.

[wing328]

@frol thank you 🙇