ethereumjs/keythereum

Distribute ES6/CommonJS module

lukehedger opened this issue ยท 15 comments

Hey, any plans to provide Keythereum as an ES6/CommonJS module for compatibility with JavaScript module bundlers (like Webpack)? Generally, the JS ecosystem has moved beyond inclusion via script tag so it'd be great to see this support added to this very useful library!

Appreciate there would be a lot of work involved in this so just starting off discussion by checking if it had been thought about already.

Thanks!

Silur commented

Hi, thanks for your input.
There is an ongoing process of making all ethereumjs repos ES6 compatible.
Next one on my agenda is ethereumjs-util, then keythereum.

Keythereum should already be importable using the ES6/CommonJS-style syntax:

var keythereum = require("keythereum");

Or am I misunderstanding what you're asking for?

@Silur Awesome! That is a very noble pursuit. Let me know if you need any help/review etc.

@tinybike For NodeJS it's fine but not for the browser as the package is reliant upon native Node modules, which cannot be resolved by a bundler targeting the browser.

Should we leave this issue open or will you track elsewhere?

Ah, I see what you mean. As far as I know, keythereum browserifies without any problems (this is how the script tag version is generated). The native-only packages are not ever run in a browser environment (or have browserified equivalents substituted in by browserify, e.g. crypto), although this is guaranteed by run-time checks. If it can be done at the webpack/bundler level instead, that might be better/cleaner!

Edited to add: leaving the issue open is fine with me.

Please make this library use Promises also. I'm also willing to help/review.

@Silur I am using this module from my React Native app, both of the usage below show an error because of the dependence of the Node.js built-in module:

import keythereum from 'keythereum'
var keythereum = require('keythereum')

I tried to import the script from dist folder and still cannot figure it out.

i'm trying this in a RN app, and having similar issues
first, keythereum needed 'path', so i installed it relative to the node_modules/keythereum dir (checked)
then it said i needed fs, but still ran into problems after i installed fs in the same manner.
EDIT: I'm noticing fs/path are just for the file writes, which i wont be using so i'll delete it and see what happens...
EDIT2: Package must have fs.. however it won't install any JS when i try to install it on my project. also have to update references from 'crypto, to 'crypto-js'
EDIT3: Still not working, but some info : https://github.com/philikon/ReactNativify
EDIT4: Imported fine when using the above ^. Had to fresh install the whole ReactNativify and install keythereum. Figuring out how to implement in existing project...

bokub commented

Sorry to dig up this issue after a few months

Having the browserified / browserifiable version of keythereum in the npm module would be a great start: we could just write

import * as  keythereum from 'keythereum/dist/keythereum.min.js';

or

import * as  keythereum from 'keythereum/keythereum-browser';

and have the keythereum object attached to window.

Sorry for the slow response here. I'll see if I can carve out some time today or tomorrow to resolve this issue.

@nacmonad I know you were able to resolve this separately using ReactNativify, but I went ahead and addressed these issues in keythereum anyway in the latest patch (1.0.4). I don't use React Native myself so I haven't actually seen the errors you're talking about. Could you try and build keythereum with your RN app again, and see if you still get the problems you mentioned?

I am trying to use the browser version in React . Trying to import it with
import * as keythereum from 'keythereum/keythereum-browser';
or var keythereum= require('./keythereum') gives me the long list of errors below

Line 609: 'path' is not defined no-undef
Line 617: 'read' is not defined no-undef
Line 622: Unexpected use of 'print' no-restricted-globals
Line 622: 'printErr' is not defined no-undef
Line 622: 'read' is not defined no-undef
Line 623: 'read' is not defined no-undef
Line 624: 'scriptArgs' is not defined no-undef
Line 633: 'importScripts' is not defined no-undef
Line 2339: '__ZTIi' is not defined no-undef
Line 2342: '__ZTIj' is not defined no-undef
Line 2345: '__ZTIl' is not defined no-undef
Line 2348: '__ZTIm' is not defined no-undef
Line 2351: '__ZTIx' is not defined no-undef
Line 2354: '__ZTIy' is not defined no-undef
Line 2357: '__ZTIf' is not defined no-undef
Line 2360: '__ZTId' is not defined no-undef
Line 2363: '__ZTIe' is not defined no-undef
Line 2366: '__ZTIc' is not defined no-undef
Line 2369: '__ZTIa' is not defined no-undef
Line 2372: '__ZTIh' is not defined no-undef
Line 2375: '__ZTIs' is not defined no-undef
Line 2378: '__ZTIt' is not defined no-undef
Line 2405: '__ZTVN10__cxxabiv119__pointer_type_infoE' is not defined no-undef
Line 2548: Unexpected use of 'screen' no-restricted-globals
Line 2549: Unexpected use of 'screen' no-restricted-globals
Line 2550: 'SDL' is not defined no-undef
Line 2550: 'SDL' is not defined no-undef
Line 2558: 'SDL' is not defined no-undef
Line 2558: 'SDL' is not defined no-undef
Line 2602: 'readline' is not defined no-undef
Line 2707: 'MozBlobBuilder' is not defined no-undef
Line 2707: 'WebKitBlobBuilder' is not defined no-undef
Line 11644: 'DV' is not defined no-undef
Line 35697: 'define' is not defined no-undef
How can I fix this?I am doing something wrong with my import statements?

I try to use it in webpack for browser, but I get errors.

ERROR in ./node_modules/keythereum/index.js
Module not found: Error: Can't resolve 'fs' in '/Users/mario/Documents/awesome-project/node_modules/keythereum'
 @ ./node_modules/keythereum/index.js 492:9-22 515:9-22
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/index.vue
 @ ./src/index.vue
 @ ./.temp/index.js

ERROR in ./node_modules/keythereum/lib/scrypt.js
Module not found: Error: Can't resolve 'fs' in '/Users/mario/Documents/awesome-project/node_modules/keythereum/lib'
 @ ./node_modules/keythereum/lib/scrypt.js 37:13-26
 @ ./node_modules/keythereum/index.js
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/index.vue
 @ ./src/index.vue
 @ ./.temp/index.js

Hello, has anyone been successful in using keythereum in react-native?
@nacmonad were you able to use keythereum in your react-native project?

@nujhedtozu Were you finally able to use keythereum without hacky ways like rn-nodeify ? :)

Updates on this issue would be helpful..
Even with
{ "presets": ["module:metro-react-native-babel-preset"], "plugins": [ ["babel-plugin-rewrite-require", { "aliases": { "path": "path-browserify", "crypto": "crypto-browserify", "stream": "stream-browserify" }, "throwForNonStringLiteral": true }] ] }
it still gives errors that module 'path' is not found in the Haste map. Anyone suggestions?