Bitcoinjs-lib: Problem with webpack (UglifyJS) and version [email protected]

[Josema]

I have a project using a Webpack boilerplate (https://github.com/Josema/preact-webpack-hmr) that has two environments. dev and prod. On dev, I don't have any issue because Webpack does not Uglify the code. But in prod I have this problem:

u {message: "Expected property "1" of type BigInteger, got n", __label: undefined, __property: 1, __value: n, __type: ƒ, …}message: "Expected property "1" of type BigInteger, got n"__label: undefined__property: 1__type: ƒ t(t)__value: n {0: 39560396, 1: 24254232, 2: 47726532, 3: 54351623, 4: 24134563, 5: 20729478, 6: 48965898, 7: 65576818, 8: 4252187, 9: 3018492, 10: 0, t: 10, s: 0}__valueTypeName: "n"stack: "Error: Expected property "1" of type BigInteger, got n↵    at d (http://localhost:8000/static/bundle/libs.js:13:92640)↵    at http://localhost:8000/static/bundle/libs.js:7:49765↵    at Array.every (<anonymous>)↵    at e (http://localhost:8000/static/bundle/libs.js:7:49707)↵    at i (http://localhost:8000/static/bundle/libs.js:7:48167)↵    at Object.i [as sign] (http://localhost:8000/static/bundle/libs.js:25:35134)↵    at n.sign (http://localhost:8000/static/bundle/libs.js:13:61402)↵    at http://localhost:8000/static/bundle/libs.js:25:55722↵    at Array.some (<anonymous>)↵    at d.sign (http://localhost:8000/static/bundle/libs.js:25:55590)"__proto__: Errorconstructor: ƒ f(e,t,r)__proto__: Object
(anonymous) @ main.js:1
Promise rejected (async)
value @ main.js:1
S @ libs.js:13

I know the error comes from bitcoinjs-lib because happen when I use the TransactionBuilder.sign() method.

Then, if I upgrade to 3.2.1 or above the problem of the code disappear. And I got this error when running Webpack/Uglify.

Output when using @3.1.1:

> webpack --config=./webpack/production.js --optimize-minimize --progress --colors --display-error-details

Hash: f39c6260afc7aeb5b9fe
Version: webpack 3.4.1
Time: 43029ms
  Asset    Size  Chunks                    Chunk Names
main.js  248 kB       0  [emitted]         main
libs.js  578 kB       1  [emitted]  [big]  libs
  [14] ./src/api/crypto.js 5.64 kB {0} [built]
  [15] (webpack)/buildin/global.js 509 bytes {1} [built]
  [19] ./src/api/numbers.js 1.71 kB {0} [built]
  [23] ./src/api/Coins/ETH.js 6.13 kB {0} [built]
 [119] multi ./src/index.js 28 bytes {0} [built]
 [120] ./src/index.js + 88 modules 525 kB {0} [built]
 [201] (webpack)/buildin/module.js 517 bytes {1} [built]
    + 273 hidden modules

All good. Output when using @3.2.1 or above:

> webpack --config=./webpack/production.js --optimize-minimize --progress --colors --display-error-details

Hash: cb0937ec69d6fb04ecff
Version: webpack 3.4.1
Time: 17002ms
  Asset     Size  Chunks                    Chunk Names
main.js   248 kB       0  [emitted]         main
libs.js  1.32 MB       1  [emitted]  [big]  libs
  [14] ./src/api/crypto.js 5.64 kB {0} [built]
  [15] (webpack)/buildin/global.js 509 bytes {1} [built]
  [19] ./src/api/numbers.js 1.71 kB {0} [built]
  [23] ./src/api/Coins/ETH.js 6.13 kB {0} [built]
 [124] multi ./src/index.js 28 bytes {0} [built]
 [125] ./src/index.js + 88 modules 525 kB {0} [built]
 [202] (webpack)/buildin/module.js 517 bytes {1} [built]
    + 274 hidden modules

ERROR in libs.js from UglifyJs
Unexpected token: name (ALPHABET) [libs.js:32162,4]

ERROR in libs.js from UglifyJs
Unexpected token: name (ALPHABET) [libs.js:32162,4]
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] build: `webpack --config=./webpack/production.js --optimize-minimize --progress --colors --display-error-details`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/enzo/.npm/_logs/2017-12-11T16_28_14_841Z-debug.log

