[NativeScript 6.0.0 migration] Error when livesync executed

[VladimirAmiorkov]

Hi,

We are testing the next version of nativescript-vue and the webpack tag of NativeScript in preparation for 6.0.0. When changing running an app on ios tns run ios with the following setup the below exception is thrown after you make changes to the app and it is livesynced.

Setup:

1. Install webpack tag of NativeScript globally: npm i -g nativescript@webpack
   2.Install webpack tag of nativescript-dev-webpack : npm i nativescript-dev-webpack@webpack
2. Install next tag of nativescript-vue : npm i nativescript-vue@next
3. Run an the app on iOS: tns run ios
4. App is synced and started correctly
5. Make a change to the source of the app to trigger livesync
6. Changes are synced, app is restarted and when it start it crashes

mcsofamiorkov:demo-vue amiorkov$ tns run ios
Searching for devices...
Preparing project...
Found peer TypeScript 3.4.5
Bundling application for entryPath ./main...
File change detected. Starting incremental webpack compilation...

webpack is watching the files…

Hash: 9b9444bead59215a9361
Version: webpack 4.27.1
Time: 27920ms
Built at: 11/06/2019 16:39:37
Asset Size Chunks Chunk Names
bundle.js 503 KiB bundle [emitted] bundle
package.json 255 bytes [emitted]
runtime.js 71.4 KiB runtime [emitted] runtime
tns_modules/tns-core-modules/inspector_modules.js 763 bytes tns_modules/tns-core-modules/inspector_modules [emitted] tns_modules/tns-core-modules/inspector_modules
vendor.js 6.65 MiB vendor [emitted] vendor
Entrypoint bundle = runtime.js vendor.js bundle.js
Entrypoint tns_modules/tns-core-modules/inspector_modules = runtime.js vendor.js tns_modules/tns-core-modules/inspector_modules.js
[../../src/ui-listview.ts] /Users/amiorkov/Desktop/Work/nativescript-ui-listview/src/ui-listview.ts 84.8 KiB {bundle} [built]
[../../src/vue/component.ts] /Users/amiorkov/Desktop/Work/nativescript-ui-listview/src/vue/component.ts 9.6 KiB {bundle} [built]
[../../src/vue/index.ts] /Users/amiorkov/Desktop/Work/nativescript-ui-listview/src/vue/index.ts 893 bytes {bundle} [built]
[./ sync ^./app.(css|scss|less|sass)$] . sync nonrecursive ^./app.(css|scss|less|sass)$ 174 bytes {bundle} [built]
[./ sync recursive (root|page).(xml|css|js|ts|scss)$] . sync (root|page).(xml|css|js|ts|scss)$ 160 bytes {bundle} [built]
[./examples/FirstVisibleIndex.ts] 1.5 KiB {bundle} [built]
[./examples/GettingStarted.ts] 1.4 KiB {bundle} [built]
[./examples/GettingStartedHo.ts] 1.37 KiB {bundle} [built]
[./examples/GridLayout.ts] 1.43 KiB {bundle} [built]
[./examples/Group.ts] 1.47 KiB {bundle} [built]
[./examples/GroupScrollTo.ts] 2.16 KiB {bundle} [built]
[./examples/GroupWithHeaderFooter.ts] 2.43 KiB {bundle} [built]
[./examples/index.ts] 1.67 KiB {bundle} [built]
[./main.ts] 1.77 KiB {bundle} [built]
[./views/index.ts] 140 bytes {bundle} [built]
+ 181 hidden modules
Webpack compilation complete. Watching for file changes.
Webpack build done!
Project successfully prepared (ios)
Successfully transferred bundle.js on device CA4FE147-D326-444F-96CD-7F74BC5D2AA6.
Successfully transferred package.json on device CA4FE147-D326-444F-96CD-7F74BC5D2AA6.
Successfully transferred runtime.js on device CA4FE147-D326-444F-96CD-7F74BC5D2AA6.
Successfully transferred tns_modules on device CA4FE147-D326-444F-96CD-7F74BC5D2AA6.
Successfully transferred tns-core-modules on device CA4FE147-D326-444F-96CD-7F74BC5D2AA6.
Successfully transferred inspector_modules.js on device CA4FE147-D326-444F-96CD-7F74BC5D2AA6.
Successfully transferred vendor.js on device CA4FE147-D326-444F-96CD-7F74BC5D2AA6.
Restarting application on device CA4FE147-D326-444F-96CD-7F74BC5D2AA6...
Successfully synced application org.nativescript.demovueradlistview on device CA4FE147-D326-444F-96CD-7F74BC5D2AA6.
CONSOLE INFO file:///app/vendor.js:135:32: HMR: Hot Module Replacement Enabled. Waiting for signal.
CONSOLE LOG file:///app/vendor.js:10585:14: 'NativeScript-Vue has "Vue.config.silent" set to true, to see output logs set it to false.'
File change detected. Starting incremental webpack compilation...
Hash: 5d763912313423b56751
Version: webpack 4.27.1
Time: 4240ms
Built at: 11/06/2019 16:40:49
Asset Size Chunks Chunk Names
9b9444bead59215a9361.hot-update.json 48 bytes [emitted]
bundle.9b9444bead59215a9361.hot-update.js 224 KiB bundle [emitted] bundle
bundle.js 503 KiB bundle [emitted] bundle
runtime.js 71.4 KiB runtime [emitted] runtime
tns_modules/tns-core-modules/inspector_modules.js 763 bytes tns_modules/tns-core-modules/inspector_modules [emitted] tns_modules/tns-core-modules/inspector_modules

