Critical dependency: require function in nuxt project

Question

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

First off, `ssr: false` is deprecated. Use `mode: 'client'` instead. Then, if you import it in a plugin, you don't need to import it into your `.vue` file. At the end, you should probably just load it in your `.vue` component and not globally. And also, please use `await import ...` here, because you're working with Vue and not with CJS or legacy Node. An example can be seen here: https://stackoverflow.com/a/69835581/8816585 — kissu, Dec 01 '21 at 15:40
So yeah, please share us what you're trying to achieve here with scrollMonitor with some template and your elements. — kissu, Dec 01 '21 at 15:41
A computer change should not induce that kind of behavior. On top of that, if only the computer changed and not the code, there is no point into trying to import it in another way. Your code is tracked by git? Are you sure it was not changed anyhow? Are you running the exact same settings? Same version of Node? `window is not defined` is unrelated to both the import and a computed change usually. — kissu, Dec 01 '21 at 18:16
Also, I showed you how to import it properly in the first place, but it doesn't mean that you only need to write it like it for it to work. Especially because it's not the same package here. Try to use [`$refs`](https://vuejs.org/v2/guide/components-edge-cases.html#Accessing-Child-Component-Instances-amp-Child-Elements) rather than query selectors too. — kissu, Dec 01 '21 at 18:19
Hm, I cannot even import it tbh. Not sure what is the issue here but I did not achieve to make it work locally (just the import part). Super weird. Yep, not sure if I'd recommend this one overall. Sorry, cannot help more here. — kissu, Dec 01 '21 at 18:36

score 1 · Answer 1 · edited Dec 01 '21 at 18:12