Support SSR

[crutchcorn]

Funnily, right after we published v2.1, I migrated my app to use Vite for SSR.

After doing so, I started getting the following errors:

ReferenceError: document is not defined
    at addStyle (C:\Users\crutchcorn\git\Twitch\streampods\node_modules\vue-marquee-text-component\dist\MarqueeText.common.js:779:22)
    at addStylesToDom (C:\Users\crutchcorn\git\Twitch\streampods\node_modules\vue-marquee-text-component\dist\MarqueeText.common.js:763:20)
    at addStylesClient (C:\Users\crutchcorn\git\Twitch\streampods\node_modules\vue-marquee-text-component\dist\MarqueeText.common.js:717:3)
    at Object.e7b3 (C:\Users\crutchcorn\git\Twitch\streampods\node_modules\vue-marquee-text-component\dist\MarqueeText.common.js:2183:14)
    at __webpack_require__ (C:\Users\crutchcorn\git\Twitch\streampods\node_modules\vue-marquee-text-component\dist\MarqueeText.common.js:21:30)
    at Object.c45f (C:\Users\crutchcorn\git\Twitch\streampods\node_modules\vue-marquee-text-component\dist\MarqueeText.common.js:1870:499)
    at __webpack_require__ (C:\Users\crutchcorn\git\Twitch\streampods\node_modules\vue-marquee-text-component\dist\MarqueeText.common.js:21:30)
    at Module.fb15 (C:\Users\crutchcorn\git\Twitch\streampods\node_modules\vue-marquee-text-component\dist\MarqueeText.common.js:2352:74)
    at __webpack_require__ (C:\Users\crutchcorn\git\Twitch\streampods\node_modules\vue-marquee-text-component\dist\MarqueeText.common.js:21:30)
    at C:\Users\crutchcorn\git\Twitch\streampods\node_modules\vue-marquee-text-component\dist\MarqueeText.common.js:85:18

However, if I import the src file itself:

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

Rather than the final build, I get no such errors.

As such, this seems to me like a build setup error.

[EvodiaAut]

Before I released v2.0.1 (yarn link), I included it on 2 other vue3 projects and it worked? Have you tried transpileDependencies?

[crutchcorn]

Were you testing with SSR apps? It worked fine for my app prior to being SSR

I'm using Vite SSR with default @vite/plugin-vue configuration

[leosin]

in nuxt 3 have same issue

[EvodiaAut]

Anyone have an idea why?

[d4rkr3pt0r]

@EvodiaAut @crutchcorn

<client-only>
    <marquee-text>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.
    </marquee-text>
</client-only>
components: {
    MarqueeText: () => import('vue-marquee-text-component'),
},

[EvodiaAut]

@d4rkr3pt0r @crutchcorn Looks like we can close the ticket?

[manniL]

@d4rkr3pt0r @crutchcorn Looks like we can close the ticket?

I think an ESM build would be sufficient to avoid this error. When using the Vue file itself for importing, no issue arises. See this codesandbox

Old: I would suggest to change the logic so platform-specifc APIs are only access when rendering the component, not already during the import! ☺️ See my post for more info.