How to bundle Swagger generated code with webpack

Question

I'm creating a new webApp that needs to communicate with the server using a REST API. I want to use Swagger to define the REST API and to generate the code for the server and the Javascript client (a simple webapp running in a browser).

I was able to implement the server (using a Java servlet) and it works.

I have generated the code for the Javascript client but I'm not able to make it works (I'm a very beginner in Javascript, webpack, nom...).

I want to use webpack to generate a .js file that will be loaded by the webapp, this .js will contain the code generated by swagger and my code to send the query using Swagger (... and a UI!).

Here is my project organisation:

/
 - package.json
 - node_modules (modules installed with npm)
 - src  
   ---> /main.js (code I have written to send the REST API query using Swagger generated code)  
   ---> /index.js (code generated by Swagger)  
   ---> /ApiClient.js (code generated by Swagger)  
   ---> /api (folder that contains code generated by Swagger)  
   ---> /model (folder that contains code generated by Swagger) 
 - webpack.config.js
 - runTest  ---> - bundle.js (generated by webpack)  ---> - index.html

When I execute the webpack command I get some errors:

./node_modules/.bin/webpack --config webpack.config.js

Hash: a77095b323ec225f9b17 Version: webpack 2.6.1 Time: 396ms Asset Size Chunks Chunk Names bundle.js 6.48 kB 0 [emitted] main [0] ./src/index.js 2.61 kB {0} [built] [1] ./src/main.js 212 bytes {0} [built]

ERROR in ./src/index.js Module not found: Error: Can't resolve 'ApiClient' in '/Users/sebastien/Documents/Javascript/Stackoverflow/superagenttest/src' @ ./src/index.js 17:4-86 @ ./src/main.js

ERROR in ./src/index.js Module not found: Error: Can't resolve 'model/Error' in '/Users/sebastien/Documents/Javascript/Stackoverflow/superagenttest/src' @ ./src/index.js 17:4-86 @ ./src/main.js

My main.js contains the following:

var MyMetadataApi = require('./index'); // See note below*.
var xxxSvc = new MyMetadataApi.defaultApi(); // Allocate the API class we're going to use.
var zzz = xxxSvc.myFieldsGet(); // Invoke the service.

index.js (generated by Swagger contains)

(function(factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module.
    define(['ApiClient', 'model/Error', 'model/MyField', 'api/DefaultApi'], factory);
  } else if (typeof module === 'object' && module.exports) {
    // CommonJS-like environments that support module.exports, like Node.
    module.exports = factory(require('./ApiClient'), require('./model/Error'), require('./model/MyField'), require('./api/DefaultApi'));
  }
}(function(ApiClient, Error, MyField, DefaultApi) {
  'use strict';

  /**
   * get_My_fields.<br>
   * The <code>index</code> module provides access to constructors for all the classes which comprise the public API.
   * <p>
   * An AMD (recommended!) or CommonJS application will generally do something equivalent to the following:
   * <pre>
   * var MyMetadataApi = require('index'); // See note below*.
   * var xxxSvc = new MyMetadataApi.XxxApi(); // Allocate the API class we're going to use.
   * var yyyModel = new MyMetadataApi.Yyy(); // Construct a model instance.
   * yyyModel.someProperty = 'someValue';
   * ...
   * var zzz = xxxSvc.doSomething(yyyModel); // Invoke the service.
   * ...
   * </pre>
   * <em>*NOTE: For a top-level AMD script, use require(['index'], function(){...})
   * and put the application logic within the callback function.</em>
   * </p>
   * <p>
   * A non-AMD browser application (discouraged) might do something like this:
   * <pre>
   * var xxxSvc = new MyMetadataApi.XxxApi(); // Allocate the API class we're going to use.
   * var yyy = new MyMetadataApi.Yyy(); // Construct a model instance.
   * yyyModel.someProperty = 'someValue';
   * ...
   * var zzz = xxxSvc.doSomething(yyyModel); // Invoke the service.
   * ...
   * </pre>
   * </p>
   * @module index
   * @version 1.0.0
   */
  var exports = {
    /**
     * The ApiClient constructor.
     * @property {module:ApiClient}
     */
    ApiClient: ApiClient,
    /**
     * The Error model constructor.
     * @property {module:model/Error}
     */
    Error: Error,
    /**
     * The MyField model constructor.
     * @property {module:model/MyField}
     */
    MyField: MyField,
    /**
     * The DefaultApi service constructor.
     * @property {module:api/DefaultApi}
     */
    DefaultApi: DefaultApi
  };

  return exports;
}));

How can I make webpack generating a bundle.js that will successfully contain the code generated by Swagger and and my main.js ?

I'm lost with import/require... I have tried to replaced the require() with some import but without any success (or it can read the index.js but then find issues in index.js because it cannot import the ApiClient.js). What is AMD and CommonJS application are mentioned by the code generated by Swagger?

Any help would be appreciated ;-) Thanks,

Sebastien

Answer 1

I found a solution, I need to add the following in my webpack.config.js

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

I found this fix in the swagger-codegen GitHub repository: https://github.com/swagger-api/swagger-codegen/issues/3336