CyberSource / CyberSource/cybersource-rest-samples-node
Create bundle with Webpack using third party UMD libraries
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
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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