Create-react-app: web3-provider-engine package broke build

[gagarin55]

Description

Installing web3-provider-engine package break build

Expected behavior

npm run build should work without errors

Actual behavior

> react-scripts build

Creating an optimized production build...
Failed to compile.

static/js/main.18c39de7.js from UglifyJs
SyntaxError: Unexpected token: name (senderHex) [./~/eth-sig-util/index.js:43,0]

Environment

Run these commands in the project folder and fill in their results:

1. npm ls react-scripts (if you haven’t ejected):

2. node -v:
   v6.10.1

3. npm -v:
   3.10.10
   Then, specify:

4. Operating system:
   $ lsb_release -a
   No LSB modules are available.
   Distributor ID: Ubuntu
   Description: Ubuntu 16.10
   Release: 16.10
   Codename: yakkety

5. Browser and version:

Reproducible Demo

create-react-app coolproj
cd coolproj
npm i -S web3-provider-engine

Then modify index.js:

import ProviderEngine from 'web3-provider-engine';
import WalletSubprovider from 'web3-provider-engine/subproviders/wallet.js';
import Web3Subprovider from 'web3-provider-engine/subproviders/web3.js';

Then npm run build

Demo repo : https://github.com/gagarin55/create-react-app-build-error

[gaearon]

A library called eth-sig-util (likely a dependency of web3-provider-engine) is shipping uncompiled ES6:

function getPublicKeyFor (msgParams) {
  let senderHex
  const message = ethUtil.toBuffer(msgParams.data)
  const msgHash = ethUtil.hashPersonalMessage(message)

This breaks Uglify which doesn’t support ES6. We intentionally don’t compile node_modules with Babel because it’s slow and potentially can break some code.

Your best bet would be to either precompile the library and its dependencies to ES5 yourself, ask the library maintainers to do it, or eject and add node_modules/eth-sig-util as one of the included folders to the Babel Webpack configuration.