SSR UnhandledPromiseRejectionWarning question

Description

I’m usign “vue-carousel” and setting it up for SSR as shown in the docs (https://gridsome.org/docs/assets-scripts/#without-ssr-support)

<script>
export default {
  metaInfo: {
    title: 'The Vision for 90 North'
  },
  components: {
    Carousel: () =>
      import('vue-carousel')
      .then(m => m.Carousel)
      .catch(),
    Slide: () =>
      import('vue-carousel')
      .then(m => m.Slide)
      .catch()
  },
  data () {
   return {
     modalIndex: 0
   }
 }
}
</script>

Actual result

It’s working ok but I get the following error when running “gridsome build”

Compile assets - 11.7s                                                        a (node:3491) UnhandledPromiseRejectionWarning: TypeError: Cannot read property ‘__esModule’ of undefined
at Re (gridsome/node_modules/gridsome/node_modules/vue/dist/vue.runtime.common.prod.js:6:24010)
at gridsome/node_modules/gridsome/node_modules/vue/dist/vue.runtime.common.prod.js:6:20995
at gridsome/node_modules/gridsome/node_modules/vue/dist/vue.runtime.common.prod.js:6:2394
(node:3491) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:3491) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
(node:3491) UnhandledPromiseRejectionWarning: TypeError: Cannot read property ‘__esModule’ of undefined
at Re (gridsome/node_modules/gridsome/node_modules/vue/dist/vue.runtime.common.prod.js:6:24010)
at gridsome/node_modules/gridsome/node_modules/vue/dist/vue.runtime.common.prod.js:6:20995
at gridsome/node_modules/gridsome/node_modules/vue/dist/vue.runtime.common.prod.js:6:2394
(node:3491) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
(node:3491) UnhandledPromiseRejectionWarning: TypeError: Cannot read property ‘__esModule’ of undefined
at Re (gridsome/node_modules/gridsome/node_modules/vue/dist/vue.runtime.common.prod.js:6:24010)
at gridsome/node_modules/gridsome/node_modules/vue/dist/vue.runtime.common.prod.js:6:20995
at gridsome/node_modules/gridsome/node_modules/vue/dist/vue.runtime.common.prod.js:6:2394
(node:3491) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 3)
(node:3491) UnhandledPromiseRejectionWarning: TypeError: Cannot read property ‘__esModule’ of undefined
at Re (gridsome/node_modules/gridsome/node_modules/vue/dist/vue.runtime.common.prod.js:6:24010)
at gridsome/node_modules/gridsome/node_modules/vue/dist/vue.runtime.common.prod.js:6:20995
at gridsome/node_modules/gridsome/node_modules/vue/dist/vue.runtime.common.prod.js:6:2394
(node:3491) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 4)
(node:3491) UnhandledPromiseRejectionWarning: TypeError: Cannot read property ‘__esModule’ of undefined
at Re (gridsome/node_modules/gridsome/node_modules/vue/dist/vue.runtime.common.prod.js:6:24010)
at gridsome/node_modules/gridsome/node_modules/vue/dist/vue.runtime.common.prod.js:6:20995
at gridsome/node_modules/gridsome/node_modules/vue/dist/vue.runtime.common.prod.js:6:2394
(node:3491) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 5)
Render HTML (12 pages) - 0.45s
Process files (0 files) - 0s
Process images (62 images) - 1.83s

My question is, should I be concerned about these errors, or will I always get some kind of error when building?

Environment

Libs:
- gridsome version: 0.5.8


Browser:
 
For Tooling issues:
- Node version: 10.5.0  
- Mac:  

[osama996]

This is the component VueCarousel where I’m using “vue-carousel”

<template>
  <!-- eslint-disable -->
	<carousel
		:navigation-click-target-size="50"
		:per-page="1"
		:pagination-enabled="false"
		navigation-prev-label="〈"
		navigation-next-label="〉"
		class="mt-2"
		navigation-enabled
		autoplay
		loop
		:autoplay-timeout="4000"
	>
	<!-- eslint-enable -->
    <slide
      :key="partner.name"
      v-for="partner in partners"
    >
      <b-row class="text-center mb-5">
        <b-col
          cols="12"
          col
        >
          <b-img
            :src="partner.photo"
            :alt="`Foto von ${partner.name}`"
            class="photo"
            rounded="circle"
            width="200"
          />
          <span
            v-for="trait in partner.traits"
            :key="trait"
            class="hero-span badge font-weight-normal bg-transparent border badge-pill badge-light p-3 m-1"
          > {{ trait }}</span>
        </b-col>
      </b-row>

      <b-row class="justify-content-center">
        <b-col
          xs="12"
          md="7"
        >
          <h2 class="px-5 text-left">
            {{ partner.name }}
          </h2>
          <p class="px-5 text-left">
            {{ partner.description }}
          </p>
        </b-col>
      </b-row>
    </slide>
  </carousel>
</template>
<script>
export default {
  components: {
    Carousel: () =>
        import('vue-carousel')
          .then(m => m.Carousel)
          .catch(),
    Slide: () =>
        import('vue-carousel')
          .then(m => m.Slide)
          .catch()
  },
  props: {
    partners: {
      type: Object,
      default: () => ({})
    }
  }
}
</script>

And here’s the parent component

<template>
  <section>
    <header>
      <h1>{{ config.title }}</h1>
    </header>
    <div class="decorator" />
    <b-container class="hero-container">
      <ClientOnly>
        <VueCarousel :partners="config.partners" />
      </ClientOnly>
    </b-container>
  </section>
</template>

<script>
import VueCarousel from './VueCarousel'
export default {
  components: { VueCarousel }
}
</script>

[osama996]

What worked with me was that I put vue-carousel in a separate file and then import it and use it like this:

<ClientOnly>
    <Carousel />
</ClientOnly>