I am recieving "Critical dependency: require function is used in a way in which dependencies cannot be statically extracted friendly-errors 16:21:14" error when using the package scrollMonitor in my nuxt project

plugins/scroll-monitor.js

import Vue from 'vue';
// your imported custom plugin or in this scenario the 'vue-session' plugin
import ScrollMonitor from 'scrollmonitor';

Vue.use(ScrollMonitor);

nuxt.config.js

plugins: [
  '~/plugins/wordpress-api',
  { src: '~/plugins/scroll-monitor.js', ssr: false }

],

build: {
  /*
  ** You can extend webpack config here
  */
 vendor: ['scrollmonitor'],
  extend(config, ctx) {
  }
}

At my index.vue file

let scrollmonitor
if (process.client) {
  scrollmonitor = require('scrollmonitor')
}

More context

Still not working.
I am using new computer, at my old one everything is working fine.

index.vue

<template>
  <div class="index page-padding-top">
    <TheHero
      :scaledUpDot="scaledUpDot"
      :isFirstImageVisible="isFirstImageVisible"
    />
    <ProjectsList :projects="projects" />
  </div>
</template>



<script>
import { mapGetters } from "vuex";

import TheHero from "~/components/TheHero";
import ProjectsList from "~/components/ProjectsList";

export default {
  async mounted () {
    if (process.browser) {
      const scrollMonitor = await import('scrollmonitor')
      Vue.use(scrollMonitor)
      console.log('HELLO FROM MOUNTED')
    }
  },
  name: "Index",
  components: { TheHero, ProjectsList},
  data() {
    return {
      scaledUpDot: false,
      isFirstImageVisible: false,
    };
  },
  computed: {
    ...mapGetters({
      projects: "getProjects",
    }),
  },
  mounted() {
    this.handleScaling();
    this.hideScrollSpan();
  },
  destroyed() {
    this.handleScaling();
    this.hideScrollSpan();
  },
  methods: {
    handleScaling() {
      if (process.client) {
        const heroSection = document.querySelectorAll(".hero");
      const heroSectionWtcher = scrollMonitor.create(heroSection, 0);
      heroSectionWtcher.enterViewport(() => {
        this.scaledUpDot = true;
      });
      }
     
    },
    hideScrollSpan() {
      if (process.client) {
        const images = document.querySelectorAll(".projects-home img");
        const firstImage = images[0];
        const imageWatcher = scrollMonitor.create(firstImage, -30);
        imageWatcher.enterViewport(() => {
          this.isFirstImageVisible = true;
        });
      }
    },
  },
};
</script>

In my old computer I have it imported like this :

import { mapGetters } from 'vuex'
import scrollMonitor from 'scrollmonitor'

But when I want to run this in a new one I get an error that window is not defined

So I have started to add this plugin in other way and still not working

CodePudding user response：

Still not working.
I am using new computer, at my old one everything is working fine.

index.vue

<template>
  <div class="index page-padding-top">
    <TheHero
      :scaledUpDot="scaledUpDot"
      :isFirstImageVisible="isFirstImageVisible"
    />
    <ProjectsList :projects="projects" />
  </div>
</template>



<script>
import { mapGetters } from "vuex";

import TheHero from "~/components/TheHero";
import ProjectsList from "~/components/ProjectsList";

export default {
  async mounted () {
    if (process.browser) {
      const scrollMonitor = await import('scrollmonitor')
      Vue.use(scrollMonitor)
      console.log('HELLO FROM MOUNTED')
    }
  },
  name: "Index",
  components: { TheHero, ProjectsList},
  data() {
    return {
      scaledUpDot: false,
      isFirstImageVisible: false,
    };
  },
  computed: {
    ...mapGetters({
      projects: "getProjects",
    }),
  },
  mounted() {
    this.handleScaling();
    this.hideScrollSpan();
  },
  destroyed() {
    this.handleScaling();
    this.hideScrollSpan();
  },
  methods: {
    handleScaling() {
      if (process.client) {
        const heroSection = document.querySelectorAll(".hero");
      const heroSectionWtcher = scrollMonitor.create(heroSection, 0);
      heroSectionWtcher.enterViewport(() => {
        this.scaledUpDot = true;
      });
      }
     
    },
    hideScrollSpan() {
      if (process.client) {
        const images = document.querySelectorAll(".projects-home img");
        const firstImage = images[0];
        const imageWatcher = scrollMonitor.create(firstImage, -30);
        imageWatcher.enterViewport(() => {
          this.isFirstImageVisible = true;
        });
      }
    },
  },
};
</script>

In my old computer I have it imported like this :

import { mapGetters } from 'vuex'
import scrollMonitor from 'scrollmonitor'

But when I want to run this in a new one I get an error that window is not defined

So I have started to add this plugin in other way and still not working

CodePudding user response：

In my old computer I have it imported like this :

<script>

import { mapGetters } from "vuex";
import scrollMonitor from 'scrollmonitor'

But when I want to run this in a new one I get an error that window is not defined

So I have started to add this plugin in other way and still not working