ES6 Module Consumption

[jeffscottward]

When attempting you use a modern bundler (in my case its Rollup http://rollupjs.org/). I cannot import individual modules that I need because they aren't exported correctly.

Module MY_PROJECT/node_modules/web3-provider-engine/subproviders/rpc.js does not export default (imported by MY_PROJECT/lib/index.js)

Error: Module MY_PROJECT/node_modules/web3-provider-engine/subproviders/rpc.js does not export default (imported by MY_PROJECT/lib/index.js)

at Module.trace (MY_PROJECT/node_modules/rollup/src/Module.js:683:30)
at MY_PROJECT/node_modules/rollup/src/Module.js:265:30
at Array.forEach (native)
at MY_PROJECT/node_modules/rollup/src/Module.js:263:25
at Array.forEach (native)
at Module.bindReferences (MY_PROJECT/node_modules/rollup/src/Module.js:256:19)
at MY_PROJECT/node_modules/rollup/src/Bundle.js:104:44
at Array.forEach (native)
at MY_PROJECT/node_modules/rollup/src/Bundle.js:104:18

[kumavis]

@jeffscottward this is a node.js style module, you'll need to use a transpiler or something

[kumavis]

you may need as many as all three node plugins for rollup https://github.com/rollup/rollup/wiki/Plugins node-builtins - Allow to use Node.JS built-in packages with rollup node-globals - injects the same node globals browserify does (i.e process, Buffer, etc) node-resolve – use the Node.js module resolution algorithm (e.g. modules from node_modules, installed with npm)

This will likely be a requirement for most of the ethereumjs ecosystem if using from rollup

[jeffscottward]

I'm using https://github.com/rollup/rollup-plugin-node-resolve#usage which already has a field for builtins. Adding the globals plugin I don't think would resolve the issue. It think nodeResolve is broken?

[jeffscottward]

Error transforming /Users/jeffscottward/Documents/Development/Github/ConsenSys/core/uPort/libs/uport-lib/node_modules/rollup-plugin-node-builtins/src/es6/util.js: 'import' and 'export' may only appear at the top level (26:0) in /Users/jeffscottward/Documents/Development/Github/ConsenSys/core/uPort/libs/uport-lib/node_modules/rollup-plugin-node-builtins/src/es6/util.js
SyntaxError: Error transforming /Users/jeffscottward/Documents/Development/Github/ConsenSys/core/uPort/libs/uport-lib/node_modules/rollup-plugin-node-builtins/src/es6/util.js: 'import' and 'export' may only appear at the top level (26:0) in /Users/jeffscottward/Documents/Development/Github/ConsenSys/core/uPort/libs/uport-lib/node_modules/rollup-plugin-node-builtins/src/es6/util.js

No 🎲

[BennyM]

I'm using Webpack instead of rollup and am also experiencing difficulties. After importing

import { Web3ProviderEngine } from 'web3-provider-engine';

and creating an object

var engine = new Web3ProviderEngine();

I get the error: Web3ProviderEngine is not a constructor function.

The generated javascript looks like this:

var engine = new web3_provider_engine_1.Web3ProviderEngine();

While poking around in the browser I can find the function at the prefix.

Not sure if this is a webpack issue or the way the library is structured. I don't experience this issue with for instance web3 or eth-lightwallet.

[BennyM]

Ok got it to work using the following syntax in my code:

import * as Web3ProviderEngine  from 'web3-provider-engine';
import * as RpcSource  from 'web3-provider-engine/subproviders/rpc';
import * as HookedWalletSubprovider from 'web3-provider-engine/subproviders/hooked-wallet';