nativescript-vue / vue-cli-template Goto Github PK

View Code? Open in Web Editor NEW

283.0 283.0 50.0 4.06 MB

A Vue-CLI (2.x) template for NativeScript-Vue

License: MIT License

JavaScript 53.27% Vue 34.69% TypeScript 9.20% SCSS 2.84%

vue-cli-template's Introduction

Yes, the image needs to be updated :)

NativeScript-Vue3 RC

NativeScript-Vue with Vue3 support now in RC!

Quick start

To get started, you can use the StackBlitz Template

...or locally:

ns create myAwesomeApp --template @nativescript-vue/template-blank@rc

cd myAwesomeApp
ns run ios|android

Vue Devtools

To use VueDevtools, run:

ns run ios|android --env.vueDevtools

This will launch the standalone VueDevtools, and connect to it once the app launches. Right now, devtools are only supported on iOS Simulators and Android Emulators, but physical device support should come soon (requires configuring a host/port that the device can connect to.).

On android, you must enable cleartext http traffic, otherwise any connections are silently dropped by the system. In the App_Resources/Android/src/main/AndroidManifext.xml add the following to your existing <application> tag:

<application ...
+  android:usesCleartextTraffic="true"
.../>

Issues

If you encounter any issues, please open a new issue with as much detail as possible.

Join Discord

Looking for V2?

The V2 version has been moved to the v2 branch

vue-cli-template's People

Contributors

Stargazers

Watchers

vue-cli-template's Issues

Plugins not working (Mapbox, BottomNavigation)

I've made a new project. Tried adding a couple of plugins following instructions in docs, but in both cases the app throws System.err: TypeError: Could not load view for: mapbox. Error: com.tns.NativeScriptException: Failed to find module: "nativescript-mapbox\mapbox.common", relative to: app/tns_modules/

<template>
  <Page class="page">
    <ActionBar class="action-bar" title="Home"/>

    <Mapbox
        accessToken="pk.eyJ1Ijoic2VpZ#######################8ncKyzs0vg"
        mapStyle="traffic_day"
        latitude="50.467735"
        longitude="13.427718"
        hideCompass="true"
        zoomLevel="18"
        showUserLocation="false"
        disableZoom="false"
        disableRotation="false"
        disableScroll="false"
        disableTilt="false">
    </Mapbox>

    <StackLayout>
      <Button class="btn btn-primary" @tap="$router.push('/counter')">Counter</Button>
      <Button class="btn btn-primary" @tap="$router.push('/hello')">Hello World</Button>
    </StackLayout>

    <!-- <BottomNavigation activeColor="red"
                      inactiveColor="yellow"
                      backgroundColor="black"
                      keyLineColor="black"
                      (tabSelected)="onBottomNavigationTabSelected($event)"
                      row="1">
        <BottomNavigationTab title="First" icon="ic_home"></BottomNavigationTab>
        <BottomNavigationTab title="Second" icon="ic_view_list"></BottomNavigationTab>
        <BottomNavigationTab title="Third" icon="ic_menu"></BottomNavigationTab>
    </BottomNavigation> -->

  </Page>
</template>

<script>
import Vue from 'nativescript-vue'

Vue.registerElement('Mapbox', () => require('nativescript-mapbox').MapboxView)
/* Vue.registerElement('BottomNavigation', () => require('nativescript-bottom-navigation').BottomNavigation)
Vue.registerElement('BottomNavigationTab', () => require('nativescript-bottom-navigation').BottomNavigationTab)
Vue.registerElement('OnTabSelectedEventData', () => require('nativescript-bottom-navigation').OnTabSelectedEventData) */

export default {
}
</script>

# NativeScript Debugger started #
To start debugging, open the following URL in Chrome:
chrome-devtools://devtools/bundled/inspector.html?experiments=true&ws=localhost:40000

JS: 'NativeScript-Vue has "Vue.config.silent" set to true, to see output logs set it to false.'
System.err: java.lang.RuntimeException: Unable to start activity ComponentInfo{org.nativescript.application/com.tns.NativeScriptActivity}: com.tns.NativeScriptException:
System.err: Calling js method onCreate failed
System.err: TypeError: Could not load view for: mapbox. Error: com.tns.NativeScriptException: Failed to find module: "nativescript-mapbox\mapbox.common", relative to: app/tns_modules/
System.err:     com.tns.Module.resolvePathHelper(Module.java:146)
System.err:     com.tns.Module.resolvePath(Module.java:55)
System.err:     com.tns.Runtime.callJSMethodNative(Native Method)
System.err:     com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1088)
System.err:     com.tns.Runtime.callJSMethodImpl(Runtime.java:970)
System.err:     com.tns.Runtime.callJSMethod(Runtime.java:957)
System.err:     com.tns.Runtime.callJSMethod(Runtime.java:941)
System.err:     com.tns.Runtime.callJSMethod(Runtime.java:933)
System.err:     com.tns.NativeScriptActivity.onCreate(NativeScriptActivity.java:13)
System.err:     android.app.Activity.performCreate(Activity.java:5231)
System.err:     android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1087)
System.err:     android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2148)
System.err:     android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2233)System.err:     android.app.ActivityThread.access$800(ActivityThread.java:135)
System.err:     android.app.ActivityThread$H.handleMessage(ActivityThread.java:1196)
System.err:     android.os.Handler.dispatchMessage(Handler.java:102)
System.err:     android.os.Looper.loop(Looper.java:136)
System.err:     android.app.ActivityThread.main(ActivityThread.java:5001)
System.err:     java.lang.reflect.Method.invokeNative(Native Method)
System.err:     java.lang.reflect.Method.invoke(Method.java:515)
System.err:     com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:785)
System.err:     com.android.internal.os.ZygoteInit.main(ZygoteInit.java:601)
System.err:     dalvik.system.NativeStart.main(Native Method)
System.err: File: "file:///data/data/org.nativescript.application/files/app/app.js, line: 1, column: 78634
System.err: StackTrace:
System.err:     Frame: function:'jt', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 24595
System.err:     Frame: function:'t', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 91673
System.err:     Frame: function:'t.createElement', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 93095
System.err:     Frame: function:'an', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 27053
System.err:     Frame: function:'u', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 94420
System.err:     Frame: function:'h', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 95318
System.err:     Frame: function:'u', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 94444
System.err:     Frame: function:'h', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 95318
System.err:     Frame: function:'u', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 94444
System.err:     Frame: function:'e.nodeOps', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 99576
System.err:     Frame: function:'e._update', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 108677
System.err:     Frame: function:'r', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 16143
System.err:     Frame: function:'hs.get', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 78602
System.err:     Frame: function:'hs', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 78525
System.err:     Frame: function:'qe', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 16167
System.err:     Frame: function:'_l', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 118474
System.err:     Frame: function:'Qo.$mount', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 118771
System.err:     Frame: function:'init', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 105773
System.err:     Frame: function:'l', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 94714
System.err:     Frame: function:'u', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 94149
System.err:     Frame: function:'e.nodeOps', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 100062
System.err:     Frame: function:'e._update', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 108677
System.err:     Frame: function:'r', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 16143
System.err:     Frame: function:'hs.get', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 78602
System.err:     Frame: function:'hs', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 78525
System.err:     Frame: function:'qe', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 16167
System.err:     Frame: function:'create', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 118326
System.err:     Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/frame/frame-common.js', line: 51, column: 22
System.err:     Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/frame/frame-common.js', line: 101, column: 16
System.err:     Frame: function:'FrameBase.navigate', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/frame/frame-common.js', line: 213, column: 28
System.err:     Frame: function:'ActivityCallbacksImplementation.onCreate', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/frame/frame.js', line: 615, column: 19
System.err:     Frame: function:'NativeScriptActivity.onCreate', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/frame/activity.js', line: 20, column: 25
System.err:     at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2184)
System.err:     at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2233)
System.err:     at android.app.ActivityThread.access$800(ActivityThread.java:135)
System.err:     at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1196)
System.err:     at android.os.Handler.dispatchMessage(Handler.java:102)
System.err:     at android.os.Looper.loop(Looper.java:136)
System.err:     at android.app.ActivityThread.main(ActivityThread.java:5001)
System.err:     at java.lang.reflect.Method.invokeNative(Native Method)
System.err:     at java.lang.reflect.Method.invoke(Method.java:515)
System.err:     at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:785)
System.err:     at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:601)
System.err:     at dalvik.system.NativeStart.main(Native Method)
System.err: Caused by: com.tns.NativeScriptException:
System.err: Calling js method onCreate failed
System.err: TypeError: Could not load view for: mapbox. Error: com.tns.NativeScriptException: Failed to find module: "nativescript-mapbox\mapbox.common", relative to: app/tns_modules/
System.err:     com.tns.Module.resolvePathHelper(Module.java:146)
System.err:     com.tns.Module.resolvePath(Module.java:55)
System.err:     com.tns.Runtime.callJSMethodNative(Native Method)
System.err:     com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1088)
System.err:     com.tns.Runtime.callJSMethodImpl(Runtime.java:970)
System.err:     com.tns.Runtime.callJSMethod(Runtime.java:957)
System.err:     com.tns.Runtime.callJSMethod(Runtime.java:941)
System.err:     com.tns.Runtime.callJSMethod(Runtime.java:933)
System.err:     com.tns.NativeScriptActivity.onCreate(NativeScriptActivity.java:13)
System.err:     android.app.Activity.performCreate(Activity.java:5231)
System.err:     android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1087)
System.err:     android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2148)
System.err:     android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2233)System.err:     android.app.ActivityThread.access$800(ActivityThread.java:135)
System.err:     android.app.ActivityThread$H.handleMessage(ActivityThread.java:1196)
System.err:     android.os.Handler.dispatchMessage(Handler.java:102)
System.err:     android.os.Looper.loop(Looper.java:136)
System.err:     android.app.ActivityThread.main(ActivityThread.java:5001)
System.err:     java.lang.reflect.Method.invokeNative(Native Method)
System.err:     java.lang.reflect.Method.invoke(Method.java:515)
System.err:     com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:785)
System.err:     com.android.internal.os.ZygoteInit.main(ZygoteInit.java:601)
System.err:     dalvik.system.NativeStart.main(Native Method)
System.err: File: "file:///data/data/org.nativescript.application/files/app/app.js, line: 1, column: 78634
System.err: StackTrace:
System.err:     Frame: function:'jt', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 24595
System.err:     Frame: function:'t', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 91673
System.err:     Frame: function:'t.createElement', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 93095
System.err:     Frame: function:'an', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 27053
System.err:     Frame: function:'u', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 94420
System.err:     Frame: function:'h', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 95318
System.err:     Frame: function:'u', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 94444
System.err:     Frame: function:'h', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 95318
System.err:     Frame: function:'u', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 94444
System.err:     Frame: function:'e.nodeOps', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 99576
System.err:     Frame: function:'e._update', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 108677
System.err:     Frame: function:'r', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 16143
System.err:     Frame: function:'hs.get', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 78602
System.err:     Frame: function:'hs', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 78525
System.err:     Frame: function:'qe', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 16167
System.err:     Frame: function:'_l', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 118474
System.err:     Frame: function:'Qo.$mount', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 118771
System.err:     Frame: function:'init', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 105773
System.err:     Frame: function:'l', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 94714
System.err:     Frame: function:'u', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 94149
System.err:     Frame: function:'e.nodeOps', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 100062
System.err:     Frame: function:'e._update', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 108677
System.err:     Frame: function:'r', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 16143
System.err:     Frame: function:'hs.get', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 78602
System.err:     Frame: function:'hs', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 78525
System.err:     Frame: function:'qe', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 16167
System.err:     Frame: function:'create', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 118326
System.err:     Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/frame/frame-common.js', line: 51, column: 22
System.err:     Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/frame/frame-common.js', line: 101, column: 16
System.err:     Frame: function:'FrameBase.navigate', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/frame/frame-common.js', line: 213, column: 28
System.err:     Frame: function:'ActivityCallbacksImplementation.onCreate', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/frame/frame.js', line: 615, column: 19
System.err:     Frame: function:'NativeScriptActivity.onCreate', file:'file:///data/data/org.nativescript.application/files/app/tns_modules/tns-core-modules/ui/frame/activity.js', line: 20, column: 25
System.err:     at com.tns.Runtime.callJSMethodNative(Native Method)
System.err:     at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1088)
System.err:     at com.tns.Runtime.callJSMethodImpl(Runtime.java:970)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:957)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:941)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:933)
System.err:     at com.tns.NativeScriptActivity.onCreate(NativeScriptActivity.java:13)
System.err:     at android.app.Activity.performCreate(Activity.java:5231)
System.err:     at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1087)
System.err:     at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2148)
System.err:     ... 11 more
ActivityManager: Process org.nativescript.application (pid 3790) has died.

