Braintree-web: Webpack compatibility

[ascariandrea]

Hi guys, I'm using your module within webpack but I got this warning.

I didn't find an open issue

WARNING in ./~/braintree-web/dist/braintree.js                                                                                          
Critical dependencies:
2:423-430 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
@ ./~/braintree-web/dist/braintree.js 2:423-430

The problem is that is included only the pre-built file, while I'd need an unminified version of the file.

I gave a look at the #1 issue, can you include the source file now?
If not, could you explain me the reason?

Thanks.

[darylthayilporch]

+1 , would love to find a way to not get web pack warnings!

[gabro]

Big +1 here!

[mrak]

We hope to include unminified files in our npm and bower modules in the future, but have no immediate plans.

If it's Webpack warning help you need, comment here. If it's for unminified files please continue the discussion to #1 so that others may more easily find it.

For the Webpack warnings, is it preventing your application from running or being able to use braintree?

[darylthayilporch]

It's not preventing us from running but its throwing warnings to all of our consoles including in prod

Sent from my iPhone

On Jun 23, 2015, at 9:20 AM, Eric Mrak <[email protected][e-mail]> wrote:

We hope to include unminified files in our npm and bower modules in the future, but have no immediate plans.

If it's Webpack warning help you need, comment here. If it's for unminified files please continue the discussion to #1https://github.com/braintree/braintree-web/issues/1 so that others may more easily find it.

For the Webpack warnings, is it preventing your application from running or being able to use braintree?

Reply to this email directly or view it on GitHubhttps://github.com/braintree/braintree-web/issues/52#issuecomment-114561460.

[mrak]

Related to this? https://github.com/webpack/webpack/issues/887

[robrichard]

It's not related to that issue. Webpack complains that you shouldn't require a minified file, but that's the only choice available since Braintree does not include the unminified source in the npm package.

You can have webpack suppress the warnings by using the noParse configuration option:

noParse: [/braintree-web/]

But the real solution is for Braintree to include the unminified source.

[urbanvikingr]

+1

It is very a simple task to do and would be a great service to those are planning on are using Braintree as payment provider.

Please.

[kyledetella]

I put together a demo to build a webpack bundle that includes braintree.js and I was able to reproduce the same warning message. Unfortunately, this happens with both the minified and unminified builds. I believe this is because webpack attempts its own module resolution and therefore would prefer to not use a pre-built file which declares its own internal define, require, and export mechanisms.

We develop braintree.js via a system of CommonJS modules and then bundle them for release using browserify. The file we release to this repo and as a hotlink is a minified version of that build. The module resolution and UMD transport remain the same whether it is minified or not.

There are no plans to release an unminified version on Github or in our npm package. However, we do ship an unminified version with each release which is available via direct links (ex: https://js.braintreegateway.com/js/braintree-2.9.0.js). As @mrak mentioned, this is something we may change down the line, but not right now.

Additionally, the noParse option seems to be intended for files that have not been compiled by another module loader and therefore isn't likely to remove this warning.

The files are expected to have no call to require, define or similar. They are allowed to use exports and module.exports.

This issue seems to be common in the webpack community for a variety of reasons. Fortunately, the output is only a warning and these bundles work in the browser as expected. I am pretty sure this is because we build it using a UMD transport via browserify's standalone option.

For now it seems that it is ok to ignore this warning. We will certainly keep this in mind as we decide on releases and architectures in the future. Let me know if you run into any further issues.

[gabro]

@kyledetella exactly, the issue is not really about minified or not, rather pre-built or not. Webpack works better (and without warning) when provided with the original source, rather than a bundled version (in this case with browserify).

It would be great to have access to the original source code, making this project really open-source, but if you guys don't have any plan for it, we'll settle with the webpack warning, I guess.

Not cool, but oh, we'll survive.

[kyledetella]

@gabro I understand your frustrations and your desire for us to fully open-source braintree.js. There is every possibility this is something we may do in the future.

Thanks for the feedback.

[brandondoran]

I'm not sure if this is related to there only being a prebuilt version, but the braintree-web module is huge. Using https://github.com/danvk/source-map-explorer, I've learned that it's the largest module in my webpack bundle at 185kb before compression (15kb larger than React).

[crookedneighbor]

@brandondoran You're probably using V2 of braintree.js, which includes every integration option in the dist file. V3 is designed in a modular fashion, so you can include just the files you need. So if you were integrating with Hosted Fields, here's how it compares:

// v2
var bt = require('braintree-web') // 184K

// v3
var btClient = require('braintree-web/client') // 16K
var hostedFields = require('braintree-web/hosted-fields') // 28K

[faceleg]

@crookedneighbor I'm using the v3 example for the client and I still get the warning:

/~/braintree-web/client.js
Critical dependencies:
1:438-445 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
@ ./~/braintree-web/client.js 1:438-445

[crookedneighbor]

@faceleg We're working on providing the node module version of the library without pre-built code.

In the meantime, if you'd like to silence the warnings, you can follow these instructions: https://github.com/braintree/braintree-web/issues/197#issuecomment-248115742

[crookedneighbor]

We've release 3.8.0, which includes the src files on NPM which means you no longer need the workaround to suppress warnings. If you had the noParse for braintree-web in your webpack config, you will need to remove that before using 3.8.0

[faceleg]

Awesome!

[maxisam]

Is it possible if you guys can make it like a small npm package for each module ?

You guys can see how @angular module do it. I think you guys can create a @braintree namespace and put everything under it.

Btw, you guys can try rollup.js to pack it as UMD package.

[DarylThayil]

I would recommend against namespaced modules, especially for people using module caches there are challenges to namespaces

[maxisam]

Really ? Why ? I don't see any difference. In fact, the current way, you can't pack specific sub modules into webpack DLL.

[DarylThayil]

example, organizations using nexus 2 can not use scoped packages without upgrading to v3, moving this to a scoped package would break everyone on nexus 2 I think the same is true of Sinopia and support for scoped packages

[maxisam]

What is that to do with this ? you can set different npm resources for different scopes. you just need to upgrade your npm.

http://stackoverflow.com/questions/32633678/is-there-any-way-to-configure-multiple-registries-in-a-single-npmrc-file

[crookedneighbor]

@maxisam You can require just the components you need like this:

var btClient = require('braintree-web/client');
var hostedFields = require('braintree-web/hosted-fields');

This will load in _just_ the code for those components, so when you build your app, only the files you need for your app will be included.

[maxisam]

I know. But to make webpack DLL work, it needs to be in separated package.

It's not like I can't live without it. However, I think it makes more sense to put each sub module in its own separated package.

BTW, can we go back to UMD package but not minify it ? (I don't know why people having problem with minified file tho)

[crookedneighbor]

We're not going to change how we package the module at this time, but we appreciate the feedback and we'll keep it in mind.