Nuxt项目引入scrollMonitor报Critical dependency及window未定义错误

解决方案 #

1. 清理无效配置 #

首先删除以下错误配置：

• 删除plugins/scroll-monitor.js文件，scrollMonitor是原生JS工具库，不是Vue插件，不需要用Vue.use()挂载
• 修改nuxt.config.js：移除plugins数组中scroll-monitor相关配置，删除已废弃的vendor配置，添加transpile规则让webpack正确处理该库：

// nuxt.config.js
export default {
  plugins: [
    '~/plugins/wordpress-api'
    // 删除scroll-monitor相关plugin配置
  ],
  build: {
    transpile: ['scrollmonitor'],
    extend(config, ctx) {}
  }
}

2. 修复页面代码逻辑 #

你的代码存在3个核心错误：

• 重复声明mounted钩子，后定义的会覆盖先定义的，导致动态引入逻辑根本没执行
• 动态引入的scrollMonitor仅在mounted局部作用域生效，methods中无法访问
• querySelectorAll返回DOM集合，scrollMonitor.create仅接收单个DOM元素

修改后index.vue的script部分代码如下：

<script>
import { mapGetters } from "vuex";
import TheHero from "~/components/TheHero";
import ProjectsList from "~/components/ProjectsList";

export default {
  name: "Index",
  components: { TheHero, ProjectsList},
  data() {
    return {
      scaledUpDot: false,
      isFirstImageVisible: false,
      scrollMonitor: null,
      heroSectionWatcher: null,
      imageWatcher: null
    };
  },
  computed: {
    ...mapGetters({
      projects: "getProjects",
    }),
  },
  async mounted() {
    if (process.client) {
      // 动态引入拿默认导出
      const scrollModule = await import('scrollmonitor')
      this.scrollMonitor = scrollModule.default
      // 加载完成后再执行监听逻辑
      this.handleScaling()
      this.hideScrollSpan()
    }
  },
  destroyed() {
    // 销毁监听避免内存泄漏
    this.heroSectionWatcher?.destroy()
    this.imageWatcher?.destroy()
  },
  methods: {
    handleScaling() {
      const heroSection = document.querySelector(".hero");
      this.heroSectionWatcher = this.scrollMonitor.create(heroSection, 0);
      this.heroSectionWatcher.enterViewport(() => {
        this.scaledUpDot = true;
      });
    },
    hideScrollSpan() {
      const images = document.querySelectorAll(".projects-home img");
      const firstImage = images[0];
      this.imageWatcher = this.scrollMonitor.create(firstImage, -30);
      this.imageWatcher.enterViewport(() => {
        this.isFirstImageVisible = true;
      });
    },
  },
};
</script>

3. 对齐依赖版本 #

新旧设备表现不一致大概率是依赖版本不同导致的：

• 到旧设备项目目录执行npm list scrollmonitor查看正常运行的版本号
• 在package.json中固定scrollMonitor的版本号，例如"scrollmonitor": "1.2.5"
• 删除新旧设备项目中的node_modules、package-lock.json/yarn.lock/pnpm-lock.yaml，重新执行安装命令即可

内容的提问来源于stack exchange，提问作者lemonadia