Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support bundling/webpack #35

Open
EddyVerbruggen opened this issue Mar 7, 2018 · 35 comments

Comments

@EddyVerbruggen
Copy link
Owner

commented Mar 7, 2018

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

This comment has been minimized.

Copy link

commented Mar 7, 2018

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

This comment has been minimized.

Copy link
Owner Author

commented Mar 7, 2018

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

@kaurag007ph

This comment has been minimized.

Copy link

commented Mar 9, 2018

Is bundling no longer supported?

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

@EddyVerbruggen

This comment has been minimized.

Copy link
Owner Author

commented Mar 9, 2018

@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

This comment has been minimized.

Copy link

commented Apr 5, 2018

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

This comment has been minimized.

Copy link

commented Apr 6, 2018

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

This comment has been minimized.

Copy link

commented Apr 7, 2018

Thanks @m-abs! It works for me.

@EddyVerbruggen

This comment has been minimized.

Copy link
Owner Author

commented Apr 7, 2018

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

This comment has been minimized.

Copy link

commented Apr 7, 2018

@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

This comment has been minimized.

Copy link

commented Apr 9, 2018

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

This comment has been minimized.

Copy link

commented May 17, 2018

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?

@jannotabamo

This comment has been minimized.

Copy link

commented May 18, 2018

any luck fixing the issue with webpack? :(

@m-abs

This comment has been minimized.

Copy link

commented May 18, 2018

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

@phortx

This comment has been minimized.

Copy link

commented May 28, 2018

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 :)

@jannotabamo

This comment has been minimized.

Copy link

commented May 29, 2018

@phortx did you try to remove and reinstall platforms?

@phortx

This comment has been minimized.

Copy link

commented May 29, 2018

@jannotabamo Nope, how do I do that?

@jannotabamo

This comment has been minimized.

Copy link

commented May 29, 2018

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

@phortx

This comment has been minimized.

Copy link

commented May 29, 2018

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

This comment has been minimized.

Copy link

commented May 29, 2018

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

  • clone
  • yarn
  • yarn run debug:android
@phortx

This comment has been minimized.

Copy link

commented Jun 6, 2018

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

@praveshkhatana

This comment has been minimized.

Copy link

commented Sep 4, 2018

Anyone has a working solution?

@lights0123

This comment has been minimized.

Copy link

commented Sep 16, 2018

@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

This comment has been minimized.

Copy link

commented Sep 16, 2018

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

This comment has been minimized.

Copy link

commented Sep 16, 2018

Thanks @lights0123, I will try it

@tupperkion

This comment has been minimized.

Copy link

commented Nov 5, 2018

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?

@tupperkion

This comment has been minimized.

Copy link

commented Nov 6, 2018

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>";                                                                                        
  1. 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

This comment has been minimized.

Copy link

commented Dec 1, 2018

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!

@tupperkion

This comment has been minimized.

Copy link

commented Dec 2, 2018

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

@praveshkhatana

This comment has been minimized.

Copy link

commented Jan 16, 2019

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

This comment has been minimized.

Copy link

commented Mar 15, 2019

@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?

@muazmalas

This comment has been minimized.

Copy link

commented Mar 17, 2019

Same here... cannot access the article

@muazmalas

This comment has been minimized.

Copy link

commented Mar 17, 2019

Thanks

@westlakem

This comment has been minimized.

Copy link

commented Mar 18, 2019

So do we have a finalized solution yet for bundling with webpack? I'm starting to push NativeScript in the company I work for and this would help a lot.

@fhackenb

This comment has been minimized.

Copy link

commented Apr 25, 2019

I just had to follow step 1 from that blog post to get it working for a nativescript-vue project with webpack

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
You can’t perform that action at this time.