Changing the application name

Hey!

First of all, thanks for this repo and for all the work you've done.

Now, I've been experimenting with your approach to NativeScript-Vue and I've stumbled upon the next issue:

I can't change the name of the application. I've tried changing the name with NativeScript Sidekick but it's grayed out with 'template' and I'm unable to change it. I've also tried changing the android:label inside the AndroidManifest.xml on the template folder and CFBundleDisplayName inside Info.plist for iOS. When the aplication asks for permission to install, the correct name is shown. However, when the app is minimized the name below the icon remains as dist.

Is there anything I'm missing? Can you maybe guide me on the right track?

Thanks again for everything and I'll eagerly wait for your response.

TabView set dynamic data tabChange

Hello, guy
Could someone show me on Tabview when tabChnage set dynamic data to TabViewItem?

Import custom font

From @hoandang on March 21, 2018 14:22

nativescript official guide mentions custom fonts will be automatically loaded in /app/fonts but in the nativescript-vue structure doesn't have app fonder but src. Did I generate the structure incorrectly?

I have tried @font-face in scss but it didn't seem to work.

Copied from original issue: nativescript-vue/nativescript-vue#149

Debug

Can i use pretty debug by webshtorm?
After i run npm run debug: i can access to chrome devtools from chrome, but compiled webpack looks ugly.

If i try to access devtools from webshtorm from where:

I get this error:

fully remove back Button from ActionBar (clearHistory)

i have login view after login push the router to tab view i don't need the back Button,
also win i press logout i push the router to login i have navigation Bar with back button refer to settings view

look for this issue in nativescript-angular
NativeScript/nativescript-angular#284

now i just make the NavigationButton visibility="collapse" but this is not good approach

Fail Npm Install

From @jpldev on May 3, 2018 4:17

Hellow! I follow the quick start https://nativescript-vue.org/en/docs/getting-started/quick-start/
but I couldn't start the app. When I do npm install it fails.
Any help?

Thanks!

Juans-MacBook-Pro:sportsApp jpldev$ sudo npm install

[email protected] install /Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/fsevents
node install

[fsevents] Success: "/Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile

[email protected] install /Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/node-sass
node scripts/install.js

Unable to save binary /Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/node-sass/vendor/darwin-x64-57 : { Error: EACCES: permission denied,mkdir '/Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/node-sass/vendor'
at Object.fs.mkdirSync (fs.js:885:18)
at sync (/Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/mkdirp/index.js:71:13)
at Function.sync (/Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/mkdirp/index.js:77:24)
at checkAndDownloadBinary (/Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/node-sass/scripts/install.js:114:11)
at Object. (/Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/node-sass/scripts/install.js:157:1)
at Module._compile (module.js:643:30)
at Object.Module._extensions..js (module.js:654:10)
at Module.load (module.js:556:32)
at tryModuleLoad (module.js:499:12)
at Function.Module._load (module.js:491:3)
errno: -13,
code: 'EACCES',
syscall: 'mkdir',
path: '/Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/node-sass/vendor' }

[email protected] postinstall /Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/uglifyjs-webpack-plugin
node lib/post_install.js

[email protected] postinstall /Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/node-sass
node scripts/build.js

Building: /usr/local/bin/node /Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/node-gyp/bin/node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
gyp info it worked if it ends with ok
gyp verb cli [ '/usr/local/bin/node',
gyp verb cli '/Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/node-gyp/bin/node-gyp.js',
gyp verb cli 'rebuild',
gyp verb cli '--verbose',
gyp verb cli '--libsass_ext=',
gyp verb cli '--libsass_cflags=',
gyp verb cli '--libsass_ldflags=',
gyp verb cli '--libsass_library=' ]
gyp info using [email protected]
gyp info using [email protected] | darwin | x64
gyp verb command rebuild []
gyp verb command clean []
gyp verb clean removing "build" directory
gyp verb command configure []
gyp verb check python checking for Python executable "python2" in the PATH
gyp verb which failed Error: not found: python2
gyp verb which failed at getNotFoundError (/Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/which/which.js:13:12)
gyp verb which failed at F (/Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/which/which.js:68:19)
gyp verb which failed at E (/Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/which/which.js:80:29)
gyp verb which failed at /Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/which/which.js:89:16
gyp verb which failed at /Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/isexe/index.js:42:5
gyp verb which failed at /Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/isexe/mode.js:8:5
gyp verb which failed at FSReqWrap.oncomplete (fs.js:152:21)
gyp verb which failed python2 { Error: not found: python2
gyp verb which failed at getNotFoundError (/Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/which/which.js:13:12)
gyp verb which failed at F (/Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/which/which.js:68:19)
gyp verb which failed at E (/Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/which/which.js:80:29)
gyp verb which failed at /Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/which/which.js:89:16
gyp verb which failed at /Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/isexe/index.js:42:5
gyp verb which failed at /Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/isexe/mode.js:8:5
gyp verb which failed at FSReqWrap.oncomplete (fs.js:152:21)
gyp verb which failed stack: 'Error: not found: python2\n at getNotFoundError (/Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/which/which.js:13:12)\n at F (/Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/which/which.js:68:19)\n at E (/Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/which/which.js:80:29)\n at /Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/which/which.js:89:16\n at /Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/isexe/index.js:42:5\n at /Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/isexe/mode.js:8:5\n at FSReqWrap.oncomplete (fs.js:152:21)',
gyp verb which failed code: 'ENOENT' }
gyp verb check python checking for Python executable "python" in the PATH
gyp verb which succeeded python /usr/bin/python
gyp verb check python version /usr/bin/python -c "import platform; print(platform.python_version());" returned: "2.7.10\n"
gyp verb get node dir no --target version specified, falling back to host node version: 8.9.4
gyp verb command install [ '8.9.4' ]
gyp verb install input version string "8.9.4"
gyp verb install installing version: 8.9.4
gyp verb install --ensure was passed, so won't reinstall if already installed
gyp verb install version is already installed, need to check "installVersion"
gyp verb got "installVersion" 9
gyp verb needs "installVersion" 9
gyp verb install version is good
gyp verb get node dir target node version installed: 8.9.4
gyp verb build dir attempting to create "build" dir: /Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/node-sass/build
gyp ERR! configure error
gyp ERR! stack Error: EACCES: permission denied, mkdir '/Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/node-sass/build'
gyp ERR! System Darwin 16.7.0
gyp ERR! command "/usr/local/bin/node" "/Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd /Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/node-sass
gyp ERR! node -v v8.9.4
gyp ERR! node-gyp -v v3.6.2
gyp ERR! not ok
Build failed with error code: 1
npm WARN [email protected] requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] No repository field.
npm WARN [email protected] license should be a valid SPDX license expression

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: node scripts/build.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/jpldev/.npm/_logs/2018-05-03T04_12_17_398Z-debug.log