• 1 hidden asset
  Entrypoint bundle = runtime.js vendor.js bundle.js bundle.9b9444bead59215a9361.hot-update.js
  Entrypoint tns_modules/tns-core-modules/inspector_modules = runtime.js vendor.js tns_modules/tns-core-modules/inspector_modules.js
  [../../src/ui-listview.ts] /Users/amiorkov/Desktop/Work/nativescript-ui-listview/src/ui-listview.ts 84.8 KiB {bundle} [built]
  [./ sync ^./app.(css|scss|less|sass)$] . sync nonrecursive ^./app.(css|scss|less|sass)$ 174 bytes {bundle} [built]
  [./ sync recursive (root|page).(xml|css|js|ts|scss)$] . sync (root|page).(xml|css|js|ts|scss)$ 160 bytes {bundle} [built]
  [./examples/FirstVisibleIndex.ts] 1.5 KiB {bundle} [built]
  [./examples/index.ts] 1.67 KiB {bundle} [built]
  • 191 hidden modules
    Webpack compilation complete. Watching for file changes.
    Webpack build done!
    Successfully transferred bundle.9b9444bead59215a9361.hot-update.js on device CA4FE147-D326-444F-96CD-7F74BC5D2AA6.
    Successfully transferred 9b9444bead59215a9361.hot-update.json on device CA4FE147-D326-444F-96CD-7F74BC5D2AA6.
    NativeScript debugger has opened inspector socket on port 50328 for org.nativescript.demovueradlistview.
    Refreshing application on device CA4FE147-D326-444F-96CD-7F74BC5D2AA6...
    CONSOLE LOG file:///app/vendor.js:23864:12: 'Loading inspector modules...'
    CONSOLE LOG file:///app/vendor.js:23874:12: 'Finished loading inspector modules.'
    NativeScript debugger attached.
    CONSOLE INFO file:///app/vendor.js:135:32: HMR: Checking for updates to the bundle with hmr hash 9b9444bead59215a9361.
    CONSOLE WARN file:///app/vendor.js:136:32: HMR: Ignored an update to unaccepted module:
    CONSOLE WARN file:///app/vendor.js:136:32: HMR: ➭ ../../src/ui-listview.ts
    CONSOLE WARN file:///app/vendor.js:136:32: HMR: ➭ ../../src/vue/index.ts
    CONSOLE WARN file:///app/vendor.js:136:32: HMR: ➭ ./main.ts
    CONSOLE ERROR file:///app/vendor.js:137:34: HMR: Cannot apply update with hmr hash 9b9444bead59215a9361.
    CONSOLE ERROR file:///app/vendor.js:137:34: HMR: Aborted because ../../src/ui-listview.ts is not accepted
    Update propagation: ../../src/ui-listview.ts -> ../../src/vue/index.ts -> ./main.ts
    Restarting application on device CA4FE147-D326-444F-96CD-7F74BC5D2AA6...
    NativeScript debugger detached.
    Successfully synced application org.nativescript.demovueradlistview on device CA4FE147-D326-444F-96CD-7F74BC5D2AA6.
    CONSOLE INFO file:///app/vendor.js:135:32: HMR: Hot Module Replacement Enabled. Waiting for signal.
    CONSOLE INFO file:///app/vendor.js:135:32: HMR: Checking for updates to the bundle with hmr hash 9b9444bead59215a9361.
    CONSOLE WARN file:///app/vendor.js:136:32: HMR: Ignored an update to unaccepted module:
    CONSOLE WARN file:///app/vendor.js:136:32: HMR: ➭ ../../src/ui-listview.ts
    CONSOLE WARN file:///app/vendor.js:136:32: HMR: ➭ ../../src/vue/index.ts
    CONSOLE WARN file:///app/vendor.js:136:32: HMR: ➭ ./main.ts
    CONSOLE ERROR file:///app/vendor.js:137:34: HMR: Cannot apply update with hmr hash 9b9444bead59215a9361.
    CONSOLE ERROR file:///app/vendor.js:137:34: HMR: Aborted because ../../src/ui-listview.ts is not accepted
    Update propagation: ../../src/ui-listview.ts -> ../../src/vue/index.ts -> ./main.ts
    CONSOLE LOG file:///app/vendor.js:10585:14: 'NativeScript-Vue has "Vue.config.silent" set to true, to see output logs set it to false.'
    ***** Fatal JavaScript exception - application has been terminated. *****
    Native stack trace:
    1 0x10d7a9cdf NativeScript::reportFatalErrorBeforeShutdown(JSC::ExecState*, JSC::Exception*, bool)
    2 0x10d7dfee0 NativeScript::FFICallbackNativeScript::ObjCMethodCallback::ffiClosureCallback(ffi_cif*, void*, void**, void*)
    3 0x10e104956 ffi_closure_unix64_inner
    4 0x10e10537a ffi_closure_unix64
    5 0x1109d0a6f _CFXRegistrationPost
    6 0x1109d07b3 ___CFXNotificationPost_block_invoke
    7 0x110ab45e2 -[_CFXNotificationRegistrar find:object:observer:enumerator:]
    8 0x1109d0101 _CFXNotificationPost
    9 0x10e8fbeaf -[NSNotificationCenter postNotificationName:object:userInfo:]
    10 0x111ecefab -[UIApplication _callInitializationDelegatesForMainScene:transitionContext:]
    11 0x111ed40c6 -[UIApplication _runWithMainScene:transitionContext:completion:]
    12 0x1117196d6 __111-[__UICanvasLifecycleMonitor_Compatability _scheduleFirstCommitForScene:transition:firstActivation:completion:]_block_invoke
    13 0x111721fce +[_UICanvas _enqueuePostSettingUpdateTransactionBlock:]
    14 0x1117192ec -[__UICanvasLifecycleMonitor_Compatability _scheduleFirstCommitForScene:transition:firstActivation:completion:]
    15 0x111719c48 -[__UICanvasLifecycleMonitor_Compatability activateEventsOnly:withContext:completion:]
    16 0x111717fba __82-[_UIApplicationCanvas _transitionLifecycleStateWithTransitionContext:completion:]_block_invoke
    17 0x111717c71 -[_UIApplicationCanvas _transitionLifecycleStateWithTransitionContext:completion:]
    18 0x11171c9b6 __125-[_UICanvasLifecycleSettingsDiffAction performActionsForCanvas:withUpdatedScene:settingsDiff:fromSettings:transitionContext:]_block_invoke
    19 0x11171d610 _performActionsWithDelayForTransitionContext
    20 0x11171c71d -[_UICanvasLifecycleSettingsDiffAction performActionsForCanvas:withUpdatedScene:settingsDiff:fromSettings:transitionContext:]
    21 0x1117216d0 -[_UICanvas scene:didUpdateWithDiff:transitionContext:completion:]
    22 0x111ed29a8 -[UIApplication workspace:didCreateScene:withTransitionContext:completion:]
    23 0x111a89dfa -[UIApplicationSceneClientAgent scene:didInitializeWithEvent:completion:]
    24 0x11ab25125 -[FBSSceneImpl _didCreateWithTransitionContext:completion:]
    25 0x11ab2eed6 __56-[FBSWorkspace client:handleCreateScene:withCompletion:]_block_invoke_2
    26 0x11ab2e700 __40-[FBSWorkspace _performDelegateCallOut:]_block_invoke
    27 0x110fd5d02 _dispatch_client_callout
    28 0x110fd8d41 _dispatch_block_invoke_direct
    29 0x11ab60146 FBSSERIALQUEUE_IS_CALLING_OUT_TO_A_BLOCK
    30 0x11ab5fdfe -[FBSSerialQueue _performNext]
    31 0x11ab60393 -[FBSSerialQueue _performNextFromRunLoopSource]
    JavaScript stack trace:
    1 getFrameInstance@file:///app/vendor.js:9248:24
    2 mounted@file:///app/vendor.js:9354:31
    3 invokeWithErrorHandling@file:///app/vendor.js:3871:61
    4 callHook@file:///app/vendor.js:7083:30
    5 insert@file:///app/vendor.js:6015:15
    6 invokeInsertHook@file:///app/vendor.js:7674:34
    7 patch@file:///app/vendor.js:7899:21
    8 _update@file:///app/vendor.js:6800:28
    9 updateComponent@file:///app/vendor.js:6929:17
    10 get@file:///app/vendor.js:4373:29
    11 Watcher@file:///app/vendor.js:4360:48
    12 mountComponent@file:///app/vendor.js:6936:14
    13 @file:///app/vendor.js:14449:16
    14 notify@file:///app/vendor.js:19045:23
    15 @[native code]
    16 notifyAppStarted@file:///app/vendor.js:15149:32
    17 didFinishLaunchingWithOptions@file:///app/vendor.js:15140:26
    18 @[native code]
    19 onReceive@file:///app/vendor.js:15012:28
    20 UIApplicationMain@[native code]
    21 _start@file:///app/vendor.js:15335:22
    22 run@file:///app/vendor.js:15377:9
    23 $start@file:///app/vendor.js:14452:18
    24 @file:///app/bundle.js:4426:<…>
    JavaScript error:
    file:///app/vendor.js:9248:24: JS ERROR TypeError: undefined is not an object (evaluating 'frame.id')