Notice that the size of libs.js change from 578 kB to 1.32 MB. I don't know how to fix this so any help would be really really appreciated.

I have created a repository with the minimal configuration to reproduce the same errors:
https://github.com/Josema/bitcoinjs-lib_error

[fanatid]

bitcoinjs-lib start used https://github.com/bitcoinjs/bech32/ from 3.2.0
bech32 uses let, maybe you receive problem because this.
Can you try build bech32?

[Josema]

Sorry, what do you mean by building bech32. Whats the process for that?

[fanatid]

With trying building bech32 we will able determine is this issue related with bech32 or not.

[Josema]

But I don't know how to build bech32 standalone. I just use npm for everything.

[junderw]

npm -D install uglify-es-webpack-plugin

webpack.config.js

const UglifyEsPlugin = require('uglify-es-webpack-plugin');

module.exports = {
  // ・・・
  plugins: [
    new UglifyEsPlugin(),
  ],
  // ・・・
}

[dcousens]

@fanatid is let worth the trouble yet? Do we roll back bech32?

[Josema]

@junderw using uglify-es-webpack-plugin with @3.3.1 the problem with webpack disappear. But still the same problem in the code when using .sign()

I think the error comes from this line: https://github.com/bitcoinjs/bitcoinjs-lib/blob/fe0ad814723f58c16eab901a9d5c5dc27b62e090/src/ecdsa.js#L78 but I am not pretty sure because the code is very obfuscated.

I just updated the repository. The code of bitcoinjs-lib is very simple: https://github.com/Josema/bitcoinjs-lib_error/blob/master/src/index.js

This code works when npm run dev but fails when npm run build && npm run prod

[afk11]

Our workaround was just not uglifying some parts of the code: https://github.com/blocktrail/blocktrail-sdk-nodejs/blob/1c39759def25bc52910583e3dda40db3e10a1fd4/Gruntfile.js#L161

[Josema]

Wow, that fixed the issue!

For webpack users just add the options inside of plugins UglifyEsPlugin

new UglifyEsPlugin({
    mangle: {
        reserved: [
            'Buffer',
            'BigInteger',
            'Point',
            'ECPubKey',
            'ECKey',
            'sha512_asm',
            'asm',
            'ECPair',
            'HDNode'
        ]
    }
})

Thank you @afk11. Thank you all too.

[AndreasGassmann]

Is there any way to get this to work with angular-cli projects? It seems that you cannot overwrite the uglify config, so the fix by @Josema doesn't work.

[square-li]

Is there any way to get this to work with angular-cli projects? It seems that you cannot overwrite the uglify config, so the fix by @Josema doesn't work.

In previous versions of angluar-cli, we can do ng eject to get the webpack configures. But now it is deprecated.

My solution for angular-cli is to use angular builder. After switching to the angular builder, you can config your own webpack settings and uglify-js settings.

Remind to put

{
"projects": {
 "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./extra-webpack.config.js",
              "replaceDuplicatePlugins": true,
              "mergeStrategies": {
                "optimization": "replace"
              }
            }
}}}}
}

at your angular.json file.

Also in extra-webpack.config.js, do it as @junderw did.
Otherwise, angular-cli default optimizing will still execute and break the bitcoin-js.

This problem takes me more than one day to figure out. Hope this would help.

https://github.com/meltedspark/angular-builders/issues/147

[pdxwebdev]

Those who are coming here from google, running into issues with bitcoinjs-lib and webpack 5. Try downgrading to webpack 4. Worked for me.

Some of the errors look like:
TypeError: Cannot read property ‘call’ of undefined