search

nativescript-community / ui-canvas

Implement Canvas into your NativeScript apps.
https://nativescript-community.github.io/ui-canvas/
Apache License 2.0
31 stars 9 forks source link

ReferenceError: Cannot access 'CanvasBase' before initialization #39

Open Julien-R44 opened 2 years ago

Julien-R44 commented 2 years ago

Thanks for this great lib. I was able to use it for an hour, everything worked perfectly. Then I tried a rebuild after an ns clean, and it doesn't work anymore and I don't really understand why since I doesn't changed anything since my last builds. Here is the error I get when I launch my application on the android emulator: ReferenceError: Cannot access 'CanvasBase' before initialization

System.err: Unable to create application com.tns.NativeScriptApplication: com.tns.NativeScriptException: Error calling module function 
System.err: ReferenceError: Cannot access 'CanvasBase' before initialization
System.err: File: (file:///data/data/my.app/files/app/vendor.js:700:58)
System.err:
System.err: StackTrace:
System.err: CanvasBase(file:///data/data/my.app/files/app/vendor.js:700:59)
System.err:     at ./node_modules/@nativescript-community/ui-canvas/canvas.android.js(file: app\webpack:\myapp\node_modules\@nativescript-community\ui-canvas\canvas.android.js:476:42)
System.err:     at __webpack_require__(file: app\webpack:\myapp\webpack\bootstrap:19:0)
System.err:     at ./node_modules/@nativescript-community/ui-canvas/canvas.common.js(file:///data/data/my.app/files/app/vendor.js:710:65)
System.err:     at __webpack_require__(file: app\webpack:\myapp\webpack\bootstrap:19:0)
System.err:     at ./node_modules/@nativescript/webpack/dist/loaders/nativescript-worker-loader/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./app/components/pages/home/CircularGauge.vue?vue&type=script&lang=js&(file:///data/data/my.app/files/app/bundle.js:4006:91)
System.err:     at __webpack_require__(file: app\webpack:\myapp\webpack\bootstrap:19:0)
System.err:     at ./app/components/pages/home/CircularGauge.vue?vue&type=script&lang=js&(file:///data/data/my.app/files/app/bundle.js:5994:240)
System.err:     at __webpack_require__(file: app\webpack:\myapp\webpack\bootstrap:19:0)
System.err:     at ./app/components/pages/home/CircularGauge.vue(file:///data/data/my.app/files/app/bundle.js:5459:101)
System.err:     at __webpack_require__(file: app\webpack:\myapp\webpack\bootstrap:19:0)
System.err:     at ./node_modules/@nativescript/webpack/dist/loaders/nativescript-worker-loader/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./app/components/pages/home/HomeCard.vue?vue&type=script&lang=js&(file:///data/data/my.app/files/app/bundle.js:4157:72)
System.err:     at __webpack_require__(file: app\webpack:\myapp\webpack\bootstrap:19:0)
System.err:     at ./app/components/pages/home/HomeCard.vue?vue&type=script&lang=js&(file:///data/data/my.app/files/app/bundle.js:6007:235)
System.err:     at __webpack_require__(file: app\webpack:\myapp\webpack\bootstrap:19:0)
System.err:     at ./app/components/pages/home/HomeCard.vue(file:///data/data/my.app/files/app/bundle.js:5498:96)
System.err:     at __webpack_require__(file: app\webpack:\myapp\webpack\bootstrap:19:0)
System.err:     at ./node_modules/@nativescript/webpack/dist/loaders/nativescript-worker-loader/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./app/components/pages/Home.vue?vue&type=script&lang=js&(file:///data/data/my.app/files/app/bundle.js:1841:89)
System.err:     at __webpack_require__(file: app\webpack:\myapp\webpack\bootstrap:19:0)
System.err:     at ./app/components/pages/Home.vue?vue&type=script&lang=js&(file:///data/data/my.app/files/app/bundle.js:5760:231)
System.err:     at __webpack_require__(file: app\webpack:\myapp\webpack\bootstrap:19:0)
System.err:     at ./app/components/pages/Home.vue(file:///data/data/my.app/files/app/bundle.js:4847:92)
System.err:     at __webpack_require__(file: app\webpack:\myapp\webpack\bootstrap:19:0)
System.err:     at ./node_modules/@nativescript/webpack/dist/loaders/nativescript-worker-loader/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./app/components/pages/App.vue?vue&type=script&lang=js&(file:///data/data/my.app/files/app/bundle.js:1806:67)
System.err:     at __webpack_require__(file: app\webpack:\myapp\webpack\bootstrap:19:0)
System.err:     at ./app/components/pages/App.vue?vue&type=script&lang=js&(file:///data/data/my.app/files/app/bundle.js:5747:230)
System.err:     at __webpack_require__(file: app\webpack:\myapp\webpack\bootstrap:19:0)
System.err:     at ./app/components/pages/App.vue(file:///data/data/my.app/files/app/bundle.js:4813:91)
System.err:     at __webpack_require__(file: app\webpack:\myapp\webpack\bootstrap:19:0)
System.err:     at ./app/main.js(file:///data/data/my.app/files/app/bundle.js:19:79)
System.err:     at __webpack_require__(file: app\webpack:\myapp\webpack\bootstrap:19:0)
System.err:     at __webpack_exec__(file:///data/data/my.app/files/app/bundle.js:9318:39)
System.err:     at (file:///data/data/my.app/files/app/bundle.js:9319:221)
System.err:     at __webpack_require__.X(file: app\webpack:\myapp\webpack\runtime\startup entrypoint:6:0)
System.err:     at (file:///data/data/my.app/files/app/bundle.js:9319:47)
System.err:     at (file:///data/data/my.app/files/app/bundle.js:9324:3)
System.err:     at require(:1:266)

Here the import line that cause the error : 

import { Paint, Cap, createRectF, Style } from '@nativescript-community/ui-canvas'

If I remove the createRectF, the error disappears and the application runs. I tried to replace createRectF by createRect but the error still occurs.

Which platform(s) does your issue occur on?

Please, provide the following version numbers that your issue occurs with:

If you have no idea where it can come from I will try tomorrow to create a repo with where the error is reproducible but I'm not even sure I can do it because the error appeared when I did not change anything in the code. It seems to be more of a configuration/build problem on my side. I tried to reclone my project, and rebuild it from scratch but it's still the same. However, I'm a bit stuck because I have no way to make this error disappear.

Julien-R44 commented 2 years ago

Ok sorry I found where the problem came from I may have opened the issue a little too quickly though it is not in my habits, here is the solution:

This code causes the error :

draw({ canvas }) {
  // const paint = new Paint()
  const rect = createRectF(0, 0, 10, 10)
},

This code resolve the error : 

draw({ canvas }) {
  const paint = new Paint()
  const rect = createRectF(0, 0, 10, 10)
},

So basically you just have to create an instance of Paint before doing anything if I understand correctly. Is this a normal behavior? I was sure I didn't modify any code but finally I did, sorry! At least this issue will serve the next person who makes the same mistake as me 😅

farfromrefug commented 2 years ago

@Julien-R44 dont be sorry you found an issue. It means i have a circular import dependency somewhere in the lib. Thanks you for investigating! Use your trick for now, i will find and fix the issue