[VladimirAmiorkov]

Also additional issue that I am facing is with debugging inside VS code, breakpoint placed in .ts files are not hit. For example:

import { getItemList } from '../data';
import * as frameModule from "tns-core-modules/ui/frame";
import { RadListView } from 'nativescript-ui-listview';

const description = 'Get first visible index';
export default {
  name: 'FirstVisibleIndex',
  description: description,
  template: `
  <Page>
    <ActionBar :title="title">
      <NavigationButton text="Back" android.systemIcon="ic_menu_back" @tap="onNavigationButtonTap"></NavigationButton>
    </ActionBar>
    <GridLayout rows="auto, auto, *">
      <Label margin="10" :text="'First visible item: ' + firstVisibleIndex"></Label>
      <Button margin="10" row="1" text="Get first visible" @tap="getFirstVisiblePosition"></Button>
      <RadListView ref="listView"
                    row="2"
                    for="item in itemList">
        <v-template>
          <StackLayout class="item" orientation="vertical">
            <Label :text="item.name" class="nameLabel"></Label>
            <Label :text="item.description" class="descriptionLabel"></Label>
          </StackLayout>
        </v-template>
      </RadListView>
    </GridLayout>
  </Page>
  `,
  data() {
    return {
      title: description,
      itemList: getItemList(100),
      firstVisibleIndex: 0
    };
  },
  methods: {
    getFirstVisiblePosition() {
     // BREAKPOINT here not hit
      let listView = this.$refs.listView.nativeElement as RadListView;
      this.firstVisibleIndex = listView.getFirstVisiblePosition();
      console.log("First visible index:", this.firstVisibleIndex);
    },
    onNavigationButtonTap() {
      frameModule.topmost().goBack();
    }
  }
};

