Electron: Load a file with `executeJavaScript`

Question

I need to inject an NPM package into a BrowserView by using executeJavaScript . The package is Web3 and here is what I've tried so far.

import Web3 from 'web3'

const web3 = '' + Web3; // stringify the Web3 class

view.webContents.executeJavaScript(`
  const provider = // ... provider got injected successfully because it doesn't have dependencies.
  const web3 = new ${web3}(provider);
`)

But this throws the following error.

Uncaught ReferenceError: core is not defined
    at new Web3 (<anonymous>:45:5)
    at <anonymous>:41:16

Web3 is trying to load its core dependency which unfortunately did not get stringified.

So my question is, how can I load this whole package into the BrowserView ? Aka how can you load npm package in the browser, if you do not have control over <script /> tags (at least I wouldn't know how to inject those in Electron)?

Update:

Because of what OJ Kwon suggested in the comments, I tried bundling Web3 with Browserify by running

browserify packages/web3/src/index.js -o web3-bundle.js

. It seemed to have worked, because at the very end of the bundled file ( web3-bundle.js ) it says:

// ... 50k+ lines long file

var version = require('../package.json').version;
var core = require('web3-core');
var Eth = require('web3-eth');
var Net = require('web3-net');
var Personal = require('web3-eth-personal');
var Shh = require('web3-shh');
var Bzz = require('web3-bzz');
var utils = require('web3-utils');

var Web3 = function Web3() {
    var _this = this;

    // sets _requestmanager etc
    core.packageInit(this, arguments);

    this.version = version;
    this.utils = utils;

    this.eth = new Eth(this);
    this.shh = new Shh(this);
    this.bzz = new Bzz(this);

    // overwrite package setProvider
    var setProvider = this.setProvider;
    this.setProvider = function (provider, net) {
        setProvider.apply(_this, arguments);

        this.eth.setProvider(provider, net);
        this.shh.setProvider(provider, net);
        this.bzz.setProvider(provider);

        return true;
    };
};

Web3.version = version;
Web3.utils = utils;
Web3.modules = {
    Eth: Eth,
    Net: Net,
    Personal: Personal,
    Shh: Shh,
    Bzz: Bzz
};

core.addProviders(Web3);

module.exports = Web3;

Now, I'm trying to import and include it like this:

const Web3 = require('./web3-bundle.js');

which doesn't work. It says undefined is not a constructor.

const Web3 = require('./web3-bundle.js').Web3;

and

const Web3 = require('./web3-bundle.js').default;

both didn't work, either. How should one do this?

Update 2: Inspecting the bundle further, it has uses exports. and module.exports = . My editor only suggests methods and objects exported with exports. as importable

Answer 1

I suggest you to use this boilerplate or a boilerplate including a good webpack configuration ( suggested boilerplate ).

Follow these steps:

• Clone the repository
• Run yarn install
• Run yarn add web3
• Add import Web3 from 'web3'; into the app/containers/HomePage.js file (react render view).
• Enjoy