Open nilsi opened 6 years ago
quinnlangille
commented
6 years ago Hey @nilsi, you're getting this error and nothing is breaking on the carousel? Hmm.. Yeah if you could share your how your using the component and your webpack config that would be great
nilsi
commented
6 years ago Yes carousel still working after the reload.
<template>
<carousel ref="carousel" :perPageCustom="[[0, 1], [1024, 2]]" :paginationEnabled="false">
<slide>
<channel-slide :loading="isLoading" :user="shuffledCurators[0]"/>
</slide>
<slide>
<channel-slide :loading="isLoading" :user="shuffledCurators[1]"/>
</slide>
<slide>
<channel-slide :loading="isLoading" :user="shuffledCurators[2]"/>
</slide>
<slide>
<channel-slide :loading="isLoading" :user="shuffledCurators[3]"/>
</slide>
<slide>
<channel-slide :loading="isLoading" :user="shuffledCurators[4]"/>
</slide>
<slide>
<channel-slide :loading="isLoading" :user="shuffledCurators[5]"/>
</slide>
<slide>
<channel-slide :loading="isLoading" :user="shuffledCurators[6]"/>
</slide>
<slide>
<channel-slide :loading="isLoading" :user="shuffledCurators[7]"/>
</slide>
</carousel>
</template>
<script>
import { Carousel, Slide } from 'vue-carousel';
import ChannelSlide from './ChannelSlide.vue';
import ChannelPlaceholder from './ChannelPlaceholder.vue';
export default {
components: {
Carousel,
ChannelSlide,
Slide,
ChannelPlaceholder,
},
data() {
return {
curators: [],
hasShuffled: false,
shuffledCurators: [],
};
},
meteor: {
$subscribe: {
expertUsers: [],
},
curators() {
return Meteor.users.find({
$and: [
{ 'profile.roles': 'curator' },
{ 'profile.addedProducts.3': { $exists: true } },
],
}, { limit: 12 });
},
},
watch: {
curators: function (curators) {
if (curators.length == 12 && !this.hasShuffled) {
this.hasShuffled = true;
this.shuffledCurators = curators.map(a => ({ sort: Math.random(), value: a }))
.sort((a, b) => (a.sort > b.sort ? 1 : -1))
.map(a => a.value);
}
},
},
computed: {
isLoading() {
return !this.hasShuffled;
},
}
};
</script>I don't use webpack. I use MeteorJS which has its own build system.
At first I got two other errors when I reloaded which got relsolved by adding:
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",to my dev dependencies
quinnlangille
commented
6 years ago Your carousel looks fine to me, so it's probably just a build config issue. I've never used meteor so won't be much help there, but you might also need to add babel-preset-stage-1 and babel-preset-stage-2. Doesn't seem like they'll solve the HRM issue, but maybe we'll get lucky.
I'll flag this as help wanted in the mean time :~)
nilsi
commented
6 years ago Thanks, same error when adding babel-preset-stage-1 and babel-preset-stage-2. I will let you know if I find a solution.
Love this library, thanks a lot for the great quality!
I got a problem when HRM is hot reloading my app after I make a change. Im getting the following:
Any idea what I'm doing wrong here? I could share my component also if that helps and maybe my package.js file. Im on 0.7.3 of vue-carousel.
Everything works perfectly well otherwise, just anoying to get these error messages in the console in Chrome.