Copied from original issue: nativescript-vue/nativescript-vue-webpack-template#6

Using `ScrollView` breaks on ios

Hi,

When wrapping the Home page in a ScrollView, ios renders fine, but then on scroll errors and does nothing. Android is fine.

The same template works fine in the Nativescript Playground.

The error I get when I try to scroll:

(Foundation) *** Assertion failure in -[UIGestureGraphEdge initWithLabel:sourceNode:targetNode:directed:], /BuildRoot/Library/Caches/com.apple.xbs/Sources/UIKit_Sim/UIKit-3698.33.6/Source/GestureGraph/UIGestureGraphEdge.m:25

Code:

<template>
    <Page class="page">
      <ScrollView>
        <StackLayout>
          <TextField class="search" />
          <TextField class="search-2" />
          <TextField class="search" />
          <TextField class="search-2" />
        </StackLayout>
      </ScrollView>
    </Page>
</template>

<style scoped>

.search{
    background-image: url('https://d30y9cdsu7xlg0.cloudfront.net/png/14173-200.png');
    background-position: right center;
    background-repeat: no-repeat;
    height: 640px;
}

.search-2{
    background-image: url('https://d30y9cdsu7xlg0.cloudfront.net/png/14173-200.png');
    background-position: right 20px center;
    background-repeat: no-repeat;
    height: 640px;
}
</style>

Impossible to import plugins

I was trying to make a simple application which plays audio when a button is tapped. However, when I install any plugin via yarn add plugin-name or npm i --save plugin-name, I simply can't use them. I've tried nativescript-audio and nativescript-sound, importing them in the vuex store, in main.js - and the application either fails at build or crashes at startup.

Sample error log, the line import { TNSPlayer } from 'nativescript-audio' is added to main.js:

System.err: java.lang.RuntimeException: Unable to create application com.tns.NativeScriptApplication: com.tns.NativeScriptException:
System.err: Error calling module function
System.err: Error: com.tns.NativeScriptException: Failed to find module: "nativescript-audio\options", relative to: app/tns_modules/
System.err:     com.tns.Module.resolvePathHelper(Module.java:146)
System.err:     com.tns.Module.resolvePath(Module.java:55)
System.err:     com.tns.Runtime.runModule(Native Method)
System.err:     com.tns.Runtime.runModule(Runtime.java:530)
System.err:     com.tns.Runtime.run(Runtime.java:522)
System.err:     com.tns.NativeScriptApplication.onCreate(NativeScriptApplication.java:19)
System.err:     android.app.Instrumentation.callApplicationOnCreate(Instrumentation.java:1014)
System.err:     android.app.ActivityThread.handleBindApplication(ActivityThread.java:4825)
System.err:     de.robv.android.xposed.XposedBridge.invokeOriginalMethodNative(Native Method)
System.err:     de.robv.android.xposed.XposedBridge.handleHookedMethod(XposedBridge.java:334)
System.err:     android.app.ActivityThread.handleBindApplication(<Xposed>)
System.err:     android.app.ActivityThread.access$1700(ActivityThread.java:156)
System.err:     android.app.ActivityThread$H.handleMessage(ActivityThread.java:1470)
System.err:     android.os.Handler.dispatchMessage(Handler.java:102)
System.err:     android.os.Looper.loop(Looper.java:157)
System.err:     android.app.ActivityThread.main(ActivityThread.java:5653)
System.err:     java.lang.reflect.Method.invoke(Native Method)
System.err:     com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:746)
System.err:     com.android.internal.os.ZygoteInit.main(ZygoteInit.java:636)
System.err:     de.robv.android.xposed.XposedBridge.main(XposedBridge.java:102)

Sample error log 2, in this case the line import {Sound} from 'nativescript-sound' is added to main.js:

ERROR in ./src/main.js
Module not found: Error: Can't resolve 'nativescript-sound' in 'D:\PROGRAMMING\test-ns\src'
 @ ./src/main.js 11:25-54

I've also tried to add tns-core-modules/ to the imports as a prefix, according to the documentation, but it had no effect.

Cannot access ui/frame or utils/utils to change status bar text color

Hello,
I’m trying to gain access to the topmost() function so I can change the statusbar colors.
I’ve tried lots of variations to import ui/frame into my project and all has failed in one way or another.

import {topmost} from 'tns-core-modules/ui/frame';
import {topmost} from ‘tns-core-modules/ui/frame/frame-common’;
import * as test from ‘tns-core-modules/ui/frame’;
import {Frame} from ‘tns-core-modules/ui/frame’;
var frameModule = require(‘tns-core-modules/ui/frame/frame-common’);
var frameModule = require(‘tns-core-modules/ui/frame’);
var frameModule = require(‘ui/frame’);
var frameModule = require(‘~/ui/frame’);
frameModule.topmost();

In the first case topmost console.log(topmost); which returns...

{ [Function: topmost]
  [arguments]: null,
  [caller]: null,
  [length]: 0,
  [name]: 'topmost',
...

...but topmost().ios fails.

@jlooper mentioned on slack that I should be able to access the status bar through this method but this also fails.

import * as utils from "tns-core-modules/utils/utils"
//Make the iOS status bar transparent with white text.
utils.ios.getter(UIApplication, UIApplication.sharedApplication).statusBarStyle = UIStatusBarStyle.LightContent;

In this case I can access the getter function but again calling it does not work.

Any help here would be much appreciated.
Cheers!

Cannot run the NativeScript Vue app.

From @Himujjal on March 26, 2018 20:0

I simply followed the official documentation and then run the following app in my emulator.
I used the following commands:

npm install -g @vue/cli @vue/cli-init
vue init nativescript-vue/vue-cli-template yoyo
cd yoyo
npm install

The app is showing an error message. It gets installed in the emulator though:

An uncaught Exception occurred on "main" thread.
java.lang.RuntimeException: Unable to create application com.tns.NativeScriptApplication: com.tns.NativeScriptException: 

Error calling module function 

Error: com.tns.NativeScriptException: Failed to find module: "D:\Coding_Files\nativescript\nativescript-vue\tutorial\yoyo\src\main.js", relative to: app/tns_modules/
    com.tns.Module.resolvePathHelper(Module.java:146)
    com.tns.Module.resolvePath(Module.java:55)
    com.tns.Runtime.runModule(Native Method)
    com.tns.Runtime.runModule(Runtime.java:530)
    com.tns.Runtime.run(Runtime.java:522)
    com.tns.NativeScriptApplication.onCreate(NativeScriptApplication.java:19)
    android.app.Instrumentation.callApplicationOnCreate(Instrumentation.java:1013)
    android.app.ActivityThread.handleBindApplication(ActivityThread.java:4707)
    android.app.ActivityThread.-wrap1(ActivityThread.java)
    android.app.ActivityThread$H.handleMessage(ActivityThread.java:1405)
    android.os.Handler.dispatchMessage(Handler.java:102)
    android.os.Looper.loop(Looper.java:148)
    android.app.ActivityThread.main(ActivityThread.java:5417)
    java.lang.reflect.Method.invoke(Native Method)
    com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:726)
    com.android.internal.os.ZygoteInit.main(ZygoteInit.java:616)
File: "<unknown>, line: 1, column: 265

StackTrace: 
	Frame: function:'require', file:'', line: 1, column: 266
	Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 546
	Frame: function:'t', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 161
	Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 511
	Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 520
	Frame: function:'require', file:'', line: 1, column: 266


Error: com.tns.NativeScriptException: Failed to find module: "D:\Coding_Files\nativescript\nativescript-vue\tutorial\yoyo\src\main.js", relative to: app/tns_modules/
    com.tns.Module.resolvePathHelper(Module.java:146)
    com.tns.Module.resolvePath(Module.java:55)
    com.tns.Runtime.runModule(Native Method)
    com.tns.Runtime.runModule(Runtime.java:530)
    com.tns.Runtime.run(Runtime.java:522)
    com.tns.NativeScriptApplication.onCreate(NativeScriptApplication.java:19)
    android.app.Instrumentation.callApplicationOnCreate(Instrumentation.java:1013)
    android.app.ActivityThread.handleBindApplication(ActivityThread.java:4707)
    android.app.ActivityThread.-wrap1(ActivityThread.java)
    android.app.ActivityThread$H.handleMessage(ActivityThread.java:1405)
    android.os.Handler.dispatchMessage(Handler.java:102)
    android.os.Looper.loop(Looper.java:148)
    android.app.ActivityThread.main(ActivityThread.java:5417)
    java.lang.reflect.Method.invoke(Native Method)
    com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:726)
    com.android.internal.os.ZygoteInit.main(ZygoteInit.java:616)
File: "<unknown>, line: 1, column: 265

