ui-canvas icon indicating copy to clipboard operation
ui-canvas copied to clipboard
verified publisher icon nativescript-community

ReferenceError: Cannot access 'CanvasBase' before initialization

Open Julien-R44 opened this issue 4 years ago • 2 comments

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?

  • Android API Q Emulator

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

  • CLI: 8.0.1
  • Cross-platform modules: @nativescript/core/package.json:version -> 8.0.11
  • Runtime(s): "@nativescript/android": "8.0.0" @nativescript-community/ui-canvas": "^4.2.13" @nativescript/core": "~8.0.8" "nativescript-vue": "^2.9.0",

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 avatar Nov 26 '21 02:11 Julien-R44

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 😅

Julien-R44 avatar Nov 26 '21 02:11 Julien-R44

@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

farfromrefug avatar Nov 26 '21 08:11 farfromrefug