关键依赖：nuxt项目中的require函数答案

【问题标题】：Critical dependency: require function in nuxt project关键依赖：nuxt项目中的require函数
【发布时间】：2022-01-08 04:56:27
【问题描述】：

在我的 nuxt 项目中使用包 scrollMonitor 时，我收到“严重依赖项：require 函数的使用方式无法静态提取友好错误 16:21:14”错误

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) {
  }
}

在我的 index.vue 文件中

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

更多上下文

还是不行。
我正在使用新电脑，在旧电脑上一切正常。

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>

在我的旧电脑上，我是这样导入的：

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

但是当我想在一个新的中运行它时，我得到一个错误 window is not defined

所以我已经开始以其他方式添加这个插件，但仍然无法正常工作

【问题讨论】：

首先，ssr: false 已被弃用。请改用mode: 'client'。然后，如果您将其导入插件中，则无需将其导入您的.vue 文件。最后，您可能应该将其加载到您的 .vue 组件中，而不是全局加载。另外，请在此处使用await import ...，因为您使用的是 Vue 而不是 CJS 或旧版 Node。可以在这里看到一个例子：stackoverflow.com/a/69835581/8816585
所以，是的，请与我们分享您在这里尝试使用带有一些模板和元素的 scrollMonitor 实现的目标。
计算机更改不应引起这种行为。最重要的是，如果只更改了计算机而不更改代码，那么尝试以其他方式导入它是没有意义的。你的代码被 git 跟踪了？你确定它没有改变吗？您是否正在运行完全相同的设置？相同版本的节点？ window is not defined 通常与导入和计算的更改无关。
另外，我首先向您展示了如何正确导入它，但这并不意味着您只需像它一样编写它就可以工作。特别是因为它不是同一个包。尝试使用$refs 而不是查询选择器。
嗯，我什至无法导入它。不知道这里有什么问题，但我没有实现让它在本地工作（只是导入部分）。超级诡异。是的，不确定我是否会整体推荐这个。抱歉，这里无法提供更多帮助。

标签： vue.js nuxt.js

【解决方案1】：

还是不行。
我正在使用新电脑，在旧电脑上一切正常。

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>

在我的旧电脑中，我将其导入如下：

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

但是当我想在一个新的中运行它时，我得到一个错误 window is not defined

所以我已经开始以其他方式添加这个插件，但仍然无法正常工作

【讨论】：

您好，请删除此内容，因为这不是您问题的答案。