StackTrace: 
	Frame: function:'require', file:'', line: 1, column: 266
	Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 546
	Frame: function:'t', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 161
	Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 511
	Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 520
	Frame: function:'require', file:'', line: 1, column: 266


	at android.app.ActivityThread.handleBindApplication(ActivityThread.java:4710)
	at android.app.ActivityThread.-wrap1(ActivityThread.java)
	at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1405)
	at android.os.Handler.dispatchMessage(Handler.java:102)
	at android.os.Looper.loop(Looper.java:148)
	at android.app.ActivityThread.main(ActivityThread.java:5417)
	at java.lang.reflect.Method.invoke(Native Method)
	at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:726)
	at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:616)
Caused by: com.tns.NativeScriptException: 

Error calling module function 

Error: com.tns.NativeScriptException: Failed to find module: "D:\Coding_Files\nativescript\nativescript-vue\tutorial\yoyo\src\main.js", relative to: app/tns_modules/
    com.tns.Module.resolvePathHelper(Module.java:146)
    com.tns.Module.resolvePath(Module.java:55)
    com.tns.Runtime.runModule(Native Method)
    com.tns.Runtime.runModule(Runtime.java:530)
    com.tns.Runtime.run(Runtime.java:522)
    com.tns.NativeScriptApplication.onCreate(NativeScriptApplication.java:19)
    android.app.Instrumentation.callApplicationOnCreate(Instrumentation.java:1013)
    android.app.ActivityThread.handleBindApplication(ActivityThread.java:4707)
    android.app.ActivityThread.-wrap1(ActivityThread.java)
    android.app.ActivityThread$H.handleMessage(ActivityThread.java:1405)
    android.os.Handler.dispatchMessage(Handler.java:102)
    android.os.Looper.loop(Looper.java:148)
    android.app.ActivityThread.main(ActivityThread.java:5417)
    java.lang.reflect.Method.invoke(Native Method)
    com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:726)
    com.android.internal.os.ZygoteInit.main(ZygoteInit.java:616)
File: "<unknown>, line: 1, column: 265

StackTrace: 
	Frame: function:'require', file:'', line: 1, column: 266
	Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 546
	Frame: function:'t', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 161
	Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 511
	Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 520
	Frame: function:'require', file:'', line: 1, column: 266


Error: com.tns.NativeScriptException: Failed to find module: "D:\Coding_Files\nativescript\nativescript-vue\tutorial\yoyo\src\main.js", relative to: app/tns_modules/
    com.tns.Module.resolvePathHelper(Module.java:146)
    com.tns.Module.resolvePath(Module.java:55)
    com.tns.Runtime.runModule(Native Method)
    com.tns.Runtime.runModule(Runtime.java:530)
    com.tns.Runtime.run(Runtime.java:522)
    com.tns.NativeScriptApplication.onCreate(NativeScriptApplication.java:19)
    android.app.Instrumentation.callApplicationOnCreate(Instrumentation.java:1013)
    android.app.ActivityThread.handleBindApplication(ActivityThread.java:4707)
    android.app.ActivityThread.-wrap1(ActivityThread.java)
    android.app.ActivityThread$H.handleMessage(ActivityThread.java:1405)
    android.os.Handler.dispatchMessage(Handler.java:102)
    android.os.Looper.loop(Looper.java:148)
    android.app.ActivityThread.main(ActivityThread.java:5417)
    java.lang.reflect.Method.invoke(Native Method)
    com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:726)
    com.android.internal.os.ZygoteInit.main(ZygoteInit.java:616)
File: "<unknown>, line: 1, column: 265

StackTrace: 
	Frame: function:'require', file:'', line: 1, column: 266
	Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 546
	Frame: function:'t', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 161
	Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 511
	Frame: function:'', file:'file:///data/data/org.nativescript.application/files/app/app.js', line: 1, column: 520
	Frame: function:'require', file:'', line: 1, column: 266


	at com.tns.Runtime.runModule(Native Method)
	at com.tns.Runtime.runModule(Runtime.java:530)
	at com.tns.Runtime.run(Runtime.java:522)
	at com.tns.NativeScriptApplication.onCreate(NativeScriptApplication.java:19)
	at android.app.Instrumentation.callApplicationOnCreate(Instrumentation.java:1013)
	at android.app.ActivityThread.handleBindApplication(ActivityThread.java:4707)
	... 8 more

Copied from original issue: nativescript-vue/nativescript-vue#162

Path ~/images not working at styles in components .vue

Hello, this is my setup:

node: v9.8.0
npm: v5.6.0

My Code

<template>
  <Page class="page background" actionBarHidden="true">
    
  </Page>
</template>

<script>
export default {  
}
</script>

<style scoped>
.background{
  background-image: url("~/images/background.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
</style>

ERROR in app.ios.js from UglifyJs

install nativescript-localstorage
then require("nativescript-localstorage"); in main.js

then watch:ios i got something like this

ERROR in app.ios.js from UglifyJs
Unexpected token: name (localStorageData) [app.ios.js:17875,8]

after some search i found the UglifyJs work only on es5 i don't know if this is the problem
but if this error have side effect please help me to find solution i don't have good experience in webpack

Cannot import plugins

Hello there,

I have been trying the past few days trying to import RadSideDrawer from nativescript-pro-ui into a fresh install of this template.

After reading all the docs and current issues with comments, I have still not come across anything to assist in importing external plugins.

Currently in my Home.vue I am importing the Sidedrawer with the following:

import RadSideDrawer from "nativescript-pro-ui/sidedrawer";
export default {
data () {
return {
surprise: false,
};
},
components: {
RadSideDrawer
}
};

But webpack still gives this error:

System.err: Error: com.tns.NativeScriptException: Failed to find module: "sidedrawer\sidedrawer-common", relative to: app/tns_modules/

I am using everything as per the fresh pull of this package. No alterations on any webpack configs. And I did add the package using npm and not tns (according to the docs). Did a npm run clean. But the error still persists.

Any solutions?

Error on vue init: `Missing helper: "androidVersionCode"`

user ➜ vue init nativescript-vue/vue-cli-template TestVueNativeScript

? Project name test
? Project description A native application built with NativeScript-Vue
? Application name Test
? Unique application identifier net.testudo.test
? Project version 1.0.0
? Author Tester Test <[email protected]>
? License MIT
? Install vue-router? Yes
? Install vuex? Yes
? Color scheme purple
   vue-cli · [template/app/App_Resources/Android/AndroidManifest.xml] Missing helper: "androidVersionCode"

I get this error. Nothing else.

Vue CLI version: 2.9.3

For testing purposes I created a NativeScript JS Hello World project with tns create and that works flawlessly, it even compiles and runs on the iOS simulator and on an Android emulator, and tns doctor says everything is alright.

I also tried it with @vue/cli @vue/cli-init 3.0.0-beta.6 as per instructions at https://nativescript-vue.org/en/docs/getting-started/quick-start/#next-steps but I get the same, identical output. I tried several times, with different options on both 2.x and 3.x beta but nothing seems to change the end result.

Error: Invalid color: hsla(0,0%,93%,.1)

So apparently cssnano with colormin is trying to use whichever color representation is shorter and tries to convert between rgba-hsla whenever possible. But it seems that the color conversion is somehow broken. The original issue was @nativescript-vue nativescript-vue/nativescript-vue#212

A quick fix is disabling color minimisation, or completely disabling cssnano section in webpack.config.js:

 new OptimizeCssAssetsPlugin({
   cssProcessor: require('cssnano'),
   cssProcessorOptions: {discardComments: {removeAll: true}, colormin: false},
   canPrint: false,
 })

tns doctor shows errors

I am able to run the project on ios, but "tns doctor" in the terminal shows errors:

✔ Getting environment information

✔ Your ANDROID_HOME environment variable is set and points to correct directory.
✔ Your adb from the Android SDK is correctly installed.
✔ The Android SDK is installed.
✔ A compatible Android SDK for compilation is found.
✔ Javac is installed and is configured properly.
✔ The Java Development Kit (JDK) is installed and is configured properly.
✔ Xcode is installed and is configured properly.
✔ xcodeproj is installed and is configured properly.
✔ CocoaPods are installed.
✔ CocoaPods update is not required.
✔ CocoaPods are configured properly.
✔ Your current CocoaPods version is newer than 1.0.0.
✔ Python installed and configured correctly.
✔ The Python 'six' package is found.
No issues were detected.
✔ Getting NativeScript components versions information...
✔ Component nativescript has 4.0.0 version and is up to date.
✖ Component tns-core-modules is not installed.
✖ Component tns-android is not installed.
✖ Component tns-ios is not installed.

What do I have to do here? "tns platform add ..."? Why does it work anyways (e.g. with npm run watch:ios)?

Xcode Issue

✔ xcodeproj is installed and is configured properly.
✔ CocoaPods are installed.
✔ CocoaPods update is not required.
✔ Your current CocoaPods version is newer than 1.0.0.
✔ Python installed and configured correctly.
✔ The Python 'six' package is found.
✖ WARNING: Xcode is not installed or is not configured properly.

Hi Guys

I do have the issue mentioned above, although I have xcode installed and I followed all the necessary steps as described here https://docs.nativescript.org/angular/tutorial/ng-chapter-1#11-creating-apps.

Please help

Error:error: uncaughtException: Command failed: node launch.js run

I get this error after running npm run watch:android

error: uncaughtException: Command failed: node launch.js run android
date=Wed May 16 2018 12:10:10 GMT+0300 (E. Africa Standard Time), pid=8940, uid=null, gid=null, cwd=C:\Users\dan\Desktop\vue-app,
execPath=C:\Program Files\nodejs\node.exe, version=v8.11.2, argv=[C:\Program Files\nodejs\node.exe, C:\Users\dan\Desktop\vue-app\node_modules\webpack\bin\webpack.js, --watch, --env.tnsAction, run, --env.android], rss=181923840, heapTotal=155947008, heapUsed=106385472, external=1116597, loadavg=[0, 0, 0], uptime=162971.1631496, trace=[column=12, file=child_process.js, function=ChildProcess.exithandler, line=275, method=exithandler, native=false, column=13, file=events.js, function=emitTwo, line=126, method=null, native=false, column=7, file=events.js, function=ChildProcess.emit, line=214, method=emit, native=false, column=16, file=internal/child_process.js, function=maybeClose, line=925, method=null, native=false, column=11, file=internal/child_process.js, function=Socket.stream.socket.on, line=346, method=on, native=false, column=13, file=events.js, function=emitOne, line=116, method=null, native=false,
column=7, file=events.js, function=Socket.emit, line=211, method=emit, native=false, column=12, file=net.js, function=Pipe._handle.close [as _onclose], line=557, method=close [as _onclose], native=false], stack=[Error: Command failed: node launch.js run android, , at ChildProcess.exithandler (child_process.js:275:12), at emitTwo (events.js:126:13), at ChildProcess.emit (events.js:214:7), at maybeClose (internal/child_process.js:925:16), at Socket.stream.socket.on (internal/child_process.js:346:11),
at emitOne (events.js:116:13), at Socket.emit (events.js:211:7), at Pipe._handle.close [as _onclose] (net.js:557:12)]
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] watch: webpack --watch --env.tnsAction run "--env.android"
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] watch script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\dan\AppData\Roaming\npm-cache_logs\2018-05-16T09_10_10_316Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] watch:android: npm run watch -- --env.android
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] watch:android script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\dan\AppData\Roaming\npm-cache_logs\2018-05-16T09_10_10_468Z-debug.log

