Create bundle with Webpack using third party UMD libraries

[luenmuvel]

I am trying to make a library that makes use your cybersource-rest-client library. When I worked with this library in Nodejs I had no problems but I need to use it in the client side (Browser) too, but I get the following error when compiling with Webpack:

ERROR in ./node_modules/cybersource-rest-client/src/index.js
Module not found: Error: Can't resolve 'model/TmsV1InstrumentIdentifiersPaymentInstrumentsGet200ResponseEmbeddedBuyerInformation' in 'C:\Users\MSI\Belcorp\sdk\node_modules\cybersource-rest-client\src'
 @ ./node_modules/cybersource-rest-client/src/index.js 19:4-35645
 @ ./src/providers/cybersource/process-payment.js
 @ ./src/providers/Provider.js
 @ ./src/index.js

ERROR in ./node_modules/cybersource-rest-client/src/index.js
Module not found: Error: Can't resolve 'model/TmsV1InstrumentIdentifiersPaymentInstrumentsGet200ResponseEmbeddedBuyerInformationIssuedBy' in 'C:\Users\MSI\Belcorp\sdk\node_modules\cybersource-rest-client\src'
 @ ./node_modules/cybersource-rest-client/src/index.js 19:4-35645
 @ ./src/providers/cybersource/process-payment.js
 @ ./src/providers/Provider.js
 @ ./src/index.js

ERROR in ./node_modules/cybersource-rest-client/src/index.js
Module not found: Error: Can't resolve 'model/TmsV1InstrumentIdentifiersPaymentInstrumentsGet200ResponseEmbeddedBuyerInformationPersonalIdentification' in 'C:\Users\MSI\Belcorp\sdk\node_modules\cybersource-rest-client\src' @ ./node_modules/cybersource-rest-client/src/index.js 19:4-35645
 @ ./src/providers/cybersource/process-payment.js
 @ ./src/providers/Provider.js
 @ ./src/index.js

ERROR in ./node_modules/cybersource-rest-client/src/index.js
Module not found: Error: Can't resolve 'model/TmsV1InstrumentIdentifiersPaymentInstrumentsGet200ResponseEmbeddedCard' in 'C:\Users\MSI\Belcorp\sdk\node_modules\cybersource-rest-client\src'
 @ ./node_modules/cybersource-rest-client/src/index.js 19:4-35645
 @ ./src/providers/cybersource/process-payment.js
 @ ./src/providers/Provider.js
 @ ./src/index.js

ERROR in ./node_modules/cybersource-rest-client/src/index.js
Module not found: Error: Can't resolve 'model/TmsV1InstrumentIdentifiersPaymentInstrumentsGet200ResponseEmbeddedEmbedded' in 'C:\Users\MSI\Belcorp\sdk\node_modules\cybersource-rest-client\src'
 @ ./node_modules/cybersource-rest-client/src/index.js 19:4-35645
 @ ./src/providers/cybersource/process-payment.js
 @ ./src/providers/Provider.js
 @ ./src/index.js

ERROR in ./node_modules/cybersource-rest-client/src/index.js
Module not found: Error: Can't resolve 'model/TmsV1InstrumentIdentifiersPaymentInstrumentsGet200ResponseEmbeddedEmbeddedInstrumentIdentifier' in 'C:\Users\MSI\Belcorp\sdk\node_modules\cybersource-rest-client\src'
 @ ./node_modules/cybersource-rest-client/src/index.js 19:4-35645
 @ ./src/providers/cybersource/process-payment.js
 @ ./src/providers/Provider.js
 @ ./src/index.js

ERROR in ./node_modules/cybersource-rest-client/src/index.js
Module not found: Error: Can't resolve 'model/TmsV1InstrumentIdentifiersPaymentInstrumentsGet200ResponseEmbeddedLinks' in 'C:\Users\MSI\Belcorp\sdk\node_modules\cybersource-rest-client\src'
 @ ./node_modules/cybersource-rest-client/src/index.js 19:4-35645
 @ ./src/providers/cybersource/process-payment.js
 @ ./src/providers/Provider.js
 @ ./src/index.js

// and many more similar mistakes

When I inspect the library in the node_modules/ directory I find that said file has the following structure:

(function(factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module.
    define(['ApiClient', 'model/AddNegativeListRequest', 'model/AuthReversalRequest', 'model/AuthorizationOptions', 'model/BillTo', 'model/BuyerInformation', 'model/CapturePaymentRequest', 'model/CardInfo', 'model/CheckPayerAuthEnrollmentRequest', 'model/CreateAdhocReportRequest', 'model/CreateCreditRequest', 'model/CreateDecisionManagerCaseRequest', 'model/CreateInstrumentIdentifierRequest', 'model/CreateInvoiceRequest', 'model/CreatePaymentInstrumentRequest', 'model/CreatePaymentRequest', 'model/CreateReportSubscriptionRequest', 'model/CreateSearchRequest', 'model/DerPublicKey', 'model/Detail', 'model/EmbeddedInstrumentIdentifierRequest', 'model/EmbeddedInstrumentIdentifierResponse', 'model/Error', 'model/ErrorBean', 'model/ErrorFieldBean', 'model/ErrorLinks', 'model/ErrorResponse', 'model/ErrorResponseWithHAL', 
// and many more similar statements
  }
}

In my webpack.config.js file settings I have the following:

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');


module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-payment-library.js',
    libraryTarget: 'umd'
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ],
  },
  node: {
    fs: 'empty'
  }
};

I would appreciate any help.

[gnongsie]

Hi @luenmuvel,

Can you try removing this line from the webpack.config.js?

exclude: /(node_modules)/,

Let me know if this helps. If not, I will be happy to provide further assistance.

[Morriphi]

Any update on this issue? I'm currently having issues trying to bundle.

[aliliarif]

Any update on this issue? I am also having trouble when trying to bundle using webpack - getting same errors as described by @luenmuvel