Trying to use Node Module with Ionic 4 & Angular

Ionic Framework ionic-v3
1

Hey everyone, I was beginning to develop a new project when I tried to import a node module into my project. I tried to import wlsjs and use the module in my app, but I received this error in the chrome web console:

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'prototype' of undefined
TypeError: Cannot read property 'prototype' of undefined
    at inherits (inherits_browser.js:5)
    at Object../node_modules/hash-base/index.js (index.js:23)
    at __webpack_require__ (bootstrap:83)
    at Object../node_modules/md5.js/index.js (index.js:3)
    at __webpack_require__ (bootstrap:83)
    at Object../node_modules/create-hash/browser.js (browser.js:3)
    at __webpack_require__ (bootstrap:83)
    at Object../node_modules/@whaleshares/wlsjs/lib/auth/ecc/src/hash.js (hash.js:3)
    at __webpack_require__ (bootstrap:83)
    at Object../node_modules/@whaleshares/wlsjs/lib/auth/ecc/src/address.js (address.js:9)
    at __webpack_require__ (bootstrap:83)
    at Object../node_modules/@whaleshares/wlsjs/lib/auth/ecc/index.js (index.js:4)
    at __webpack_require__ (bootstrap:83)
    at Object../node_modules/@whaleshares/wlsjs/lib/api/index.js (index.js:29)
    at __webpack_require__ (bootstrap:83)
    at Object../node_modules/@whaleshares/wlsjs/lib/index.js (index.js:3)
    at resolvePromise (zone.js:831)
    at resolvePromise (zone.js:788)
    at zone.js:892
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:17289)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at drainMicroTaskQueue (zone.js:601)

I attempted to fix the issue with the developers of wlsjs, but they were unsure as of how to solve the problem. I came across the error when I used this code:

import { Component } from '@angular/core';
import * as wlsjs from "@whaleshares/wlsjs";

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page {
  constructor() {}

  doRefresh(event) {
    console.log('Begin async operation');
    wlsjs.api.getAccounts(['tate'], function(err, response){
       console.log(err, response);
    });
    setTimeout(() => {
      console.log('Async operation has ended');
      event.target.complete();
    }, 2000);
  }

}

Specifically, this line causes the issue:

wlsjs.api.getAccounts(['tate'], function(err, response){
       console.log(err, response);
});

I would greatly appreciate it if I was able to find a solution in order to continue using this amazing framework!
Thanks,
Tate

2

hello @tbaumer22 did you find what is the issue when importing the node modules?

1 Like
3

Hello @Ray02

I did manage to find the issue with this module. It doesn’t have anything to do with the Ionic Framework, but rather how it WLSJS affected when it is used in a browser. I had to edit the actual package itself and inject some code into Angular to allow it to work. To do this dynamically, I made a patch.js file which included the following:

const fs = require('fs');
const path = require('path');
const f = 'node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js';
const g = 'node_modules/@whaleshares/wlsjs/lib/auth/';

fs.readFile(f, 'utf8', function (err, data) {
    if (err) {
        return console.log(err);
    }
    var result = data.replace(/node: false/g, 'node: {crypto: true, stream: true, fs: \'empty\'}');

    fs.writeFile(f, result, 'utf8', function (err) {
        if (err) return console.log(err);
    });
});

let logPath = path.join(g, 'index.js');
let logRows = fs.readFileSync(logPath).toString().split('\n');

logRows.unshift('const regeneratorRuntime = require(\'regenerator-runtime\');');
fs.writeFileSync(logPath, logRows.join('\n'));

In english, this is simply requiring a new dependency (Regenerator-Runtime) inside of node_modules/@whaleshares/wlsjs/lib/auth/index.js and editing some Angular settings having to do with Node, Crypto, and Stream. Inside of the package.json, I then set this file to run after npm install like so:

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "postinstall": "node patch.js"
  }

It took me a solid week to fix this issue, and I wish I could’ve gotten more assistance from both Ionic and the developers of WLSJS.