Package Name Issues on Android

I logged this issue in the old repo.... it still exists here.

IMac27Quad:nativescript aaronksaunders$ vue init nativescript-vue/vue-cli-template nsvueapp

  A newer version of vue-cli is available.

  latest:    2.9.3
  installed: 2.9.2

? Project name nsvueapp
? Application ID com.ci.application
? Project description NativeScript-Vue application
? Project version 1.0.0
? Author Aaron Saunders <[email protected]>
? License MIT

   vue-cli · Generated "nsvueapp".

If you change the Application ID the app will not run on Android... and it has nothing to do with the project name as some has suggested.

ActivityManager: Force stopping org.nativescript.application appid=10220 user=-1: uninstall pkg
ActivityManager: Force stopping org.nativescript.application appid=10220 user=-1: replace pkg
ActivityManager: Force stopping org.nativescript.application appid=10220 user=0: pkg removed
ActivityManager: Invalid packageName: com.ci.pascalapp.vue
ActivityManager: Force stopping org.nativescript.application appid=10220 user=-1: uninstall pkg
ActivityManager: Force stopping org.nativescript.application appid=10220 user=-1: replace pkg
ActivityManager: Force stopping org.nativescript.application appid=10220 user=0: pkg removed
ActivityManager: Invalid packageName: com.ci.application

Do not uglifing code if run in debug or watch mode

Version

N/A

Reproduction link

nativescript-vue/nativescript-vue#280

Platform and OS info

All

Steps to reproduce

Run npm run debug and inspect the app.js generated.

What is expected?

Debug JS code easily by inspecting the original code

What is actually happening?

The code is minified and uglified

“Searching for devices…” when I try to run a new nativescript-vue project?

I create a nativescript-vue project which following the official start guide here

But when I try to start and preview it on the browser...Nothing I can get from the terminal except "Searching for devices..."

I'm new to it, can someone give me some help on it?

tns process is left running when the script exits

Im not sure if this happens every time, but sometimes if I end the npm run watch:ios/android command, the tns process is not killed, and it keeps syncing the app in the background.

We might need to keep the pid, and on process exit kill it

Frame element won't compile on Android

Version

N/A

Reproduction link

https://github.com/elalienx/ns-vue-rc132v4-frame

Platform and OS info

NativeScript 4.0.1, NativeScript-Vue 1.3.2.v.4, tested emulator Android 6.0, developer computer Mac OS High Sierra 10.13.4.

Steps to reproduce

1.- Download and install the NativeScript-Vue CLI Template from here: https://github.com/nativescript-vue/vue-cli-template
2.- Update the nativescript-vue from "^1.3.1" to "^1.3.2-rc.4"
3.- Update the tns-core-modules from "~3.4.1" to "~4.1.0"
4.- Run npm install to update dependencies.
6.- Add a Frame as the main wrapper on the template in the HelloWorld.vue file.
7.- Run npm run watch:ios to confirm that it works.
8.- Run npm run watch:android and it won't work and throws the error "A frame must be used to navigate to a Page."

What is expected?

To be able to use the Frame element to make complex navigation posible. Like the original NativeScript tab navigation sample: https://market.nativescript.org/plugins/tns-template-tab-navigation

What is actually happening?

1.- On iOS works fine. You can use the Frame element to make a single page or a tab navigation.
2.- On Android you can't make a single page using Frame because it throws an error saying "A frame must be used to navigate to a Page." Even when you are using a Frame.

I ran into this bug when a created a new branch on a project that required a Tab navigation like the Nativescript tab navigation template where the tabs are always present, and where you can navigate to sub pages from each tab.

Build for production / release?

It seems to me that building for production like in the readme:

npm run build:android

creates -debug.apk – so it's still the debug distribution created?

I'm trying to test the initial load time of an app on Android which appears slow but should be faster for a release – also because Android snapshot should be enabled.

Am i missing something?

I guess what I'm concerned about is that I have two functional identical apps – one built with nativescript-vue and this template, and one built with Cordova and the Quasar Framework.

The Cordova one is much faster at initial startup and also faster when navigating router components and I guess I was somewhat expecting the opposite.

Vue-Router beforeRouteEnter

Hey guys!

I've been still working on tests and app building for this template and I do understand that Vue-Router is still experimental and it might actually be the issue but here it goes:

My situation is like this:
I have a SideDrawer that on it's mainContent View is a router-view so that I can just use the sideDrawer as parent for everyone and grab all the routes and build a menu based on the routes of the app.

<router-view ~mainContent/>

But when in the child component I try to use a beforeRouteEnter, the application crashes with the following error:

Calling js method onCreate failed 
Error: A Frame must be used to navigate to a Page.

And if I change the beforeRouteEnter to let's say a created() the application doesn't crash and data is retrieved fine but when I try to navigate back to said child I get the following error:

JS: [Vue warn]: Error in directive view inserted hook: "Error: View not added to this instance. View: ListView(37) CurrentParent: undefined ExpectedParent: t(24)"
JS: 
JS: found in
JS: 
JS: ---> <SideDrawer> at src/sideDrawer.vue
JS: [Vue warn]: Error in nextTick: "Error: View not added to this instance. View: ListView(37) CurrentParent: undefined ExpectedParent: t(24)"

Please let me know if I made myself clear enough with the explanation (I know it might be hard xD) but if you need sample code I am more than willing to share.

Thanks in advance for any help provided!

successful ios build but no ipa file?

can't seem to build an ipa file or i don't know where it was built,
i'm expecting it to be in dist/platforms/ios/build/device folder but that folder does not exist

i'm running this command: npm run build:ios
i tried resetting deriveddata folder
i tried setting DEVELOPMENT_TEAM = TEAM_ID in build.xcconfig

log is as follows:
Xcode build...
=== BUILD TARGET dist OF PROJECT dist WITH CONFIGURATION Debug ===
while processing /Users/lk/VueNS/dist/platforms/ios/internal/TKLiveSync/TKLiveSync(TKLiveSync.o):
warning: /Users/nsbuilduser/Library/Developer/Xcode/DerivedData/ModuleCache/28BJBFDGVGZZ3/UIKit-1V5UHAPTOD24G.pcm: No such file or directorywhile processing /Users/lk/VueNS/dist/platforms/ios/internal/TKLiveSync/TKLiveSync(TKLiveSync.o):
warning: /Users/nsbuilduser/Library/Developer/Xcode/DerivedData/ModuleCache/2DKXPQ92SAISO/UIKit-1V5UHAPTOD24G.pcm: No such file or directory
note: Linking a static library that was built with -gmodules, but the module cache was not found. Redistributable static libraries should never be built with module debugging enabled. The debug experience will bedegraded due to incomplete debug information.
while processing /Users/lk/VueNS/dist/platforms/ios/internal/TKLiveSync/TKLiveSync(TKLiveSync.o):

warning: /Users/nsbuilduser/Library/Developer/Xcode/DerivedData/ModuleCache/2DKXPQ92SAISO/Darwin-38I6DLZ5IH61J.pcm: No such file or directory
note: Linking a static library that was built with -gmodules, but the module cache was not found. Redistributable static libraries should never be built with module debugging enabled. The debug experience will bedegraded due to incomplete debug information.
while processing /Users/lk/VueNS/dist/platforms/ios/internal/TKLiveSync/TKLiveSync(TKLiveSync.o):
warning: /Users/nsbuilduser/Library/Developer/Xcode/DerivedData/ModuleCache/2DKXPQ92SAISO/Foundation-3DFYNEBRQSXST.pcm: No such file or directory
while processing /Users/lk/VueNS/dist/platforms/ios/internal/TKLiveSync/TKLiveSync(TKLiveSync.o):
warning: /Users/nsbuilduser/Library/Developer/Xcode/DerivedData/ModuleCache/28BJBFDGVGZZ3/Darwin-38I6DLZ5IH61J.pcm: No such file or directorywhile processing /Users/lk/VueNS/dist/platforms/ios/internal/TKLiveSync/TKLiveSync(TKLiveSync.o):
warning: /Users/nsbuilduser/Library/Developer/Xcode/DerivedData/ModuleCache/2DKXPQ92SAISO/Dispatch-2LX9MWM6UEPQW.pcm: No such file or directory
while processing /Users/lk/VueNS/dist/platforms/ios/internal/TKLiveSync/TKLiveSync(TKLiveSync.o):
warning: /Users/nsbuilduser/Library/Developer/Xcode/DerivedData/ModuleCache/2DKXPQ92SAISO/ObjectiveC-1RQA2RIXJIE19.pcm: No such file or directory

