Search code examples
androidwebpacknativescriptnativescript-vueradlistview

Webpack errors when trying to use RadListView on android (Nativescript-vue)


I'm having a major issue when I am trying to use the RadListView plugin in an Android app (I haven't tried in iOS, but I presume the issue will be the same)

Following the instructions at https://docs.nativescript.org/vuejs/ns-ui/listview/getting-started, I have added the plugin to my project. However, as soon as I add the following line to my main.js:

import RadListView from 'nativescript-ui-listview/vue';

I am met with a wall of webpack errors, such as:

System.err: An uncaught Exception occurred on "main" thread.
System.err: Unable to create application com.tns.NativeScriptApplication: com.tns.NativeScriptException: Error calling module function 
System.err: TypeError: _nativescript_core__WEBPACK_IMPORTED_MODULE_0__.Property is not a constructor
System.err: File: (file: node_modules/nativescript-ui-listview/ui-listview.common.js:65:44)
System.err: 
System.err: StackTrace: 
System.err: ../node_modules/nativescript-ui-listview/ui-listview.common.js(file: node_modules/nativescript-ui-listview/ui-listview.common.js:65:44)
System.err:     at __webpack_require__(file: app/webpack/bootstrap:750:0)
System.err:     at fn(file: app/webpack/bootstrap:120:0)
System.err:     at (file: node_modules/nativescript-ui-listview/ui-listview.android.js:1:0)
System.err:     at ../node_modules/nativescript-ui-listview/ui-listview.js(file:///data/data/uk.nhs.mft.demo.intranet.app/files/app/vendor.js:85236:30)
System.err:     at __webpack_require__(file: app/webpack/bootstrap:750:0)
System.err:     at fn(file: app/webpack/bootstrap:120:0)
System.err:     at ../node_modules/nativescript-ui-listview/vue/index.js(file: node_modules/nativescript-ui-listview/vue/index.js:1:0)
System.err:     at __webpack_require__(file: app/webpack/bootstrap:750:0)
System.err:     at fn(file: app/webpack/bootstrap:120:0)
System.err:     at (file: app/main.js:1:0)
System.err:     at ./main.js(file:///data/data/uk.nhs.mft.demo.intranet.app/files/app/bundle.js:2007:30)
System.err:     at __webpack_require__(file: app/webpack/bootstrap:750:0)
System.err:     at checkDeferredModules(file: app/webpack/bootstrap:43:0)
System.err:     at webpackJsonpCallback(file: app/webpack/bootstrap:30:0)
System.err:     at (file:///data/data/uk.nhs.mft.demo.intranet.app/files/app/bundle.js:2:57)
System.err:     at require(:1:266)

With no idea myself how to resolve, I'm hoping someone may have a solution to help me? For reference, I am running 6.8.0 of nativescript and ^9.0.4 of nativescript-ui-listview.

If there is any more info I can give to help debug this issue please ask and I will be happy to provide.


Solution

  • For Nativescript version 6 branches. It's recommended to use the following dependencies.

    dependencies

    • "@nativescript/core": "6.5.15",
    • "nativescript-ui-listview": "8.0.1", OR "8.2.1-next-2020-05-22-112620-01"

    devDependencies

    • "tns-platform-declarations": "~6.5.15",
    • "nativescript-vue": "~2.7.1",