Closed dukewan closed 3 years ago
@dukewan i have some issues understanding here.
your package.json mentions the community version of the plugin (the one you should use). but you mention nativescript-canvas
as import. this would not work.
also there are 2 canvasview in your sample code. please could you try with one for now. and what s in your canvasTargetReady?
seems to me like you are trying to access the canvas when it does not exist.
Sorry, I copied the description from my previous issue which is NS6. But the NS7 version did throw this error after migration.
I also tried to comment out one of the CanvasView in my code and it still throws this error. I tried to comment both of them and no error throwed.
I think the error exists when CanvasView is initialized on page load, because I tried to comment out the event handlers and it did not help at all.
@dukewan I don't think this is the issue. I have 5 apps heavily using it. I can fix it if you can create a small repro example (no other plugin)
This is the repro demo: https://github.com/dukewan/canvas-repro Steps:
cd demo
ns debug android
While I was testing it, if two canvasview are used, the error always throws. If I comment out one of them, the error throws when entering the demo page for the second time. Seems to be related to navigation.
@dukewan seeing your code explains it all :D You cant use the canvas object outside of the draw
method!
This an android limitation.
If you want to do something on touch, then call invalidate and handle the change in the draw
method.
Sorry for the late reply, I don't think it's becuase of using the cavas object in the touch handler. I removed the touch handler and the error still exists: https://github.com/dukewan/canvas-repro/blob/main/demo/src/components/Test.vue
Also if we can't use the canvas object outside draw method, how do we call invalidate? As far as I know, this method only exists in canvas object.
I believe the error arised in the draw method of the second canvasview while initializing.
@dukewan there are 2 levels. the CanvasView (the one in your layout) on which you can call invalidate. And there is Canvas which you get from the draw event. it is Canvas you CANT store nore use outside the draw event. its existence is bound to the scope of the draw method. so touch => call invalidate on your CanvasView. in the next draw event draw on the Canvas with the touch data you for before
I played a bit with it some time ago and the issue is same if you try to call CanvasVue within a Vue component that is loaded to a page. I believe it's easily reproducible on latest ns vue + ns 7.3.0
@MattCCC i use Canvas a lot with Vue and have no issue. We need a reproducable sample to see what s wrong
Agree with @MattCCC , the issue is described clearly as "the issue is same if you try to call CanvasVue within a Vue component that is loaded to a page"
This issue got a fix? I'm having the same issue in ui-chart plugins
@Upd4ting please share how you use the canvas plugin
@farfromrefug using ui-chart plugin
Registering it in my main.ts file
import { install } from '@nativescript-community/ui-chart';
install();
Vue.registerElement('LineChart', () => require('@nativescript-community/ui-chart/charts').LineChart);
Then just placing that in my page
<LineChart ref="chart" width="100%" height="100%" backgroundColor="transparent" @loaded="onChartLoaded" />
That crash with "TypeError: Cannot read property 'Symbol(Symbol.toStringTag)' of undefined"
at rendering time
@Upd4ting ok so different! I need the full error with callstack
[Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'Symbol(Symbol.toStringTag)' of undefined"
JS:
JS: found in
JS:
JS: ---> <Stats> at app/pages/Stats.vue
JS: <Frame>
JS: <Root>
JS: discardedErrorEvent
JS: Error: Calling js method onCreateView failed
JS: TypeError: Cannot read property 'Symbol(Symbol.toStringTag)' of undefined
thats the only thing i got
@Upd4ting you dont have more? I would need to know where it actually fails. Another solutoin is for you to recreate it in a sample app with a chart. Could you try?
@farfromrefug is that better ?
System.err: An uncaught Exception occurred on "main" thread.
System.err: Calling js method onCreateView failed
System.err: TypeError: Cannot read property 'Symbol(Symbol.toStringTag)' of undefined
System.err:
System.err: StackTrace:
System.err: get(file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript-community\ui-canvas\canvas.android.js:121:0)
System.err: at isPlainObject$1(file: app\webpack:\harmopool-mobile-app\node_modules\nativescript-vue\dist\index.js:76:0)
System.err: at observe(file: app\webpack:\harmopool-mobile-app\node_modules\nativescript-vue\dist\index.js:992:0)
System.err: at defineReactive(file: app\webpack:\harmopool-mobile-app\node_modules\nativescript-vue\dist\index.js:1028:0)
System.err: at walk(file: app\webpack:\harmopool-mobile-app\node_modules\nativescript-vue\dist\index.js:940:0)
System.err: at Observer(file: app\webpack:\harmopool-mobile-app\node_modules\nativescript-vue\dist\index.js:928:0)
System.err: at observe(file: app\webpack:\harmopool-mobile-app\node_modules\nativescript-vue\dist\index.js:996:0)
System.err: at reactiveSetter(file: app\webpack:\harmopool-mobile-app\node_modules\nativescript-vue\dist\index.js:1062:0)
System.err: at proxySetter(file: app\webpack:\harmopool-mobile-app\node_modules\nativescript-vue\dist\index.js:2857:0)
System.err: at onChartLoaded(file: app\webpack:\harmopool-mobile-app\app\pages\Stats.vue:238:0)
System.err: at invokeWithErrorHandling(file: app\webpack:\harmopool-mobile-app\node_modules\nativescript-vue\dist\index.js:1862:0)
System.err: at invoker(file: app\webpack:\harmopool-mobile-app\node_modules\nativescript-vue\dist\index.js:2519:0)
System.err: at _handleEvent(file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\data\observable\index.js:233:0)
System.err: at notify(file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\data\observable\index.js:216:0)
System.err: at _emit(file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\data\observable\index.js:256:0)
System.err: at onLoaded(file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\core\view-base\index.js:240:0)
System.err: at onLoaded(file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\core\view\index.android.js:309:0)
System.err: at (file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\core\view-base\index.js:318:0)
System.err: at callFunctionWithSuper(file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\core\view-base\index.js:312:0)
System.err: at callLoaded(file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\core\view-base\index.js:318:0)
System.err: at loadView(file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\core\view-base\index.js:458:0)
System.err: at (file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\core\view-base\index.js:237:0)
System.err: at eachChildView(file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\layouts\layout-base-common.js:101:0)
System.err: at eachChild(file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\core\view\view-common.js:759:0)
System.err: at onLoaded(file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\core\view-base\index.js:236:0)
System.err: at onLoaded(file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\core\view\index.android.js:309:0)
System.err: at (file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\core\view-base\index.js:318:0)
System.err: at callFunctionWithSuper(file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\core\view-base\index.js:312:0)
System.err: at callLoaded(file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\core\view-base\index.js:318:0)
System.err: at loadView(file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\core\view-base\index.js:458:0)
System.err: at (file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\core\view-base\index.js:237:0)
System.err: at eachChildView(file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\layouts\layout-base-common.js:101:0)
System.err: at eachChild(file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\core\view\view-common.js:759:0)
System.err: at onLoaded(file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\core\view-base\index.js:236:0)
System.err: at onLoaded(file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\core\view\index.android.js:309:0)
System.err: at (file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\core\view-base\index.js:318:0)
System.err: at callFunctionWithSuper(file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\core\view-base\index.js:312:0)
System.err: at callLoaded(file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\core\view-base\index.js:318:0)
System.err: at loadView(file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\core\view-base\index.js:458:0)
System.err: at (file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\core\view-base\index.js:237:0)
System.err: at eachChildView(file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\layouts\layout-base-common.js:101:0)
System.err: at eachChild(file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\core\view\view-common.js:759:0)
System.err: at onLoaded(file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\core\view-base\index.js:236:0)
System.err: at onLoaded(file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\core\view\index.android.js:309:0)
System.err: at onLoaded(file: app\webpack:\harmopool-mobile-app\node_modules\nativescript-carousel\carousel.common.js:41:0)
System.err: at (file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\core\view-base\index.js:318:0)
System.err: at callFunctionWithSuper(file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\core\view-base\index.js:312:0)
System.err: at callLoaded(file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\core\view-base\index.js:318:0)
System.err: at loadView(file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\core\view-base\index.js:458:0)
System.err: at (file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\core\view-base\index.js:237:0)
System.err: at eachChildView(file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\layouts\layout-base-common.js:101:0)
System.err: at eachChild(file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\core\view\view-common.js:759:0)
System.err: at onLoaded(file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\core\view-base\index.js:236:0)
System.err: at onLoaded(file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\core\view\index.android.js:309:0)
System.err: at onLoaded(file: app\webpack:\harmopool-mobile-app\node_modules\nativescript-carousel\carousel.android.js:135:0)
System.err: at (file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\core\view-base\index.js:318:0)
System.err: at callFunctionWithSuper(file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\core\view-base\index.js:312:0)
System.err: at callLoaded(file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\core\view-base\index.js:318:0)
System.err: at loadView(file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\core\view-base\index.js:458:0)
System.err: at (file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\core\view-base\index.js:237:0)
System.err: at eachChildView(file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\layouts\layout-base-common.js:101:0)
System.err: at eachChild(file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\core\view\view-common.js:759:0)
System.err: at onLoaded(file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\core\view-base\index.js:236:0)
System.err: at onLoaded(file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\core\view\index.android.js:309:0)
System.err: at (file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\core\view-base\index.js:318:0)
System.err: at callFunctionWithSuper(file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\core\view-base\index.js:312:0)
System.err: at callLoaded(file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\core\view-base\index.js:318:0)
System.err: at loadView(file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\core\view-base\index.js:458:0)
System.err: at (file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\core\view-base\index.js:237:0)
System.err: at eachChildView(file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\content-view\index.js:65:0)
System.err: at eachChildView(file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\page\page-common.js:106:0)
System.err: at eachChild(file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\core\view\view-common.js:759:0)
System.err: at onLoaded(file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\core\view-base\index.js:236:0)
System.err: at onLoaded(file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\core\view\index.android.js:309:0)
System.err: at onLoaded(file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\page\index.android.js:38:0)
System.err: at (file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\core\view-base\index.js:318:0)
System.err: at callFunctionWithSuper(file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\core\view-base\index.js:312:0)
System.err: at callLoaded(file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\core\view-base\index.js:318:0)
System.err: at loadView(file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\core\view-base\index.js:458:0)
System.err: at _addViewCore(file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\core\view-base\index.js:453:0)
System.err: at _addView(file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\core\view-base\index.js:439:0)
System.err: at onCreateView(file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\frame\index.android.js:730:0)
System.err: at onCreateView(file: app\webpack:\harmopool-mobile-app\node_modules\@nativescript\core\ui\frame\fragment.android.js:25:0)
System.err: at com.tns.Runtime.callJSMethodNative(Native Method)
System.err: at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1302)
System.err: at com.tns.Runtime.callJSMethodImpl(Runtime.java:1188)
System.err: at com.tns.Runtime.callJSMethod(Runtime.java:1175)
System.err: at com.tns.Runtime.callJSMethod(Runtime.java:1153)
System.err: at com.tns.Runtime.callJSMethod(Runtime.java:1149)
System.err: at com.tns.FragmentClass.onCreateView(FragmentClass.java:55)
System.err: at androidx.fragment.app.Fragment.performCreateView(Fragment.java:2699)
System.err: at androidx.fragment.app.FragmentStateManager.createView(FragmentStateManager.java:320)
System.err: at androidx.fragment.app.FragmentManager.moveToState(FragmentManager.java:1199)
System.err: at androidx.fragment.app.FragmentManager.moveToState(FragmentManager.java:1368)
System.err: at androidx.fragment.app.FragmentManager.moveFragmentToExpectedState(FragmentManager.java:1446)
System.err: at androidx.fragment.app.FragmentManager.moveToState(FragmentManager.java:1509)
System.err: at androidx.fragment.app.BackStackRecord.executeOps(BackStackRecord.java:447)
System.err: at androidx.fragment.app.FragmentManager.executeOps(FragmentManager.java:2181)
System.err: at androidx.fragment.app.FragmentManager.executeOpsTogether(FragmentManager.java:2004)
System.err: at androidx.fragment.app.FragmentManager.removeRedundantOperationsAndExecute(FragmentManager.java:1959)
System.err: at androidx.fragment.app.FragmentManager.execPendingActions(FragmentManager.java:1861)
System.err: at androidx.fragment.app.FragmentManager$4.run(FragmentManager.java:413)
System.err: at android.os.Handler.handleCallback(Handler.java:938)
System.err: at android.os.Handler.dispatchMessage(Handler.java:99)
System.err: at android.os.Looper.loop(Looper.java:223)
System.err: at android.app.ActivityThread.main(ActivityThread.java:7656)
System.err: at java.lang.reflect.Method.invoke(Native Method)
System.err: at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:592)
System.err: at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:947)
JS: uncaughtErrorEvent
JS: Error: Calling js method onCreateView failed
JS: TypeError: Cannot read property 'Symbol(Symbol.toStringTag)' of undefined
System.err: com.tns.NativeScriptException: Error: Calling js method onCreateView failed
System.err: TypeError: Cannot read property 'Symbol(Symbol.toStringTag)' of undefined
System.err: at com.tns.Runtime.passExceptionToJsNative(Native Method)
System.err: at com.tns.Runtime.passUncaughtExceptionToJs(Runtime.java:84)
System.err: at com.tns.NativeScriptUncaughtExceptionHandler.uncaughtException(NativeScriptUncaughtExceptionHandler.java:34)
System.err: at java.lang.ThreadGroup.uncaughtException(ThreadGroup.java:1073)
System.err: at java.lang.ThreadGroup.uncaughtException(ThreadGroup.java:1068)
System.err: at java.lang.Thread.dispatchUncaughtException(Thread.java:2203)
@Upd4ting much better!!!! what s your version of the chart plugin and the canvas plugin? (look in node_modules and the package.json files)
ui-chart 1.1.42 not having ui-canvas in my package.json as its installed in depency of ui-chart
but you have it in node_modules. PLease give me the version
4.1.2
@Upd4ting please add the canvas plugin to your package.json and ensure you have version 4.1.3
. Let me know if it fixes the issue
@farfromrefug seems to work, thanks!
@Upd4ting awesome!
Make sure to check the demo app(s) for sample usage
Done.
Make sure to check the existing issues in this repository
Done.
If the demo apps cannot help and there is no issue for your problem, tell us about it
Please, ensure your title is less than 63 characters long and starts with a capital letter.
Which platform(s) does your issue occur on?
Please, provide the following version numbers that your issue occurs with:
Please, tell us how to recreate the issue in as much detail as possible.
Describe the steps to reproduce it.
The error
TypeError: Cannot read property 'Symbol(Symbol.toStringTag)' of undefined
arises whenever I useCanvasView
on android device. It happens while initialization.More details:
Is there any code involved?
I use nativescript-vue:
Basically when CanvasView is used the error arises so it errors out when initializing.