while processing /Users/lk/VueNS/dist/platforms/ios/internal/TKLiveSync/TKLiveSync(TKLiveSync.o):
warning: /Users/nsbuilduser/Library/Developer/Xcode/DerivedData/ModuleCache/28BJBFDGVGZZ3/Foundation-3DFYNEBRQSXST.pcm: No such file or directory
while processing /Users/lk/VueNS/dist/platforms/ios/internal/TKLiveSync/TKLiveSync(TKLiveSync.o):
warning: /Users/nsbuilduser/Library/Developer/Xcode/DerivedData/ModuleCache/28BJBFDGVGZZ3/Dispatch-2LX9MWM6UEPQW.pcm: No such file or directory
while processing /Users/lk/VueNS/dist/platforms/ios/internal/TKLiveSync/TKLiveSync(TKLiveSync.o):
warning: /Users/nsbuilduser/Library/Developer/Xcode/DerivedData/ModuleCache/28BJBFDGVGZZ3/ObjectiveC-1RQA2RIXJIE19.pcm: No such file or directory
Project successfully built.

npm run build:android 'throws an error'

From @nyitithania on April 27, 2018 4:41

Am trying to do a production build for internal testing, put the APK in the play store for easy sharing. tried to do an npm clean and npm install later and still no changes.

npm run watch:android works fine but i get an error in between

---------------------------- npm run watch:android OUTPUT STARTS HERE ------------------------------------

[email protected] watch:android /home/antony/MyApps/Mobile/AdminApp
npm run watch -- --env.android

[email protected] watch /home/antony/MyApps/Mobile/AdminApp
webpack --watch --env.tnsAction run "--env.android"

info: Copying NativeScript plugins to template dependencies...
info: Preparing NativeScript application from template...
npm WARN agent@ No repository field.
npm WARN agent@ license should be a valid SPDX license expression

info: Bundling application for android...

Webpack is watching the files…

Executing post-build scripts

ERROR in ./node_modules/got/index.js
Module not found: Error: Can't resolve 'electron' in '/home/antony/MyApps/Mobile/AdminApp/node_modules/got'
@ ./node_modules/got/index.js 91:20-39
@ ./node_modules/vue-resource/dist/vue-resource.esm.js
@ ./src/store/index.js
@ ./src/main.js

ERROR in app.android.js from UglifyJs
Invalid assignment [app.android.js:18486,40]
info: Running NativeScript application...
Searching for devices...
Preparing project...
Project successfully prepared (Android)
Refreshing application...
Successfully synced application org.nativescript.application on device emulator-5554.

------------------------- npm run build:android OUTPUT STARTS HERE ---------------------------------------
^Cantony@cctv-t:~/MyApps/Mobile/AdminApp$ npm run build:android

[email protected] build:android /home/antony/MyApps/Mobile/AdminApp
npm run build -- --env.android

[email protected] build /home/antony/MyApps/Mobile/AdminApp
webpack --env.tnsAction build "--env.android"

info: Bundling application for android...
Executing post-build scripts

ERROR in app.android.js from UglifyJs
Invalid assignment [app.android.js:18486,40]
info: Building NativeScript application...
Preparing project...
Project successfully prepared (android)
Building project...
Gradle build...
+ applying user-defined configuration from /home/antony/MyApps/Mobile/AdminApp/dist/app/App_Resources/Android/app.gradle
+ add include.gradle from /home/antony/MyApps/Mobile/AdminApp/dist/node_modules/nativescript-fontawesome/platforms/android/include.gradle
+ applying plugin configuration from /home/antony/MyApps/Mobile/AdminApp/dist/platforms/android/app/build/configurations/nativescript-fontawesome/include.gradle
+ adding nativescript runtime package dependency: nativescript-optimized
+ adding aar plugin dependency: /home/antony/MyApps/Mobile/AdminApp/dist/node_modules/nativescript-ui-sidedrawer/platforms/android/TNSSideDrawer-release.aar
+ adding aar plugin dependency: /home/antony/MyApps/Mobile/AdminApp/dist/node_modules/nativescript-ui-core/platforms/android/TNSCore-release.aar
+ adding aar plugin dependency: /home/antony/MyApps/Mobile/AdminApp/dist/node_modules/tns-core-modules-widgets/platforms/android/widgets-release.aar
false
Running full build
Project successfully built.
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] build: webpack --env.tnsAction build "--env.android"
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /home/antony/.npm/_logs/2018-04-27T04_13_39_571Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] build:android: npm run build -- --env.android
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] build:android script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /home/antony/.npm/_logs/2018-04-27T04_13_39_704Z-debug.log

---------------------------------------------- PACKAGE.JSON --------------------------------------------------------

{
"name": "agent",
"version": "1.0.0",
"description": "My description",
"author": "my name",
"license": "Creative Commons (CC)",
"scripts": {
"build": "webpack --env.tnsAction build",
"build:android": "npm run build -- --env.android",
"build:ios": "npm run build -- --env.ios",
"debug": "webpack --watch --env.tnsAction debug",
"debug:android": "npm run debug -- --env.android",
"debug:ios": "npm run debug -- --env.ios",
"watch": "webpack --watch --env.tnsAction run",
"watch:android": "npm run watch -- --env.android",
"watch:ios": "npm run watch -- --env.ios",
"clean": "rimraf dist"
},
"dependencies": {
"nativescript-exit": "^1.0.1",
"nativescript-fonticon": "^1.1.1",
"nativescript-theme-core": "^1.0.4",
"nativescript-toast": "^1.4.6",
"nativescript-ui-sidedrawer": "^4.0.0",
"nativescript-vue": "^1.3.1",
"tns-core-modules": "~3.4.1",
"vue-resource": "^1.5.0",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.6.1",
"copy-webpack-plugin": "^4.5.1",
"css-loader": "^0.28.11",
"extract-text-webpack-plugin": "^3.0.2",
"fs-extra": "^5.0.0",
"nativescript-vue-externals": "^0.1.2",
"nativescript-vue-loader": "^0.1.5",
"nativescript-vue-target": "^0.1.0",
"nativescript-vue-template-compiler": "^1.3.1",
"node-sass": "^4.7.2",
"ns-vue-loader": "^0.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"rimraf": "^2.6.2",
"sass-loader": "^6.0.7",
"vue-template-compiler": "^2.5.16",
"webpack": "^3.11.0",
"webpack-synchronizable-shell-plugin": "0.0.7",
"winston-color": "^1.0.0"
}
}

Copied from original issue: nativescript-vue/nativescript-vue#209

IOS or Android specific styles?

Hello,

How do I create scss styles that are only for IOS or Android?

Cheers

Gradle build output hidden when running application

From @cavatron on March 16, 2018 3:34

After following the quickstart, I tried to add a jar file to the gradle build, however, the build fails without much explanation.

Here is my <project-root>/template/app/App_Resources/Android/app.gradle file (where I assume I should be adding native Android dependencies)

// Add your native dependencies here:
android {
  defaultConfig {  
    generatedDensities = []
    applicationId = "__PACKAGE__"
  }
  aaptOptions {  
    additionalParameters "--no-version-vectors"  
  }  
} 

dependencies {
  // This is just an example. I am unable to add any library without gradle build failing
  compile 'org.apache.logging.log4j:log4j-api:2.10.0'
}

I have tried running tns run android --log trace with no luck. It does not show gradle errors.

Here is the output of running npm run watch:android (the command I am using when the error occurs)

info: Copying NativeScript plugins to template dependencies...
info: Preparing NativeScript application from template...npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN tns-vue-test@ No repository field.

info: Bundling application for android...

Webpack is watching the files…

Executing post-build scripts
info: Running NativeScript application...
Searching for devices...
Copying template files...
Installing tns-android
Installing  tns-android
+ [email protected]
added 1 package in 0.956s
Project successfully created.
Preparing project...
Successfully prepared plugin nativescript-theme-core for android.
Successfully prepared plugin nativescript-vue for android.
Successfully prepared plugin tns-core-modules for android.
Successfully prepared plugin tns-core-modules-widgets for android.
Project successfully prepared (Android)
Building project...
Gradle build...
         + applying user-defined configuration from /home/cavatron/Repositories/tns-vue-test/dist/app/App_Resources/Android/app.gradle
         + adding nativescript runtime package dependency: nativescript-optimized
         + adding aar plugin dependency: /home/cavatron/Repositories/tns-vue-test/dist/node_modules/tns-core-modules-widgets/platforms/android/widgets-release.aar
false
Unable to apply changes on device: emulator-5554. Error is: Command ./gradlew failed with exit code 1.

Is there a way to make the Gradle output more verbose? When building a NativeScript plugin from the plugin seed, Gradle shows the full output, which is why I am posting the issue here.

Copied from original issue: nativescript-vue/nativescript-vue#139

