ReferenceError: document is not defined (nuxt3)

[ktx-drashti]

I am using the following ecosystem:

"nuxt": "3.0.0-rc.4"
"@img-comparison-slider/vue": "^7.6.0"

I have imported the ImgComparisonSlider in the component as below.
I have tried using it without the <client-only> tag as well.

File : myComponent.vue

<template>
  <div class="w-full bg-theme-primary-200 px-2 py-2">
    <client-only>
      <img-comparison-slider
        class="flex justify-center items-center slider-example-opacity-and-size"
        hover="hover"
      >
        <template #first>
          <figure class="before">
            <img
              class="h-72 w-full object-cover"
              :src="imageOne"
              :alt="altOne"
            />
            <figcaption>Before</figcaption>
          </figure>
        </template>

        <template #second>
          <figure class="after">
            <img
              class="h-72 w-full object-cover"
              :src="imageTwo"
              :alt="altTwo"
            />
            <figcaption>After</figcaption>
          </figure>
        </template>
      </img-comparison-slider>
    </client-only>
  </div>
</template>

<script>
import { ImgComparisonSlider } from "@img-comparison-slider/vue";
export default {
  props: {
    imageOne: {
      type: String,
    },
    altOne: {
      type: String,
    },
    imageTwo: {
      type: String,
    },
    altTwo: {
      type: String,
    },
  },
};
</script>

The error I am getting is document is not defined.
Error Log

ReferenceError: document is not defined
    at D:\myProject\node_modules\img-comparison-slider\dist\index.js:1:3640
    at D:\myProject\node_modules\img-comparison-slider\dist\index.js:1:10336
    at Object.<anonymous> (D:\myProject\node_modules\img-comparison-slider\dist\index.js:1:10340)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:190:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:185:25)
    at async Promise.all (index 0)

[sneas]

This answer might solve your problem #88 (comment)

I'm not an expert in Vue, but I'd assume, you'll have to use <ImgComparisonSlider> instead of <img-comparison-slider> after applying the solution above.

[ktx-drashti]

Yes, I've seen that one. But I'm not sure where to include that? In the same component or plugin? Can you please guide me?

[ktx-drashti]

This answer might solve your problem #88 (comment)

I'm not an expert in Vue, but I'd assume, you'll have to use <ImgComparisonSlider> instead of <img-comparison-slider> after applying the solution above.

Thank you.

[sneas]

The entire solution should look like

<template>
  <ImgComparisonSlider hover="hover">
    <figure slot="first" class="before">
      <img
          class="h-72 w-full object-cover"
          src="https://sneas.github.io/img-comparison-slider/demo/images/before.webp"
      />
      <figcaption>Before</figcaption>
    </figure>
    <figure slot="second" class="after">
      <img
          class="h-72 w-full object-cover"
          src="https://sneas.github.io/img-comparison-slider/demo/images/after.webp"
      />
      <figcaption>After</figcaption>
    </figure>
  </ImgComparisonSlider>
</template>

<script lang="ts">
import { defineComponent, defineAsyncComponent } from 'vue'

export default defineComponent({
  name: 'App',
  components: {
    ImgComparisonSlider: defineAsyncComponent(() => import('@img-comparison-slider/vue').then(({ImgComparisonSlider}) => ImgComparisonSlider
    ))
  },
})
</script>

I can see that hover="hover" isn't working in my testing setup. I'm trying to figure out what is the problem.

[ktx-drashti]

Okay thanks, I'm also trying...

[sneas]

I think this is a bug in the Vue implementation of img-comparison-slider. I've just created a new issue #90 . I'm not sure how to solve it right now, so I can't say when the fix will be released.

If dynamic import has solved ReferenceError: document is not defined problem, then the current issue can be closed.

[ktx-drashti]

I think this is a bug in the Vue implementation of img-comparison-slider. I've just created a new issue #90 . I'm not sure how to solve it right now, so I can't say when the fix will be released.

If dynamic import has solved ReferenceError: document is not defined problem, then the current issue can be closed.

No, It has not solved the issue of ReferenceError: document is not defined problem`.

[sneas]

Here is the working example https://github.com/sneas/img-comparison-slider-nuxt
The necessary code is here: https://github.com/sneas/img-comparison-slider-nuxt/blob/main/app.vue

[chikuairi]

In nuxt-config.js, at the plugin part:

plugins: [ {src:'@/plugins/img-comparison-slider', ssr:false} ]
it will be work.