[msaelices]

@VladimirAmiorkov I've just reproduced your error. I will try to fix it in the next days.

[jjstrat3]

We're experiencing a very similar issue with HMR after having upgraded to NS 5.4.2 and NS-Vue 2.2.2:

CONSOLE ERROR file:///app/vendor.js:63710:20: [Vue warn]: Error in mounted hook: "TypeError: undefined is not an object (evaluating 'frame$$1.id')"

Not sure if the fixes associated with issue would solve the problem for us?

[andykov]

Also got this error in versions:
"nativescript-vue": "~ 2.2.0",
"tns-core-modules": "~ 5.4.0"

I don’t want to upgrade to version 6, because plugins will stop working.

[vpiskunov]

Same issue here, random times just get JS ERROR TypeError: undefined is not an object (evaluating 'frame$$1.id') - any workarounds please??

[msaelices]

@VladimirAmiorkov Re-tested this issue and it's working (not crashing). BTW, there is still the related #518 issue with I think is related to the NS code as it fails both with the Vue and Angular bindings.

[VladimirAmiorkov]

Hi @msaelices ,

Great. Did you link the correct issue, as far as I see the #518 issue is a HRM issue?

[msaelices]

@VladimirAmiorkov I mean that the app is not crashing anymore but I can see the HMR: Aborted because ./main.ts is not accepted when I change any code in the app.

