Vue-carousel: Gridsome build broken

[h2jose]

Hi there, i'm using Gridsome v0.6.4 and vue-carousel v0.18.0, with gridsome develop this work fine, but when i trying gridsome build, i get this error:

Failed to render /                                                            
ReferenceError: window is not defined
    at Object.220 (node_modules/vue-carousel/dist/vue-carousel.min.js:6:202)
    at __webpack_require__ (webpack/bootstrap:25:0)
    at Module.222 (assets/js/page--src--pages--index-vue.d02b4562.js:109:24)
    at __webpack_require__ (webpack/bootstrap:25:0)

I used this configuration:

<script>
import {Carousel,Slide} from 'vue-carousel'

export default {
  data() {
    return { /* data properties here */ }
  },
  components: {
    Carousel,
    Slide
  }
}
</script>

[h2jose]

I found the solution, the vue-carousel does not support SSR, the correctly use is:

<script>
  export default {
    name: 'Index',
    components: {
      Carousel: () =>
        import ('vue-carousel')
        .then(m => m.Carousel)
        .catch(),
      Slide: () =>
        import ('vue-carousel')
        .then(m => m.Slide)
        .catch()
    },
  }
</script>

[h2jose]

HI, remember vue-carousel doesn't support SSR, you must put
tag, ex:

TLR;:
https://gridsome.org/docs/assets-scripts#without-ssr-support

I hope this helps you.

... @h2jose

On Tue, Jun 18, 2019 at 1:12 PM Sergey Filimonov [e-mail]
wrote:

@h2jose https://github.com/h2jose hi! I'm also trying to get it working
with Gridsome but the solution above didn't work for me.

Could you tell me where my mistake is?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/SSENSE/vue-carousel/issues/449?email_source=notifications&email_token=AALJZTIOWIYBSN3XPJVKGVDP3EJQBA5CNFSM4HW2IYXKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODX7KJYI#issuecomment-503227617,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AALJZTPPF7IDTFRQPCILJ4TP3EJQBANCNFSM4HW2IYXA
.

[sergeyfilimonov]

@h2jose sorry, I have deleted my comment as I had solved the problem. The problem I was writing about was because of import {Carousel,Slide} from 'vue-carousel' together with:

components: {
      Carousel: () =>
        import ('vue-carousel')
        .then(m => m.Carousel)
        .catch(),
      Slide: () =>
        import ('vue-carousel')
        .then(m => m.Slide)
        .catch()
    },

I mixed two ways of importing the modules. All works well without import {Carousel,Slide} from 'vue-carousel'.

Thanks anyway!

[mklueh]

I found the solution, the vue-carousel does not support SSR, the correctly use is:

<script>
  export default {
    name: 'Index',
    components: {
      Carousel: () =>
        import ('vue-carousel')
        .then(m => m.Carousel)
        .catch(),
      Slide: () =>
        import ('vue-carousel')
        .then(m => m.Slide)
        .catch()
    },
  }
</script>

Does not work in my case. Followed exactly the instructions at https://gridsome.org/docs/assets-scripts/#without-ssr-support

EDIT:

I needed to change the import in main.js to

import VueCarousel from 'vue-carousel/src/index';

and in the affected component

        components: {
            Carousel: () =>
                import ('vue-carousel/src/index')
                    .then(m => m.Carousel)
                    .catch(),
            Slide: () =>
                import ('vue-carousel/src/index')
                    .then(m => m.Slide)
                    .catch()
        },

in order to get it working

[dakshshah96]

This doesn't work anymore.

I've added ClientOnly around my carousel component as well as changed the method of importing. There is a carousel but with weird behaviour — all the slides are on the first page and rest are empty. @h2jose Is this still working for you?

[mjatharvest]

I resolved a similar build issue by dropping vue-carousel and replacing with vue-slick-carousel https://github.com/gs-shop/vue-slick-carousel

[atilacamurca]

I resolved a similar build issue by dropping vue-carousel and replacing with vue-slick-carousel https://github.com/gs-shop/vue-slick-carousel

@mjatharvest did you make any other configuration to make vue-slick-carousel work with gridsome? I'm having troubles on the build phase. Here's a temp link to show my problem https://deploy-preview-156--glossario-friends.netlify.app/

[mjatharvest]

@atilacamurca quick question, did you import the .css for vue-slick-carousel? Missing css would cause it to look broken.

In my main.js file I have the following:

import VueSlickCarousel from 'vue-slick-carousel'
import 'vue-slick-carousel/dist/vue-slick-carousel.css'
// optional style for arrows & dots
import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css'

then later in the same file I add the component so that I can use it globally on any page:

export default function (Vue, { router, head, isClient }) {

  // Set global vue components
  // ...
  Vue.component('VueSlickCarousel', VueSlickCarousel)
 //...

[atilacamurca]

Thank you @mjatharvest, I will try that. The difference from my project is that I import the component on the SFC instead of globally.

[atilacamurca]

I did find why my project doesn't work. It's a problem with gridsome-plugin-tailwindcss, that was purging the css files from vue-slick-carousel. I wrote a whitelistPatterns, something like:

{
  use: 'gridsome-plugin-tailwindcss',
  options: {
    purgeConfig: {
      content: [
        './src/**/*.vue',
        './src/**/*.js',
        './src/**/*.html',
        './src/**/*.md'
      ],
      whitelist: [
        'body',
        'html',
        'img',
        'a'
      ],
      whitelistPatterns: [/^slick-/],
      defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
    },
  }
}

[mjatharvest]

@atilacamurca nice! glad you got it sorted 👍