Library seems to be incompatible with Brunch

After failing to use this library on my main project, I experimented with some sandbox projects to try and get to the root of the issue.

I was able to use this library with Vue 2.0 + Vue CLI (which uses Webpack), but when I tried to use it in a Vue 2.0 + Brunch project, I encountered the same errors I saw on my main project.

When executing this code

const transport = await TransportU2F.create();
const eth = new Eth(transport);
const { address } = await eth.getAddress("44'/60'/0'/0'/0");

the last line throws the following TypeError: ascii is not a function

which originates from here:

key: "setScrambleKey",
value: function setScrambleKey(scrambleKey) {
  this.scrambleKey = Buffer.from(scrambleKey, "ascii");
}

I've experimented with other transports, which also failed. It's worth mentioning that in the case of @ledgerhq/hw-transport-node-hid, the error is TypeError: Buffer.alloc is not a function originating from the following code in hid-framing.js

var initialAcc = {
  data: Buffer.alloc(0),
  dataLength: 0,
  sequence: 0
};

Unlike the U2F case, this error is thrown when the node-hid transport library is imported.

Here is the minimum amount of code required to reproduce this issue.

app/main.js

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
    el: '#app',
    render: h => h(App)
})

app/App.vue

<template>
  <div id="app">
    <button
      @click="doThing"
    >
      Click me
    </button>
  </div>
</template>

<script>
import "babel-polyfill";
import Transport from "@ledgerhq/hw-transport-u2f";
// import Transport from "@ledgerhq/hw-transport-node-hid";
import Eth from "@ledgerhq/hw-app-eth";

export default {
  name: 'app',
  methods: {
    async doThing() {
      const transport = await Transport.create();
      const eth = new Eth(transport);
      const { address } = await eth.getAddress("44'/60'/0'/0'/0");
      console.log(address);
    }
  }
}

</script>

app/assets/index.html

<div id="app" />

package.json

{
  "name": "brunch-vue-barebones",
  "description": "A Barebones Vue Skeleton for Brunch",
  "version": "0.0.1",
  "scripts": {
    "start": "brunch watch --server",
    "build": "brunch build --production"
  },
  "author": {
    "url": "http://tomquirk.com.au",
    "name": "Tom Quirk",
    "email": "tomquirkacc@gmail.com"
  },
  "repository": {
    "url": "https://github.com/tomquirk/brunch-vue-barebones"
  },
  "keywords": [
    "vue",
    "brunch",
    "skeleton",
    "vue-router"
  ],
  "dependencies": {
    "@ledgerhq/hw-app-eth": "^4.50.0",
    "@ledgerhq/hw-transport-node-hid": "^4.50.0",
    "@ledgerhq/hw-transport-u2f": "^4.50.0",
    "vue": "^2.5.16"
  },
  "devDependencies": {
    "babel-brunch": "^6.1.1",
    "babel-eslint": "^7.2.3",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-polyfill": "^6.26.0",
    "brunch": "^2.10.12",
    "vue-brunch": "^2.0.1"
  },
  "license": "ISC"
}

brunch-config.js

module.exports = {
  files: {
    javascripts: {
      joinTo: {
        'vendor.js': /^(?!app)/,
        'app.js': /^app/
      }
    },
    templates: {
      joinTo: 'app.js'
    }
  },
  plugins: {
    babel: {
      presets: ['es2015']
    }
  }
}

Your insight would be greatly appreciated. Thank you.

LedgerHQ / ledgerjs

Library seems to be incompatible with Brunch #342