[ilsorliamsi]

@VladimirAmiorkov I mean that the app is not crashing anymore but I can see the HMR: Aborted because ./main.ts is not accepted when I change any code in the app.

I fixed this issue by creating nsconfig.js in my root project directory and set useLegacyWorkflow to false.

[UsmanJavedAttari]

@ilsorliamsi I got LOG from device: HMR: Cannot apply update. A previous update aborted. Application needs to be restarted in order to apply the changes.

[varisvitols]

@VladimirAmiorkov I mean that the app is not crashing anymore but I can see the HMR: Aborted because ./main.ts is not accepted when I change any code in the app.

I fixed this issue by creating nsconfig.js in my root project directory and set useLegacyWorkflow to false.

@ilsorliamsi,
I tried to do the same after your recommendation, but it didn't help.
I fixed it temporarily by renaming main.ts to main.js. This is with a fresh install with tns 6.2.2, vue-cli 4.1.1, although my package.json is using version 6.0.0 for emulators.

[fgutteridge]

Any updates here? This issue is still present in NS-Vue v2.4.0, NS v6.3.

[kabaluyot]

still got this error. Any updates?

[rfink]

Same, got error

[adeyemiadetayoccl]

Any update on this issue ?

[rigor789]

@rfink @adeyemiadetayoccl Would you be able to share a project that has issues? Everything seems to be working fine in our apps!

[kabaluyot]

