CyberSource / CyberSource/cybersource-rest-samples-node

Create bundle with Webpack using third party UMD libraries

Open
#36 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
43
Forks
66
Avg merge
23m
Merged PRs (30d)
2

Description

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.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the Webpack build from webpack.config.js and inspect the UMD dependency declarations in node_modules/cybersource-rest-client/src/index.js. Trace why the model imports cannot be resolved in the browser bundle; done means the client-side bundle compiles without those module-resolution errors.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, node.js, webpack
Domain
build-system, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.