nativescript-rtl / ui

Add right-to-left support to the NativeScript framework
MIT License
24 stars 3 forks source link

NativeScript-Vue app crashes #21

Closed vishnuraghavb closed 3 years ago

vishnuraghavb commented 3 years ago

Hi, First of all, thanks for this plug-in! I've noticed that it has some issues with NativeScript-Vue. It doesn't let the app start.

Here is my package.json

{
...
  "dependencies": {
    "@akylas/nativescript-sqlite": "^3.3.12",
    "@nativescript-community/ui-collectionview": "^4.0.32",
    "@nativescript-rtl/ui": "^0.1.9",
    "@nativescript/core": "^8.0.7",
    "@nativescript/localize": "^5.0.4",
    "@triniwiz/nativescript-accelerometer": "^4.0.3",
    "nativescript-imagecropper": "^4.0.1",
    "nativescript-intl": "^4.0.2",
    "nativescript-vue": "^2.9.0",
    "vuex": "^3.6.2"
  },
  "devDependencies": {
    "@nativescript/android": "8.0.0",
    "@nativescript/types": "^8.0.1",
    "@nativescript/webpack": "^5.0.0-beta.14",
    "@types/node": "^15.12.2",
    "nativescript-vue-template-compiler": "~2.9.0",
    "sass": "^1.34.1",
    "typescript": "^4.2.4",
    "vue": "^2.6.14"
  }
}

And I've registered the layouts in the main.ts like this,

import { StackLayout, DockLayout, GridLayout } from '@nativescript-rtl/ui'
Vue.registerElement('RStackLayout', () => StackLayout)
Vue.registerElement('RGridLayout', () => GridLayout)
Vue.registerElement('RDockLayout', () => DockLayout)

Webpack is throwing these warnings:

WARNING in ./app/main.ts 18:42-53
export 'StackLayout' (imported as 'StackLayout') was not found in '@nativescript-rtl/ui' (module has no exports)

WARNING in ./app/main.ts 19:41-51
export 'GridLayout' (imported as 'GridLayout') was not found in '@nativescript-rtl/ui' (module has no exports)

WARNING in ./app/main.ts 20:41-51
export 'DockLayout' (imported as 'DockLayout') was not found in '@nativescript-rtl/ui' (module has no exports)
An uncaught Exception occurred on "main" thread.
System.err: Unable to start activity ComponentInfo{com.vishnuraghav.EnRecipes/com.tns.NativeScriptActivity}: com.tns.NativeScriptException: Calling js method onCreate failed
System.err: TypeError: Cannot read property 'setAttribute' of undefined
System.err: 
System.err: StackTrace:
System.err: java.lang.RuntimeException: Unable to start activity ComponentInfo{com.vishnuraghav.EnRecipes/com.tns.NativeScriptActivity}: com.tns.NativeScriptException: Calling js method onCreate failed
System.err: TypeError: Cannot read property 'setAttribute' of undefined
System.err:     at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2778)
System.err:     at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2856)
System.err:     at android.app.ActivityThread.-wrap11(Unknown Source:0)
System.err:     at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1589)
System.err:     at android.os.Handler.dispatchMessage(Handler.java:106)
System.err:     at android.os.Looper.loop(Looper.java:164)
System.err:     at android.app.ActivityThread.main(ActivityThread.java:6494)
System.err:     at java.lang.reflect.Method.invoke(Native Method)
System.err:     at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:438)
System.err:     at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:807)
System.err: Caused by: com.tns.NativeScriptException: Calling js method onCreate failed
System.err: TypeError: Cannot read property 'setAttribute' of undefined
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.NativeScriptActivity.onCreate(NativeScriptActivity.java:29)
System.err:     at android.app.Activity.performCreate(Activity.java:7009)
System.err:     at android.app.Activity.performCreate(Activity.java:7000)
System.err:     at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1214)
System.err:     at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2731)
vishnuraghavb commented 3 years ago

It was a reference issue, changing the import location made it work

Working:

import { GridLayout } from '@nativescript-rtl/ui/grid-layout/grid-layout.android'

Not Working:

import { GridLayout } from '@nativescript-rtl/ui'
xlmnxp commented 3 years ago

maybe the issue because I change "main": "main.js", to "main": "main.ts", in package.json

xlmnxp commented 3 years ago

it should be fixed in 📦 @nativescript-rtl/ui@0.2.0