3rd Party Library Installation with webpack

Hi, I'm trying to install a 3rd party library, generated with browsify (https://github.com/bitpay/bitcore-wallet-client), works well with Angular 1 in production.

But now trying to install with webpack, and fail.

angular-cli: 1.0.0-beta.11-webpack.2
node: 4.4.7
os: darwin x64 (Mac OSX El Capitan)

I'm doing this in a component, for example:

import * as Client from 'bitcore-wallet-client';

...

ngOnInit() {
    var bwc = new Client({
      baseUrl: 'https://bws.bitpay.com/bws/api',
      verbose: true
    });
}

The problem is with request (request/request#1529) library used.

The log:

ERROR in ./~/forever-agent/index.js
Module not found: Error: Can't resolve 'net' in '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/node_modules/forever-agent'
 @ ./~/forever-agent/index.js 6:10-24
 @ ./~/request/request.js
 @ ./~/request/index.js
 @ ./~/bitcore-wallet-client/lib/api.js
 @ ./~/bitcore-wallet-client/lib/index.js
 @ ./~/bitcore-wallet-client/index.js
 @ ./src/app/wallet/import/import.component.ts
 @ ./src/app/app.module.ts
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi main

ERROR in ./~/forever-agent/index.js
Module not found: Error: Can't resolve 'tls' in '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/node_modules/forever-agent'
 @ ./~/forever-agent/index.js 7:10-24
 @ ./~/request/request.js
 @ ./~/request/index.js
 @ ./~/bitcore-wallet-client/lib/api.js
 @ ./~/bitcore-wallet-client/lib/index.js
 @ ./~/bitcore-wallet-client/index.js
 @ ./src/app/wallet/import/import.component.ts
 @ ./src/app/app.module.ts
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi main

ERROR in ./~/tough-cookie/lib/cookie.js
Module not found: Error: Can't resolve 'net' in '/node_modules/tough-cookie/lib'
 @ ./~/tough-cookie/lib/cookie.js 32:10-24
 @ ./~/request/lib/cookies.js
 @ ./~/request/index.js
 @ ./~/bitcore-wallet-client/lib/api.js
 @ ./~/bitcore-wallet-client/lib/index.js
 @ ./~/bitcore-wallet-client/index.js
 @ ./src/app/wallet/import/import.component.ts
 @ ./src/app/app.module.ts
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi main

ERROR in ./~/tunnel-agent/index.js
Module not found: Error: Can't resolve 'net' in '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/node_modules/tunnel-agent'
 @ ./~/tunnel-agent/index.js 3:10-24
 @ ./~/request/lib/tunnel.js
 @ ./~/request/request.js
 @ ./~/request/index.js
 @ ./~/bitcore-wallet-client/lib/api.js
 @ ./~/bitcore-wallet-client/lib/index.js
 @ ./~/bitcore-wallet-client/index.js
 @ ./src/app/wallet/import/import.component.ts
 @ ./src/app/app.module.ts
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi main

ERROR in ./~/tunnel-agent/index.js
Module not found: Error: Can't resolve 'tls' in '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/node_modules/tunnel-agent'
 @ ./~/tunnel-agent/index.js 4:10-24
 @ ./~/request/lib/tunnel.js
 @ ./~/request/request.js
 @ ./~/request/index.js
 @ ./~/bitcore-wallet-client/lib/api.js
 @ ./~/bitcore-wallet-client/lib/index.js
 @ ./~/bitcore-wallet-client/index.js
 @ ./src/app/wallet/import/import.component.ts
 @ ./src/app/app.module.ts
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi main

ERROR in [default] /src/app/wallet/import/import.component.ts:5:24 
Cannot find module 'bitcore-wallet-client'.

So, adding a webpack-config.js in https://github.com/bitpay/bitcore-wallet-client will solve the problem? Or we need to add this...

    net: 'empty',
    tls: 'empty'

in angular-cli webpack config file? Like we done here (#1599) with fs ?

Thanks.

@TheLarkInn

@TheLarkInn can you have a look?

@hansl

I'm starting to get the feeling we will need to expose the node builtins. @hansl

Hey guys!

We're facing the same behavior, trying to use AutobahnJS:

ERROR in ./~/ws/lib/WebSocketServer.js
Module not found: Error: Can't resolve 'tls' in '/Users/chief_mc/Dev/Web Projects/v-ticket-admin-ui/node_modules/ws/lib'
 @ ./~/ws/lib/WebSocketServer.js 15:10-24
 @ ./~/ws/index.js
 @ ./~/autobahn/lib/transport/websocket.js
 @ ./~/autobahn/lib/configure.js
 @ ./~/autobahn/lib/autobahn.js
 @ ./~/autobahn/index.js
 @ ./src/app/app.component.ts
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi main

Could you give a hint on how that can be sorted?

update: the only way I've manage to sort it is to directly edit the Webpack common config file in node_modules which is a no-go way.
Is there a chance to give us a tool making it the proper way?

Thanks.

There is no 'proper' way at the moment, but this will be implemented one we have our add-on system implemented.

coolio, looking forward to put my hands on it

Many thanks!

@TheLarkInn

@TheLarkInn what would you recommend people to do until that is implemented then? Would you mind explaining the steps of installing a 3rd party app to make it clear for the rest of the people until we have a permanent fix for this?

I taught a major reason behind switching to webpack was that it would fix this issue?

@RicardoVaranda

@RicardoVaranda the readme has instructions on how to add 3rd party libs, this is IMHO a special case where the lib relies on node runtime built-ins.

@filipesilva

@filipesilva

You are right after looking at the updated readme one I learnt about app [0].scripts which is now used and solved all my issues!

@filipesilva

@filipesilva @RicardoVaranda

Am I missing something? I followed the instructions in the readme.

  "apps": [
    {
      "main": "src/main.ts",
      "tsconfig": "src/tsconfig.json",
      "mobile": false,
      "scripts":  [
          "<path-to-file>"
      ]
    }
  ]

@ecollis6

@ecollis6 Looks good to me, are you having problems with that config?

Same problem with both styles and scripts in v1.0.0-beta.11-webpack.8

"apps": [
    {
      "main": "src/main.ts",
      "tsconfig": "src/tsconfig.json",
      "mobile": false,
      "styles": [
        "src/styles.scss"
      ],
      "scripts": [
        "node_modules/hammerjs/hammer.min.js",
        "node_modules/d3/d3.min.js"
      ]
    }
  ],

Update: My bad! Had webpack.8 in global and webpack.2 in local, plus all the deprecated configs of webpack.2. Changed it and it's working!

Why minified version?

@TheLarkInn

@TheLarkInn habit. I know webpack will minify. Although it's not relevant if it's minified or not.

Any updates on this guys? With beta.15 I still need to manually add tls: 'empty' to node_modules for AutobahnJS to work properly...

I am also getting similar error while using mongodb withing angular2 app, Is there any workaround?

@chiefmc

@chiefmc I tried setting tls: 'empty' and afaik it did not solve the original issue.

I'm not familiar with bitcore-wallet-client but wonder if it works in pure browser app, for instance if it's loaded via a CDN url or something. If it has a dependency on tls and net those aren't available in the browser I think.

Maybe it solves your problem though, so I'll make a PR for it.

fix(build): set tls and net node builtins to empty

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

fix(build): set tls and net node builtins to empty

Navigation Menu

Repository navigation

3rd Party Library Installation with webpack #1696

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

3rd Party Library Installation with webpack #1696

Description

Activity

filipesilva commented on Aug 19, 2016

TheLarkInn commented on Aug 19, 2016

chiefmc commented on Aug 20, 2016

chiefmc commented on Aug 20, 2016

TheLarkInn commented on Aug 20, 2016

chiefmc commented on Aug 20, 2016

RicardoVaranda commented on Aug 25, 2016

filipesilva commented on Aug 28, 2016

RicardoVaranda commented on Aug 30, 2016

ecollis6 commented on Sep 6, 2016

RicardoVaranda commented on Sep 8, 2016

herkulano commented on Sep 9, 2016

TheLarkInn commented on Sep 9, 2016

herkulano commented on Sep 9, 2016

chiefmc commented on Sep 21, 2016

sfali23 commented on Oct 8, 2016

filipesilva commented on Oct 10, 2016

angular-automatic-lock-bot commented on Sep 6, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions