Support bundling/webpack

[EddyVerbruggen]

Issue#29 changed patching the node_modules folder to the platforms folder, so bundling is no longer supported.

Perhaps we should patch node_modules when bundling, and platforms when not.

[westlakem]

If you're going to patch node_modules, make a copy first and then revert after the bundle is complete (if possible). Otherwise we're going to be back into the same boat as before.

[EddyVerbruggen]

Good point. Perhaps I should add to the readme that you have to do rm -rf node_modules && npm i after bundling. 🤔

[kaurag007ph]

Is bundling no longer supported?

I tried rm -rf node_modules && npm i after bundling but it doesn't actually solve the issue.

[EddyVerbruggen]

@kaurag007ph This issue was created to support bundling with version 0.6.0 and higher. Lower versions patched the node_modules folder so should support bundling.

[m-abs]

I think this could be solved be a webpack resolve plugin, similar to directory-named-webpack-plugin

I don't fully understand what the patch-npm script does, but I'd be willing to give it a try.

[m-abs]

I'm now able to build with webpack.

What I did:

Added these lines to the top of webpack.config.js

const shims = require('nativescript-nodeify/shims.json');
const aliases = {};
for (const key of Object.keys(shims)) {
        const value = shims[key];
        aliases[key + '$'] = value;
}
aliases['inherits$'] = 'inherits/inherits_browser';

Add

aliasFields: ["browser"],

and replace

alias: {
  '~': resolve("./app")
}

With

alias: Object.assign({
    '~': resolve("./app")
}, aliases),

on the resolve object.

And removing the hook hooks/after-prepare/nativescript-nodeify.js

I'm having some issues with the crypto-module. I'm getting

TypeError: crypto.createHmac is not a function

From jwa used by jsonwebtoken in the demo.

I'll be uploading the work so far on my fork during the weekend.

[kaurag007ph]

Thanks @m-abs! It works for me.

[EddyVerbruggen]

If we can't automate this then at least we'll add this info to the readme. Thanks so much for sharing your findings so far!

[m-abs]

@EddyVerbruggen I'd like to write a few helper functions and disable the hook for webpack, but some info in the readme would be needed.

But it's hard for me to test, the demo keeps crashing on me.

[m-abs]

I'm working on this branch: https://github.com/m-abs/nativescript-nodeify/tree/feature/webpack-support

It's still a WIP and needs to be tested some more, before I make a PR. As I wrote before I'm having trouble testing, because the demo-app keep crashing on me.

[sevafeld]

Hi @m-abs

Tried to use this solution but getting error

JS: ERROR Error: Uncaught (in promise): TypeError: util.inherits is not a function
JS: TypeError: util.inherits is not a function
JS:     at Object.defineProperty.value (file:///data/data/com.myapp.myapp/files/app/0.js:99511:6)
JS:     at __webpack_require__ (file:///data/data/com.myapp.myapp/files/app/vendor.js:53:30)

Am I missing something?

[ghost]

any luck fixing the issue with webpack? :(

[m-abs]

@sevafeld I haven't seen it before, but we've stopped using this plugin. We only needed buffer for our project.

[phortx]

I've tried to use this plugin in a nativescript-vue app (with the nativescript-vue-cli template) to get jsonwebtoken running. I used @m-abs solution. Without success so far.

I'm getting a

ERROR in ./node_modules/readable-stream/lib/_stream_readable.js
Module not found: Error: Recursion in resolving

and

Error: com.tns.NativeScriptException: Failed to find module: "node-libs-browser/node_modules/buffer/index.js", relative to: app/tns_modules/.

I'd be thankful for any advice :)

[ghost]

@phortx did you try to remove and reinstall platforms?

[phortx]

@jannotabamo Nope, how do I do that?

[ghost]

tns platform remove android/ios and tns platform add android/ios

[phortx]

Unfortunately this doesn't work with the nativescript-vue-cli template.

I've tried deleting the node_modules and dist dir, adding tns-android to the package.json, run yarn install, applied this changes, but without success, it still fails with the same errors.

[phortx]

I've created a example repo to reproduce: https://github.com/phortx/nodeify-webpack-repo

• clone
• yarn
• yarn run debug:android

[phortx]

No idea? This is currently a show stopper for the usage of nativescript for our mobile app :(

[praveshkhatana]

Anyone has a working solution?

[lights0123]

@praveshkhatana @phortx I'm having success with the vue template and this advice (not a fork) and deleting hooks/after-prepare/nativescript-nodeify.js. Also, instead of

alias: Object.assign({
	'~': resolve("./app")
}, aliases),

I use

alias: {
	'~': appFullPath,
	'@': appFullPath,
	'vue': 'nativescript-vue',
	...aliases
}

(everything above ...aliases was there by default, if it wasn't, just remove what wasn't)

[lights0123]

Also, if you want to use a module built into Nativescript (e.g. http) without using this module's replacement, you can use 'http/../http' instead of 'http' in a require or import statement.

[praveshkhatana]

Thanks @lights0123, I will try it

[kiontupper]

I haven't managed to get this to work. I keep getting this error when I require @trust/webcrypto:

ERROR in ../node_modules/readable-stream/lib/_stream_readable.js
Module not found: Error: Recursion in resolving
Stack:
  resolve: (/<path>/node_modules/readable-stream/lib) string_decoder/
  newResolve: (/<path>/node_modules/readable-stream/lib) string_decoder/
  parsedResolve: (/<path>/node_modules/readable-stream/lib) string_decoder directory module
  describedResolve: (/<path>/node_modules/readable-stream/lib) string_decoder directory module
  resolve: (/<path>/node_modules/readable-stream/lib) string_decoder/ directory module
  newResolve: (/<path>/node_modules/readable-stream/lib) string_decoder/ directory module
 @ ../node_modules/readable-stream/lib/_stream_readable.js 170:40-66 330:38-64
 @ ../node_modules/readable-stream/readable-browser.js
 @ ../node_modules/stream-browserify/index.js
 @ ../node_modules/hash-base/index.js
 @ ../node_modules/ripemd160/index.js
 @ ../node_modules/pbkdf2/lib/sync-browser.js
 @ ../node_modules/pbkdf2/browser.js
 @ ../node_modules/crypto-browserify/index.js
 @ ../node_modules/@trust/webcrypto/src/Crypto.js
 @ ../node_modules/@trust/webcrypto/src/index.js
 @ ./app.js

I've tried the above comment and also messing with the string_decoder alias with no success. It seems like it may be because _stream_readabale.js has two require("string_decoder") statements, one on line 167 and another on line 326 (though the error says 170 and 330).

Does anybody know how to get readable-stream dependents to work?

[kiontupper]

Original comment for context:

I have gotten a successful build by doing the following:

1. Use wzrd.in to browserify-compile problematic modules (in my case readable-stream)
2. Minifying the modules using babel and add them to the app folder
3. Add an alias near the top of the webpack.config.js file as follows:

aliases['readable-stream'] = __dirname + "/app/<compiled-module-name>";                                                                                        

4. Attempt to build. Repeat process if another problem arises (in my case with stream-browserify).

I'm not at my main computer, so I can't test whether the module works at runtime yet, but I will edit this comment with my results.

If wizrd.in returns a gateway time out, reload the page every few seconds or so until a response is returned.

New updates:

So it didn't survive runtime, at all. Getting this to work has taken several very hacky things.

I essentially moved my app.js code to a separate folder with a newly-npm init-ed folder with all of the non-nativescript dependencies, it also has nativescript-nodify as a dependency and browserify and aliasify as devDependencies. package.json is configured with aliasify to provide aliases according to the nodeify shims.json.

.I then set up a browserify workflow that also runs a custom script. This script replaces all require's with _dereq_ (for some reason I couldn't get derequire to work so I did this myself), and then I parsed the bundle produced by browserify --ignore-missing to revert missing deps back to normal require statements so that webpack sees them. Then I simply write the file to the nativescript folder and build and run.

I'm willing to write a guide on this if somebody asks but for the time being I'll leave this issue alone.

[jbs-fm]

I'm willing to write a guide on this if somebody asks but for the time being I'll leave this issue alone.

Thanks for the updates so far @tupperkion 👍. Moving the non-nativescript dependencies into a separate folder seems like the best strategy, however my build still fails when attempting what you described.

Would appreciate a guide on this to see if i've missed anything!

[kiontupper]

@jbs-fm I've written a guide on my personal blog.

[praveshkhatana]

Thanks @tupperkion, it works and APP is running now but getting one small issue

TypeError: undefined is not an object (evaluating 'util.stream.Stream') at

https://github.com/aws/aws-sdk-js/blob/c4452adb0fe7cbabfec1379da17d1a316408ff6b/lib/util.js#L704

[envisean]

@jbs-fm I've written a guide on my personal blog.

@tupperkion I wasn't able to access your article anymore. Does someone have a copy of the instructions?