Netlify Build Error

[rylanharper]

Hey there! Thank you for creating this plugin! I am using the Vue2 version of this (1.2.0) and get the following error in Netlify when I deploy my site:

5:41:12 PM: ReferenceError: document is not defined
5:41:12 PM:     at addStyle (node_modules/vue-marquee-text-component/dist/MarqueeText.common.js:695:0)
5:41:12 PM:     at addStylesToDom (node_modules/vue-marquee-text-component/dist/MarqueeText.common.js:679:0)
5:41:12 PM:     at addStylesClient (node_modules/vue-marquee-text-component/dist/MarqueeText.common.js:633:0)
5:41:12 PM:     at Object.0d86 (node_modules/vue-marquee-text-component/dist/MarqueeText.common.js:145:0)
5:41:12 PM:     at __webpack_require__ (node_modules/vue-marquee-text-component/dist/MarqueeText.common.js:21:0)
5:41:12 PM:     at Object.6edf (node_modules/vue-marquee-text-component/dist/MarqueeText.common.js:1036:0)
5:41:12 PM:     at __webpack_require__ (node_modules/vue-marquee-text-component/dist/MarqueeText.common.js:21:0)
5:41:12 PM:     at Module.fb15 (node_modules/vue-marquee-text-component/dist/MarqueeText.common.js:2042:0)
5:41:12 PM:     at __webpack_require__ (node_modules/vue-marquee-text-component/dist/MarqueeText.common.js:21:0)
5:41:12 PM:     at assets/js/app.02d5eed2.js:2253:18

When I take out the marquee component everything builds just fine. My site also works wonderfully using this on localhost with no errors (if only that were always the case lol).

Here is my marquee component:

<template>
  <div v-if="settings.enabled === true" :style="cssVars" class="hero-banner">
    <g-link :to="settings.link" class="hero-banner__link group">
      <marquee-text
        :repeat="8"
        :duration="16"
        class="hero-banner__marquee"
      >
        <div class="hero-banner__title">
          <h3>{{ settings.text }}</h3>
        </div>
      </marquee-text>
    </g-link>
  </div>
</template>

<script>
// Marquee
import MarqueeText from 'vue-marquee-text-component'

export default {
  name: 'AppBanner',

  components: {
    MarqueeText
  },

  computed: {
    settings() {
      return this.$static.siteSettings.edges[0].node
    },
    cssVars() {
      return {
        '--background-color': this.$static.siteSettings.edges[0].node.color.hex
      }
    }
  }
}
</script>

I am not quite sure what the issue is.. Perhaps it has to do with the data (settings.text) I import into the marquee?

[rylanharper]

This is a repeat of #42 .. I am using Gridsome (Vue static site generator) for my project.

importing the plugin the way @crutchcorn suggested is the fix:

import MarqueeText from 'vue-marquee-text-component/src/components/MarqueeText.vue';