@rigor789 you can try this starter template of mine (https://github.com/Lyduz/nitibo). Thus project utilizes natuvescript-vue with class component (typescript)

[kabaluyot]

HMR is not working, its restarting the app when you apply changes in vue files

[rigor789]

@kabaluyot cloned the repo - updated the dependencies as it was still using nativescript 6.4. Your tsconfig must set "noEmitHelpers": true, because NativeScript implements it's own __decorate and __extends functions that can hook into native classes etc.

(You seem to have based your template on an older version - there are many dependencies that are either not used, or not required anymore as they have been added as transitive dependencies to nativescript-dev-webpack.)

After the updates - I ran the app, and HMR is working fine - the first update does restart the app - i'm pretty sure that's because of how you import/export classes in some ts modules. Subsequent updates work fine without a reload - and I don't see any errors in console.

Keep in mind that template/style changes are usually picked up fine by HMR - logic/script changes need to re-create the whole component and that's not always possible.

I personally use the --no-hmr flag when working on the script part, and only use HMR when I'm styling the app. It's much more reliable that way.

This is what hmr looks on my end - I don't see anything wrong with it, can you confirm if this looks correct - or have I missed something?
2020-05-10_13-12-59.zip

[kabaluyot]

Video looks good. Can you please share the "updated and fixed" version of my starter template? I'll just wanna use it for reference and try in my end sir @rigor789

[rigor789]

Sure, here are all the changes that I made to make it work

A diff of the changes I made

diff --git a/package.json b/package.json
index c4a3bdf..3575594 100644
--- a/package.json
+++ b/package.json
@@ -6,12 +6,11 @@
   "license": "MIT",
   "nativescript": {
     "id": "com.xtalintegrated.karl",
-    "templateVersion": "v2",
     "tns-ios": {
-      "version": "6.4.0"
+      "version": "6.5.0"
     },
     "tns-android": {
-      "version": "6.4.1"
+      "version": "6.5.0"
     }
   },
   "scripts": {
@@ -26,7 +25,7 @@
     "@vue/devtools": "^5.3.3",
     "axios": "^0.19.2",
     "babel-core": "^6.26.3",
-    "babel-loader": "^7.1.1",
+    "babel-loader": "^8.1.0",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-env": "^1.7.0",
     "eslint-config-prettier": "^6.10.1",
@@ -35,40 +34,40 @@
     "lodash": "^4.17.15",
     "nativescript-socketio": "^3.3.1",
     "nativescript-toasty": "^3.0.0-alpha.2",
-    "nativescript-vue": "^2.4.0",
+    "nativescript-vue": "^2.6.1",
     "nativescript-vue-devtools": "^1.2.0",
-    "nativescript-vue-navigator": "^0.2.0",
+    "nativescript-vue-navigator": "^1.2.0",
     "net": "^1.0.2",
     "prettier": "^2.0.4",
-    "terser-webpack-plugin": "^2.3.5",
-    "tns-core-modules": "~6.4.0",
+    "terser-webpack-plugin": "^3.0.1",
+    "tns-core-modules": "~6.5.1",
     "tslib": "^1.11.0",
-    "vue-property-decorator": "^7.3.0",
+    "vue-property-decorator": "^8.4.2",
     "vuex": "^3.1.2",
     "vuex-class": "^0.3.2"
   },
   "devDependencies": {
-    "@types/node": "^10.17.16",
+    "@types/node": "^13.13.5",
     "@typescript-eslint/eslint-plugin": "^2.27.0",
     "@typescript-eslint/parser": "^2.27.0",
     "babel-traverse": "6.26.0",
     "babel-types": "6.26.0",
     "babylon": "6.18.0",
     "clean-webpack-plugin": "^1.0.1",
-    "copy-webpack-plugin": "^4.5.2",
-    "css-loader": "^1.0.0",
-    "eslint": "^6.8.0",
+    "copy-webpack-plugin": "^5.1.1",
+    "css-loader": "^3.5.3",
+    "eslint": "^7.0.0",
     "eslint-plugin-vue": "^7.0.0-alpha.0",
     "lazy": "1.0.11",
-    "mini-css-extract-plugin": "^0.4.5",
+    "mini-css-extract-plugin": "^0.9.0",
     "nativescript-dev-webpack": "~1.5.0",
-    "nativescript-vue-template-compiler": "^2.4.0",
-    "nativescript-worker-loader": "^0.9.5",
+    "nativescript-vue-template-compiler": "^2.6.1",
+    "nativescript-worker-loader": "^0.11.0",
     "node-sass": "^4.13.1",
-    "sass-loader": "^7.3.1",
-    "ts-loader": "^5.4.5",
+    "sass-loader": "^8.0.2",
+    "ts-loader": "^7.0.3",
     "typescript": "^3.8.2",
-    "uglifyjs-webpack-plugin": "~2.0.1",
+    "uglifyjs-webpack-plugin": "~2.2.0",
     "vue": "^2.6.11",
     "vue-loader": "^15.9.0",
     "webpack": "^4.41.6",
diff --git a/tsconfig.json b/tsconfig.json
index 2417668..854a1be 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -5,7 +5,7 @@
     "strict": true,
     "strictPropertyInitialization": true,
     "jsx": "preserve",
-    "importHelpers": true,
+    "noEmitHelpers": true,
     "moduleResolution": "node",
     "experimentalDecorators": true,
     "allowJs": false,

A few packages could be removed all-together, but I didn't remove them... Seems to work fine this way.

[kabaluyot]

@rigor789 thank you so much sir. I followed the diff changes and updated some packages. HMR doesn't kick off at first time as you expected but works well consequently. We have the same error with this current issue thread, maybe the fix you mentioned would work here.

[gravataLonga]

Hello sorry about hijacking this threat, got some behavior that i think may be is related to this, when i change markup for example <Label :text="myData"></Lable> to <Label text="Hello World"></Lable> change is not reflected to my ios simulator, anyone know anything about this issue?