FilterableListpicker + Webpack

[mjrichards91]

I am using webpack to bundle my app and it seems to be having an issue initializing a new instance of the FilterableListpicker. Is there any special configuration required in order to get this plugin working with webpack?

I am using Angular in my app and my best guess right now is that webpack is not including the filterable-listpicker.xml file.

ERROR Error: Uncaught (in promise): TypeError: Cannot set property 'bindingContext' of undefined
JS: TypeError: Cannot set property 'bindingContext' of undefined
JS:     at new FilterableListpicker (file:///data/data/com.mycompany.myapp/files/app/bundle.js:56458:39)
JS:     at ViewUtil.module.exports.ViewUtil.createView (file:///data/data/com.mycompany.myapp/files/app/vendor.js:80840:20)
JS:     at EmulatedRenderer.module.exports.NativeScriptRenderer.createElement (file:///data/data/com.mycompany.myapp/files/app/bundle.js:54439:30)
JS:     at EmulatedRenderer.module.exports.EmulatedRenderer.createElement (file:///data/data/com.mycompany.myapp/files/app/bundle.js:54691:51)
JS:     at DebugRenderer2.module.exports.DebugRenderer2.createElement (file:///data/data/com.mycompany.myapp/files/app/vendor.js:15529:49)
JS:     at createElement (file:///data/data/com.mycompany.myapp/files/app/vendor.js:10885:27)
JS:     at createViewNodes (file:///data/data/com.mycompany.myapp/files/app/vendor.js:14060:61)
JS:     at callViewAction (file:///data/data/com.mycompany.myapp/files/app/vendor.js:14533:13)
JS:     at execComponentViewsAction (file:///data/data/com.mycompany.myapp/files/app/vendor.js:14442:13)
JS:     at createViewNodes (file:///data/data/com.mycompany.myapp/files/app/vendor.js:14127:5)
JS:     at createRootView (file:///data/data/com.mycompany.myapp/files/app/vendor.js:13988:5)
JS:     at callWithDebugContext (file:///data/data/com.mycompany.myapp/files/app/vendor.js:15413:42)
JS:     at Object.debugCreateRootView [as createRootView] (file:///data/data/com.mycompany.myapp/files/app/vendor.js:14696:12)
JS:     at ComponentFactory_.module.exports.ComponentFactory_.create (file:///data/data/com.mycompany.myapp/files/app/vendor.js:11583:46)
JS:     at ComponentFactoryBoundToModule.module.exports.ComponentFactoryBoundToModule.create (file:///data/data/com.mycompany.myapp/files/app/vendor.js:4354:29)

[davecoffin]

Unfortunately I don't know that this will work with Webpack. Webpack doesnt like builder, and the app uses builder to append the views. I will look into adding webpack support, if you know of a better way to handle this not using builder let me know.

[mjrichards91]

The only other idea I would have instead of builder to load an .xml file is to define the view as a class. Is it really builder that is causing the issue or could it be that it is not finding the .xml file?

[davecoffin]

I'm not really sure. Webpack is essentially a mystery to me: http://davecoffin.com/blog/11-16-17-how-i-got-webpack-to-work

[mjrichards91]

I managed to get it working by doing a couple things. First, I modified the plugin to use a template rather than the .xml file:

var innerComponent = builder.parse(`<GridLayout id="dc_flp_container">...</GridLayout>`);

After I did that, a new error showed it's face saying that it could not find ui/layouts/grid-layout. Using the recommended approach here to register tns-core-modules UI framework modules, I created a bundle-config.js with just the line:

require("bundle-entry-points");

I then required the bundle-config within my app.module.ts file and the stars aligned!

Now I am unsure of how to move forward with this. I could make a pull request moving the xml content into a template, but I am not sure that is the best approach for the plugin. Regardless, I will be making this change to my local environment to allow my project to function. Any ideas?

[davecoffin]

Thats great! I mean if it works, then its a better approach than before haha :)
Could you test it on an angular non webpack and vanilla js non webpack to make sure that approach works everywhere? Then you could create a PR and I'll add you to the contributors list. Thanks :)

[davecoffin]

Hey, so the only changes required here are to parse the xml using builder rather than load the xml file in. I was doing some testing in the plugin this morning so I threw that in and it works fine, so I'll release it in the next update, and hopefully that will appease the webpack gods. Folks will just have to follow the webpack instructions and include the bundle config like you mention above.

[davecoffin]

Ok. 2.0.0 has been deployed including this fix, so I'm going to mark this as closed, feel free to re-open if updating to 2.0.0 doesnt solve the problem. Also, check out the other updates included in 2.0.0!

[elgibor-solution]

I use angular+webpack and @mjrichards91 solution save my day!

[KevinBeckers]

Can someone provide a but more info on the webpack part? I am struggeling with this.
I am using nativescript 4.1.1

[elgibor-solution]

@KevinBeckers i use angular+webpack and below is how i make it work on my side

1. You need to create a new file bundle-config.js under app folder

if (global.TNS_WEBPACK) {
    require("bundle-entry-points");
    const context = require.context("~/", true, /(page|fragment)\.(xml|css|js|ts|scss|less|sass)$/);
    global.registerWebpackModules(context);
}

2. open app.module.ts and put

import "./bundle-config";

at the top of the file

[KevinBeckers]

@FrozenMaiden Thank you. I will add a PR for extra docs.

[KevinBeckers]

PR #27