Open monkeymonk opened 6 years ago
I couldn't even get the plugin to work. I am getting the error:
ERROR in ../node_modules/nativescript-slider/slider-common.js
Module not found: Error: Can't resolve 'ui/core/proxy' in '/Users/tralves/code/ns-vue/test-slider/node_modules/nativescript-slider'
Any ideas? I am on NS 4.2.0.
@tralves I am on NativeScript 4.2.2. I did nothing more than installing the dependency so I guess it should work... Hav you tried to clear and re-build the whole project ? With nativescript-cli, this is required.
@monkeymonk the event is firing for me. I recently created my project with nativescript-vue 2, and my version of Nativescript is 4.2.
Here is my code if it helps:
// app.js
Vue.registerElement('Slide', () => require('nativescript-slides').Slide);
Vue.registerElement('SlideContainer', () => require('nativescript-slides').SlideContainer);
//Component.vue
<template>
<Page>
<SlideContainer id="slides" pageIndicators="true" @changed="onChange">
<Slide class="slide-1">
<Label text="This is Panel 1" />
</Slide>
<Slide class="slide-2">
<Label text="This is Panel 2" />
</Slide>
<Slide class="slide-3">
<Label text="This is Panel 3" />
</Slide>
<Slide class="slide-4">
<Label text="This is Panel 4" />
</Slide>
<Slide class="slide-5">
<Label text="This is Panel 5" />
</Slide>
</SlideContainer>
</Page>
</template>
<script>
export default {
methods: {
onChange() {
console.log('onChange');
}
},
}
</script>
<style lang="scss">
.slide-1{
background-color: darkslateblue;
}
.slide-2{
background-color: darkcyan;
}
.slide-3{
background-color: darkgreen;
}
.slide-4{
background-color: darkgoldenrod;
}
.slide-5{
background-color: darkslategray;
}
Label{
text-align: center;
width: 100%;
font-size: 35;
margin-top: 35;
}
</style>
Hello @atrunelle , I have updated to nativescript-vue@^2.0.0
but cannot make it works as expected.
The console.log
is never reached...
My template
look like this:
<template>
<Page ref="page" :class="pageClasses()" actionBarHidden="true" backgroundSpanUnderStatusBar="true">
<StackLayout class="wrapper">
<AbsoluteLayout>
<ScrollView class="page-content" top="0" height="100%" width="100%" v-if="page">
<StackLayout>
<AbsoluteLayout class="carousel" v-if="slider.length">
<SlideContainer ref="slider" class="carousel-slides" loop="true" top="0" height="100%" width="100%" pageIndicators="true" @changed="updateIndicators">
<Slide :class="'carousel-slide slide-' + article.id"
v-for="article in slider"
@tap="openArticle(article)"
:key="article.id"
>
<AbsoluteLayout class="article-thumb"
v-bind:key="article.id"
:style="getBackgroundImage(article.meta)"
>
<AbsoluteLayout class="article-overlay"></AbsoluteLayout>
<FlexboxLayout class="article-title" justifyContent="space-around" top="0" height="100%" width="100%">
<Label :text="article.title" textWrap="true" alignSelf="flex-end"></Label>
</FlexboxLayout>
</AbsoluteLayout>
</Slide>
</SlideContainer>
</AbsoluteLayout>
</StackLayout>
</ScrollView>
<GridLayout class="action-bar" columns="50,*,50" top="0" width="100%">
<!--// ... //-->
</GridLayout>
</AbsoluteLayout>
</StackLayout>
</Page>
</template>
@atrunelle I even tried to use your component "as it" and it still not reach the console.log...
@monkeymonk I tried again and I can still reach the console.log, even with your code (also I removed all the dynamic data). Are all of your slides displayed properly? Might be something in your for loop as I replaced it with static component to test (I kept the same components though).
FYI, realised I forgot the <Page>
component in my example above so added it back.
It's hard to tell what could be wrong without the full file/repo
I am unable use SlideContainers
methods. I am getting TypeError: Cannot read property 'index' of undefined
.
<slide-container ref="appSlideContainer">
<!-- Slides -->
</slide-container >
this.$refs.appSlideContainer.nativeView.nextSlide()
I am unable use
SlideContainers
methods. I am gettingTypeError: Cannot read property 'index' of undefined
.<slide-container ref="appSlideContainer"> <!-- Slides --> </slide-container >
this.$refs.appSlideContainer.nativeView.nextSlide()
Detailed exception
System.err: java.lang.RuntimeException: Unable to start activity ComponentInfo{com.saikksub.photoid/com.tns.NativeScriptActivity}: com.tns.NativeScriptException:
System.err: Calling js method onCreate failed
System.err:
System.err: TypeError: Cannot read property 'index' of undefined
System.err: File: "file:///data/data/com.saikksub.photoid/files/app/vendor.js, line: 29300, column: 6
System.err:
System.err: StackTrace:
System.err: Frame: function:'SlideContainer.triggerCancelEvent', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 24801, column: 41
System.err: Frame: function:'SlideContainer.nextSlide', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 24415, column: 12
System.err: Frame: function:'mounted', file:'file:///data/data/com.saikksub.photoid/files/app/bundle.js', line: 253, column: 57
System.err: Frame: function:'callHook', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 30351, column: 21
System.err: Frame: function:'insert', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 37548, column: 7
System.err: Frame: function:'invokeInsertHook', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 30933, column: 28
System.err: Frame: function:'patch', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 31158, column: 5
System.err: Frame: function:'Vue._update', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 30100, column: 19
System.err: Frame: function:'updateComponent', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 30212, column: 10
System.err: Frame: function:'get', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 29295, column: 25
System.err: Frame: function:'Watcher', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 29282, column: 45
System.err: Frame: function:'mountComponent', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 30218, column: 3
System.err: Frame: function:'push.../node_modules/nativescript-vue/dist/index.js.Vue.$mount', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 38553, column: 10
System.err: Frame: function:'', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 38569, column: 10
System.err: Frame: function:'Observable.notify', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 43034, column: 15
System.err: Frame: function:'notifyLaunch', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 64979, column: 15
System.err: Frame: function:'ActivityCallbacksImplementation.setActivityContent', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 64910, column: 20
System.err: Frame: function:'ActivityCallbacksImplementation.onCreate', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 64726, column: 10
System.err: Frame: function:'NativeScriptActivity.onCreate', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 62079, column: 21
System.err:
System.err: at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2946)
System.err: at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:3081)
System.err: at android.app.servertransaction.LaunchActivityItem.execute(LaunchActivityItem.java:78)
System.err: at android.app.servertransaction.TransactionExecutor.executeCallbacks(TransactionExecutor.java:108)
System.err: at android.app.servertransaction.TransactionExecutor.execute(TransactionExecutor.java:68)
System.err: at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1838)
System.err: at android.os.Handler.dispatchMessage(Handler.java:106)
System.err: at android.os.Looper.loop(Looper.java:193)
System.err: at android.app.ActivityThread.main(ActivityThread.java:6715)
System.err: at java.lang.reflect.Method.invoke(Native Method)
System.err: at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)
System.err: at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:911)
System.err: Caused by: com.tns.NativeScriptException:
System.err: Calling js method onCreate failed
System.err:
System.err: TypeError: Cannot read property 'index' of undefined
System.err: File: "file:///data/data/com.saikksub.photoid/files/app/vendor.js, line: 29300, column: 6
System.err:
System.err: StackTrace:
System.err: Frame: function:'SlideContainer.triggerCancelEvent', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 24801, column: 41
System.err: Frame: function:'SlideContainer.nextSlide', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 24415, column: 12
System.err: Frame: function:'mounted', file:'file:///data/data/com.saikksub.photoid/files/app/bundle.js', line: 253, column: 57
System.err: Frame: function:'callHook', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 30351, column: 21
System.err: Frame: function:'insert', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 37548, column: 7
System.err: Frame: function:'invokeInsertHook', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 30933, column: 28
System.err: Frame: function:'patch', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 31158, column: 5
System.err: Frame: function:'Vue._update', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 30100, column: 19
System.err: Frame: function:'updateComponent', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 30212, column: 10
System.err: Frame: function:'get', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 29295, column: 25
System.err: Frame: function:'Watcher', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 29282, column: 45
System.err: Frame: function:'mountComponent', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 30218, column: 3
System.err: Frame: function:'push.../node_modules/nativescript-vue/dist/index.js.Vue.$mount', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 38553, column: 10
System.err: Frame: function:'', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 38569, column: 10
System.err: Frame: function:'Observable.notify', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 43034, column: 15
System.err: Frame: function:'notifyLaunch', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 64979, column: 15
System.err: Frame: function:'ActivityCallbacksImplementation.setActivityContent', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 64910, column: 20
System.err: Frame: function:'ActivityCallbacksImplementation.onCreate', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 64726, column: 10
System.err: Frame: function:'NativeScriptActivity.onCreate', file:'file:///data/data/com.saikksub.photoid/files/app/vendor.js', line: 62079, column: 21
System.err:
System.err: at com.tns.Runtime.callJSMethodNative(Native Method)
System.err: at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1116)
System.err: at com.tns.Runtime.callJSMethodImpl(Runtime.java:996)
System.err: at com.tns.Runtime.callJSMethod(Runtime.java:983)
System.err: at com.tns.Runtime.callJSMethod(Runtime.java:967)
System.err: at com.tns.Runtime.callJSMethod(Runtime.java:959)
System.err: at com.tns.NativeScriptActivity.onCreate(NativeScriptActivity.java:18)
System.err: at android.app.Activity.performCreate(Activity.java:7136)
System.err: at android.app.Activity.performCreate(Activity.java:7127)
System.err: at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1271)
System.err: at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2926)
I am unable to make this work with Nativescript Vue, currently getting this error:
file:///app/vendor.js:303:3148: JS ERROR Error: Module build failed (from ../node_modules/ts-loader/index.js):
Error: Cannot find module 'typescript'
Do I need to install some kind of dependency for typescript?
So to anyone else struggling with this error, I went into the tsconfig.json of nativescript-slides (inside node_modules) and turned off, which seems to have fixed the error. Hardly a solution, but I will make a fork of this project for anyone interested.
"noEmitHelpers": false,
"noEmitOnError": false,
@Reached kind of a round about way to fix it, but I was able to get mine working by deleting the nativescript-slides.ts
file from the node_modules/nativescript-slides directory, I was able to register the component in Vue and it works for me. Not ideal, but maybe something that can work for you too.
UPDATE I was actually able to use the full path on the import and leave the plugin alone without messing with the plugin files. Better option so that way if I need to reinstall the node modules, shouldn't be any issues having to go back in every time and remove the file.
require('../node_modules/nativescript-slides/nativescript-slides.js')
instead of just
require('nativescript-slides')
I am trying to use
nativescript-slide
with Vue. The slider works as expected but I cannot find how to listen for the events.Is someone know how I have to write this to make
doSomething
fire ?