Failed to find module "nativescript-ui-siderawer"

I tried to use the https://play.nativescript.org/?template=play-vue&id=AWZeYG&v=5 example in the vue-cli-template

I installed the plugin
tns plugin add nativescript-ui-sidedrawer

in the main.js I have

Vue.registerElement("RadSideDrawer", () => require("nativescript-ui-sidedrawer/vue") ); // .RadSideDrawer
import Vue from 'nativescript-vue';
import Home from './components/Home';
import SettingsPage from './components/SettingsPage';
import store from './store';
import './styles.scss';

I got errors, then I changed
require("nativescript-vue").registerElement("RadSideDrawer", () => require("nativescript-ui-sidedrawer").RadSideDrawer);

//require("nativescript-ui-sidedrawer/vue/side-drawer-vue-directives") import RadSideDrawer from "nativescript-ui-sidedrawer/vue/side-drawer-vue-directives";

I start the 'Home' component with render: h => h(Home)
could that be the problem?

System.err:
System.err: Error calling module function
System.err:
System.err: Error: com.tns.NativeScriptException: Failed to find module: "nativescript-ui-sidedrawer", relative to: app/tns_modules/
System.err:     com.tns.Module.resolvePathHelper(Module.java:146)
System.err:     com.tns.Module.resolvePath(Module.java:55)
System.err:     com.tns.Runtime.runModule(Native Method)
System.err:     com.tns.Runtime.runModule(Runtime.java:542)
System.err:     com.tns.Runtime.run(Runtime.java:534)
System.err:     com.tns.NativeScriptApplication.onCreate(NativeScriptApplication.java:21)
System.err:     android.app.Instrumentation.callApplicationOnCreate(Instrumentation.java:1122)
System.err:     android.app.ActivityThread.handleBindApplication(ActivityThread.java:6517)
System.err:     android.app.ActivityThread.-wrap2(Unknown Source:0)
System.err:     android.app.ActivityThread$H.handleMessage(ActivityThread.java:1963)
System.err:     android.os.Handler.dispatchMessage(Handler.java:108)
System.err:     android.os.Looper.loop(Looper.java:166)
System.err:     android.app.ActivityThread.main(ActivityThread.java:7425)
System.err:     java.lang.reflect.Method.invoke(Native Method)
System.err:     com.android.internal.os.Zygote$MethodAndArgsCaller.run(Zygote.java:245)
System.err:     com.android.internal.os.ZygoteInit.main(ZygoteInit.java:921)
System.err: File: "<unknown>, line: 1, column: 265

Chrome dev tools shows nothing

I am finding it pretty hard to debug, as the emulator do not open the NativeScript app if there is an error and when I run npm debug:ios copy/paste link in chrome and get nothing and Termail logs end with Backend socket closed

Don't let webpack refresh application if an error is found.

Is there a way to pause webpack so that it doesn't refresh the application if an error is found?

I'm asking this because if I make for example a syntax error, it will get found and be printed in the terminal which is good. However, the app still refreshes and then crashes. On an IOS simulator, this often results in the simulator freezing which is a bit of a pain to get going again. Pausing the build process on error would avoid this hassle.

Cheers :)

background image css with local url does not work as expected

Hi,

When giving an element a background image stored locally, valid CSS syntax seems to not work.

What works:

background-image: ~/images/search.png;

What doesn't work, but imo should:

background-image: url('~/images/search.png');

RFC: Change how externals are handled

Reference: #12 (comment)

My proposal is to mark all dependencies as external. This would mean that in order to make a dependecy bundled (not external) it would have to be moved to devDependencies.

This approach should work for most people, and we can document it in a Optimizations section, where we describe what an external dependency is, how to make something external etc.

I'm open for suggestions, so please leave any feedback here.

npm run watch not working (Windows 10)

When I try to run on android, the process stumbles. Similarly, npm run build.
What logs the console:

...
info: Running NativeScript application...
Searching for devices...
Copying template files...
Installing tns-android
Unable to apply changes on device: 1ed1de2f9804. Error is: Command failed: npm view tns-android dist-tags --json
...

Tried under Mac OS from a friend, both platforms run well.
How can I make it work in Windows?

`npm build:ios` creates a file which references the src

Hi,

So I appear to be seeing a weird issue, not sure if I am doing something stupid (apologies new to NativeScript).

I have taken this project down as described and ran npm run build:ios inside the repo. The file generated in dist/app/app.ios.js doesn't actually contain any transpiled code. Its export is a require of the src.main.js file. Removing the webpack helper functions, I am left with the below:

e.exports=require("/Users/USER/Documents/repos/nativescript-shared-components-spike/nativescript-app/src/main.js")

Is this by design? tns --path dist run ios causes an app crash with the following error file:///Users/USER/Documents/repos/nativescript-shared-components-spike/nativescript-app/src/styles.scss:3:563: JS ERROR SyntaxError: Invalid character: '@'.

Any help would be greatly appreciated.

Lack of documentation on how the scss is parsed

Can't seem to find any documentation / source code which process the default styles.scss. Would be good if there's documentation for it.

stuck on Running NativeScript application...

My application was working fine, but when I had to reinstall nodejs and npm and it stopped working. When I run

npm run watch:ios

npm run watch:android

it will begin to compile the code, but when it gets to "info: Running NativeScript application..." the compiler gets stuck. I have let it compile for almost 20 minutes and nothing happens.

npm v5.6.0
node v8.11.2

> [email protected] watch:ios /Users/shawnlegge/Projects/nativescript/TestVueApp
> npm run watch -- --env.ios


> [email protected] watch /Users/shawnlegge/Projects/nativescript/TestVueApp
> webpack --watch --env.tnsAction run "--env.ios"

info: Copying NativeScript plugins to template dependencies...
info: Preparing NativeScript application from template...
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN vueapp@ No repository field.

info: Bundling application for ios...

Webpack is watching the files…

Executing post-build scripts
info: Running NativeScript application...

Typescript support

More precisely, the option at start to elect (y/n) to have typescript supported in javascript compilation and in the .vue templates.

ES6 support

Is there any plan to support ES6 using babel?

ListView Black Screen on iOS

Hi guys, first off great work on what you've put together. Im getting a strange crash on iOS 11.3 for all devices.

My ENV

tns 4.0.0
nativescript-vue: 1.3.1 with router
Mac OS: 10.13.3
Xcode: 9

Description of Crash

I'm pushing items onto a ListView as per the tutorial page on the docs. Adding list items works just fine, but the moment you tap on an item the screen goes black and there is no error on the CLI. However when i monitor the debug console i get the following error:

Apr 24 13:31:12 Warrens-MacBook-Pro com.apple.CoreSimulator.SimDevice.337E6BA6-601D-49E2-844A-B7B3F051194B[58922] (UIKitApplication:za.co.billow.co.chat[0x7b26][58946][62883]): Service exited due to signal: Segmentation fault: 11 sent by exc handler[0]
Apr 24 13:31:15 Warrens-MacBook-Pro com.apple.CoreSimulator.SimDevice.337E6BA6-601D-49E2-844A-B7B3F051194B[58922] (com.apple.securityuploadd): Service only ran for 5 seconds. Pushing respawn out by 5 seconds.

Code

<template>
 <Page class="page">
      <ActionBar title="My Tasks" class="action-bar" />
      
      <TabView height="100%">
        <TabViewItem title="To Do">
          <!-- Positions an input field, a button, and the list of tasks in a grid. -->
          <StackLayout orientation="vertical" width="100%" height="100%">
            <GridLayout columns="3*,*" rows="auto" width="100%">
              <TextField row="0" col="0" v-model="textFieldValue" hint="Enter text..." editable="true" @returnPress="onButtonTap" /> <!-- Configures the text field and ensures that pressing Return on the keyboard produces the same result as tapping the button. -->
              <Button row="0" col="1" text="Add task" @tap="onButtonTap" />
            </GridLayout>
            <ListView for="todo in todos" @itemTap="onItemTap">
              <v-template>
                <StackLayout>
                  <Label :text="todo.name" />
                </StackLayout>
              </v-template>
            </ListView>
          </StackLayout> 
        </TabViewItem>

        <TabViewItem title="Completed">
          <Label text="This tab will list completed tasks for tracking." textWrap="true" />
        </TabViewItem>
      </TabView>

    </Page>
</template>
<script>
export default {
  data() {
    return {
      todos: [],
      textFieldValue: "",
    }
  },
  methods: {
    onItemTap: function (item) {
      console.log(item.name); // Logs tapped tasks in the console for debugging.
    },
    onButtonTap() {
      console.log("New task added: " + this.textFieldValue + "."); // Logs the newly added task in the console for debugging.
      this.todos.unshift({ name: this.textFieldValue }); // Adds tasks in the ToDo array. Newly added tasks are immediately shown on the screen. 
      this.textFieldValue = ""; // Clears the text field so that users can start adding new tasks immediately.
    },
  },
};
</script>

Gif showing crash

Working with Plugins

Trying to test out the camera plugin and I found that following the documentation

import { Image } from "ui/image";

doesnt work...

error : JS ERROR Error: Could not find module './image-common'. Computed path '/Users/aaronsaunders/Library/Developer/CoreSimulator/Devices/A5263510-03D1-4596-A2E4-3E998D534310/data/Containers/Bundle/Application/D7E9BE61-5F1F-4AB3-AEF9-26653AEC1FCA/dist.app/app/image-common'.

you have to actually specify the specific path for the module including the tns-core-modules.. So this works; Is this the expected behavior

