Search code examples
androidmigrationnativescripttypeerrornativescript-angular

Nativescript TypeError: Cannot read property 'items' of undefined


I am building a mobile app with the help of NativeScript Sidekick. Following the release of Nativescript 6.0, I was forced to migrate to this newer version. This unfortunately rendered some of my application's pages inaccessible.

In search of a solution, I traversed Nativescript and general forums as well as Nativescript's posts regarding this migration. I also came across something known as hooks but I couldn't find anything explicitly related to the issue I am facing. StackOverflow posts seemed populated with similar issues but the solutions provided did not help me resolve the specific TypeError that has been causing my pages to crash.

Since I use Git for source control, I attempted to switch to different branches and see if I could instead continue development there. All branches warranted the same result: I could not build my project without migrating to 6.0, which led to the same TypeError.

Subsequently, I tried to set and update any package dependencies that might be causing issues as my phone's StackTrace kept referencing the file vendor.js. This did not help.

In a desperate attempt, I decided to completely remove any trace of Android files and my project's files, after which I did a clean reinstall of all required software using the choco package manager, as outlined here. I skipped installing an emulator as I am running everything on a physical Android device via tns run android. Running tns doctor in the terminal confirmed that everything was fine. I then proceeded to git clone master from a remote repository and created a local test branch via git checkout -b test. I once again ran my project using tns. Although the app builds, the same pages still crash because of the migration.

Following these steps, I opened Git Bash and executed the following:

tns device android --available-devices to locate my Device ID

tns run --device fooId to build and run the project on my selected device

Here is the TypeError and the beginning of the associated StackTrace:

System.err: An uncaught Exception occurred on "main" thread.
System.err: Calling js method onCreateView failed
System.err: TypeError: Cannot read property 'items' of undefined
System.err:
System.err: StackTrace:
System.err:     Frame: function:'push.../node_modules/tns-core-modules/ui/tabs/tabs.js.Tabs.onLoaded', file:'file:///node_modules\tns-core-modules\ui\tabs\tabs.js:384:0
System.err:     Frame: function:'', file:'file:///node_modules\tns-core-modules\ui\core\view-base\view-base.js:311:75
System.err:     Frame: function:'push.../node_modules/tns-core-modules/ui/core/view-base/view-base.js.ViewBase.callFunctionWithSuper', file:'file:///node_modules\tns-core-modules\ui\core\view-base\view-base.js:304:0
System.err:     Frame: function:'push.../node_modules/tns-core-modules/ui/core/view-base/view-base.js.ViewBase.callLoaded', file:'file:///node_modules\tns-core-modules\ui\core\view-base\view-base.js:311:0
System.err:     Frame: function:'push.../node_modules/tns-core-modules/ui/core/view-base/view-base.js.ViewBase.loadView', file:'file:///node_modules\tns-core-modules\ui\core\view-base\view-base.js:439:0
System.err:     Frame: function:'', file:'file:///node_modules\tns-core-modules\ui\core\view-base\view-base.js:233:0
System.err:     Frame: function:'push.../node_modules/tns-core-modules/ui/layouts/layout-base-common.js.LayoutBaseCommon.eachChildView', file:'file:///node_modules\tns-core-modules\ui\layouts\layout-base-common.js:125:0
System.err:     Frame: function:'push.../node_modules/tns-core-modules/ui/core/view/view-common.js.ViewCommon.eachChild', file:'file:///node_modules\tns-core-modules\ui\core\view\view-common.js:992:0
System.err:     Frame: function:'push.../node_modules/tns-core-modules/ui/core/view-base/view-base.js.ViewBase.onLoaded', file:'file:///node_modules\tns-core-modules\ui\core\view-base\view-base.js:232:0
System.err:     Frame: function:'push.../node_modules/tns-core-modules/ui/core/view/view.js.View.onLoaded', file:'file:///node_modules\tns-core-modules\ui\core\view\view.js:240:0
System.err:     Frame: function:'', file:'file:///node_modules\tns-core-modules\ui\core\view-base\view-base.js:311:75
System.err:     Frame: function:'push.../node_modules/tns-core-modules/ui/core/view-base/view-base.js.ViewBase.callFunctionWithSuper', file:'file:///node_modules\tns-core-modules\ui\core\view-base\view-base.js:304:0
System.err:     Frame: function:'push.../node_modules/tns-core-modules/ui/core/view-base/view-base.js.ViewBase.callLoaded', file:'file:///node_modules\tns-core-modules\ui\core\view-base\view-base.js:311:0
System.err:     Frame: function:'push.../node_modules/tns-core-modules/ui/core/view-base/view-base.js.ViewBase.loadView', file:'file:///node_modules\tns-core-modules\ui\core\view-base\view-base.js:439:0
System.err:     Frame: function:'', file:'file:///node_modules\tns-core-modules\ui\core\view-base\view-base.js:233:0
System.err:     Frame: function:'push.../node_modules/tns-core-modules/ui/layouts/layout-base-common.js.LayoutBaseCommon.eachChildView', file:'file:///node_modules\tns-core-modules\ui\layouts\layout-base-common.js:125:0
System.err:     Frame: function:'push.../node_modules/tns-core-modules/ui/core/view/view-common.js.ViewCommon.eachChild', file:'file:///node_modules\tns-core-modules\ui\core\view\view-common.js:992:0
System.err:     Frame: function:'push.../node_modules/tns-core-modules/ui/core/view-base/view-base.js.ViewBase.onLoaded', file:'file:///node_modules\tns-core-modules\ui\core\view-base\view-base.js:232:0
System.err:     Frame: function:'push.../node_modules/tns-core-modules/ui/core/view/view.js.View.onLoaded', file:'file:///node_modules\tns-core-modules\ui\core\view\view.js:240:0
System.err:     Frame: function:'', file:'file:///node_modules\tns-core-modules\ui\core\view-base\view-base.js:311:75
System.err:     Frame: function:'push.../node_modules/tns-core-modules/ui/core/view-base/view-base.js.ViewBase.callFunctionWithSuper', file:'file:///node_modules\tns-core-modules\ui\core\view-base\view-base.js:304:0
System.err:     Frame: function:'push.../node_modules/tns-core-modules/ui/core/view-base/view-base.js.ViewBase.callLoaded', file:'file:///node_modules\tns-core-modules\ui\core\view-base\view-base.js:311:0

Solution

  • I found that Nativescript 6.0 had introduced two new components which I believe are in beta testing. My project already had a custom component defined by the name of Tabs which conflicted with one of these and consequently caused the pages to crash. Changing the name of this component and its references throughout my project resolved the issue.