import { Image } from "tns-core-modules/ui/image";

`npm run watch` producing errors on a clean install? - Module build failed

npm run watch producing errors on a clean install? I cannot successfully run the new project app due to this issue.

OS: MacOs
node: v9.5.0
npm: v5.6.0

ERROR in './src/components/HelloWorld.vue'
Module build failed: Error:

Vue packages version mismatch:

This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.

Error on start app: JS ERROR SyntaxError: Invalid character: '@'

I get an error on start app:

JavaScript error:
file:///Users/mario/nativescript-test/src/styles.scss:3:563: JS ERROR SyntaxError: Invalid character: '@'

Full log:

❯ npm run watch:ios

> [email protected] watch:ios /Users/mario/nativescript-test
> npm run watch -- --env.ios


> [email protected] watch /Users/mario/nativescript-test
> webpack --watch --env.tnsAction run "--env.ios"

info: Copying NativeScript plugins to template dependencies...
info: Preparing NativeScript application from template...
npm WARN nativescript-test@ No repository field.

info: Bundling application for ios...

Webpack is watching the files…

Executing post-build scripts
info: Running NativeScript application...
Searching for devices...
Copying template files...
Installing tns-ios
Installing  tns-ios
+ [email protected]
added 1 package from 1 contributor in 1.954s
Project successfully created.
Preparing project...
Successfully prepared plugin nativescript-theme-core for ios.
Successfully prepared plugin nativescript-vue for ios.
Successfully prepared plugin tns-core-modules for ios.
Successfully prepared plugin tns-core-modules-widgets for ios.
Project successfully prepared (iOS)
Building project...
Xcode build...
=== BUILD TARGET dist OF PROJECT dist WITH CONFIGURATION Debug ===
while processing while processing /Users/mario/nativescript-test/dist/platforms/ios/internal/TKLiveSync/TKLiveSync(TKLiveSync.o)/Users/mario/nativescript-test/dist/platforms/ios/internal/TKLiveSync/TKLiveSync(TKLiveSync.o):
:
warning: warning: /Users/nsbuilduser/Library/Developer/Xcode/DerivedData/ModuleCache/28BJBFDGVGZZ3/UIKit-1V5UHAPTOD24G.pcm/Users/nsbuilduser/Library/Developer/Xcode/DerivedData/ModuleCache/2DKXPQ92SAISO/UIKit-1V5UHAPTOD24G.pcm: No such file or directory
: No such file or directory
note: Linking a static library that was built with -gmodules, but the module cache was not found.  Redistributable static libraries should never be built with module debugging enabled.  The debug experience will be degraded due to incomplete debug information.
note: Linking a static library that was built with -gmodules, but the module cache was not found.  Redistributable static libraries should never be built with module debugging enabled.  The debug experience will be degraded due to incomplete debug information.
while processing /Users/mario/nativescript-test/dist/platforms/ios/internal/TKLiveSync/TKLiveSync(TKLiveSync.o):
warning: /Users/nsbuilduser/Library/Developer/Xcode/DerivedData/ModuleCache/2DKXPQ92SAISO/Darwin-38I6DLZ5IH61J.pcm: while processing No such file or directory/Users/mario/nativescript-test/dist/platforms/ios/internal/TKLiveSync/TKLiveSync(TKLiveSync.o)
:
warning: /Users/nsbuilduser/Library/Developer/Xcode/DerivedData/ModuleCache/28BJBFDGVGZZ3/Darwin-38I6DLZ5IH61J.pcm: No such file or directory
while processing /Users/mario/nativescript-test/dist/platforms/ios/internal/TKLiveSync/TKLiveSync(TKLiveSync.o):
warning: /Users/nsbuilduser/Library/Developer/Xcode/DerivedData/ModuleCache/2DKXPQ92SAISO/Foundation-3DFYNEBRQSXST.pcm: No such file or directory
while processing /Users/mario/nativescript-test/dist/platforms/ios/internal/TKLiveSync/TKLiveSync(TKLiveSync.o):
warning: /Users/nsbuilduser/Library/Developer/Xcode/DerivedData/ModuleCache/28BJBFDGVGZZ3/Foundation-3DFYNEBRQSXST.pcm: No such file or directory
while processing /Users/mario/nativescript-test/dist/platforms/ios/internal/TKLiveSync/TKLiveSync(TKLiveSync.o):
warning: /Users/nsbuilduser/Library/Developer/Xcode/DerivedData/ModuleCache/2DKXPQ92SAISO/Dispatch-2LX9MWM6UEPQW.pcm: while processing No such file or directory/Users/mario/nativescript-test/dist/platforms/ios/internal/TKLiveSync/TKLiveSync(TKLiveSync.o)
:
warning: /Users/nsbuilduser/Library/Developer/Xcode/DerivedData/ModuleCache/28BJBFDGVGZZ3/Dispatch-2LX9MWM6UEPQW.pcm: No such file or directory
while processing /Users/mario/nativescript-test/dist/platforms/ios/internal/TKLiveSync/TKLiveSync(TKLiveSync.o):
warning: /Users/nsbuilduser/Library/Developer/Xcode/DerivedData/ModuleCache/2DKXPQ92SAISO/ObjectiveC-1RQA2RIXJIE19.pcm: while processing No such file or directory/Users/mario/nativescript-test/dist/platforms/ios/internal/TKLiveSync/TKLiveSync(TKLiveSync.o)
:
warning: /Users/nsbuilduser/Library/Developer/Xcode/DerivedData/ModuleCache/28BJBFDGVGZZ3/ObjectiveC-1RQA2RIXJIE19.pcm: No such file or directory
Project successfully built.
Installing...
Successfully installed on device with identifier '50576C1B-99DC-4775-BEAF-B1ECA997FA56'.
Successfully transferred all files.
Refreshing application...
Successfully synced application org.nativescript.application on device 50576C1B-99DC-4775-BEAF-B1ECA997FA56.
***** Fatal JavaScript exception - application has been terminated. *****
Native stack trace:
1   0x10274d724 -[TNSRuntime executeModule:referredBy:]
2   0x10222c691 main
3   0x107dbbd81 start
JavaScript stack trace:
1   @file:///Users/mario/nativescript-test/src/styles.scss:3:563
2   promiseReactionJob@[native code]
3   require@[native code]
4   @file:///app/app.js:1:563
5   e@file:///app/app.js:1:175
6   @file:///app/app.js:1:522
7   anonymous@file:///app/app.js:1:530
8   evaluate@[native code]
9   moduleEvaluation@[native code]
10  @[native code]
11  promiseReactionJob@[native code]
JavaScript error:

I remove SCSS imports then I get a new error:

JavaScript error:
file:///app/app.js:1:563: JS ERROR Error: Could not find module 'vue-router'. Computed path '/Users/mario/Library/Developer/CoreSimulator/Devices/50576C1B-99DC-4775-BEAF-B1ECA997FA56/data/Containers/Bundle/Application/75662F07-41B2-4628-88CA-7B60EAF8CEE5/dist.app/app/tns_modules/vue-router'.

Its like Webpack is not running or the files aren't being processing...

Any idea?

npm run watch:android not picking up on changes

Hey all,

First of all, fantastic work on this template. I tried it out today for the first time and I’m really enjoying this workflow. I did however hit one big problem.

Steps:

Run npm run watch:android.
Change a file in the project. (I’ve tried .vue files and .scss files.)

Expected

The Android app refreshes, and the updates are in place.

Actual

The Android app refreshes, but no updates have occurred.

Notes

This same workflow works fine on iOS.
The app does refresh, meaning the watcher is for sure detecting the change.
If I use npm run clean and then npm run watch:android again I see my changes. But I have to keep using npm run clean after every update to continue seeing my changes.

Any help on this would be appreciated. Thanks!

RFC: provide deprecation path for npm run commands in 0.3.0

I am following development of the vue-cli-template, and I am using the 0.3.0 branch. In this branch, the npm run commands have changed (npm run watch, npm build:), and although they seem to me as a better UI, the change is breaking compatibility with what the community expects (in tutorials, slack advice, etc)

What do you think about keeping compatibility with the the old run commands, accompanied by a deprecation warning?

This would allow integration in master without breaking anybody.

style tag not parsed?

It seems to me that the <style> tag in .vue files are not parsed? Is there any way to make that happen?

For example on my test installation the HelloWorld.vue does not use the styles indicated.

Running app on ios

From @gathumartins on April 10, 2018 9:30

when I run npm run watch:ios
the process begins and opens up iOS simulator but the app isn't installed can't be viewed on iOS simulator.

Copied from original issue: nativescript-vue/nativescript-vue.org#91

Icon font not working

Even with the simpliest setting.

You can use icon fonts with NativeScript by combining a class with a unicode reference in the view:

styles.scss

.fa {
  font-family: FontAwesome;
}

view
<Label class="fa" text="\uf293"></Label>

Nothing gets displayed

nativescript-vue / vue-cli-template Goto Github PK

vue-cli-template's Introduction

NativeScript-Vue3 RC

Quick start

Vue Devtools

Issues

Looking for V2?

vue-cli-template's People

Contributors

Stargazers

Watchers

Forkers

vue-cli-template's Issues

Version

Reproduction link

Platform and OS info

Steps to reproduce

What is expected?

What is actually happening?

Version

Reproduction link

Platform and OS info

Steps to reproduce

What is expected?

What is actually happening?

Steps:

Expected

Actual

Notes

Recommend Projects

Recommend Topics

Recommend Org

Jobs