导入非 vue 包例如 Flickity时 Nuxt.js 中的“窗口未定义”错误 - 尽管使用客户端模式并检查 process.client

问题描述

我已经阅读了我可以找到的关于堆栈溢出的所有其他帖子（其中有很多）。但据我所知，它们都提供了相同的潜在修复，例如用 if(process.client) 包装代码，或用 <client-only> 标签包装组件，并添加 mode:"client" 或添加 {{ 1}} 后缀到 client 文件中的插件。不幸的是，这些解决方案都不适合我。似乎包文件 (flickity.js) 仍在服务器端运行导致错误。我试过用 require 替换导入并将其包装在 nuxt.config.js 条件中，但这也不起作用。 如果我不包括 if (process.client) 行，我得到的错误是，正如您所期望的 import Flickity from 'flickity';。当我按如下方式包含它时，我得到 Flickity is undefined 有谁知道其他要求 阻止这个包运行我错过的服务器端？

使用 flickity 的组件（包装在客户端专用标签中）

window is not defined - flickity.js

nuxt.config.js 中的插件数组

<script>

        import Flickity from 'flickity'; // I have tried removing this having been told that Nuxt automatically imports all plugins. But it didn't work and rendered a Flickity is undefined error

        


        export default {
            created() {  
                
            },props: {
                images: {
                    required:true,type:Array
                }
            },mounted() {
                this.initiateCarousel();

            },methods: {
                initiateCarousel() {
                    if (process.client) {
                        const gallery = this.$refs.gallery;
                        const carousel = this.$refs.carousel;
                        console.log(carousel)
                        var flkty = new Flickity( carousel,{
                            cellAlign: 'left',lazyLoad: 3,contain: true,pageDots: false,prevNextButtons: false
                        });
                    }
                }
            },}
    </script>

],

~plugins 目录下的 Flickity.client.js 文件

plugins: [
  '~/plugins/flexBoxgrid/index','~/plugins/flickity.client'

（我也尝试将 import Flickity from 'flickity'; 添加到此文件，但呈现相同的服务器错误

解决方法

使用 nuxt 插件，您将在每个页面上导入 Flickity。

另一种方法是使用 Flickity 对您的 await import 进行 dynamic import，并且仅针对 mounted 事件的当前 nuxt 页面，如下所示：

async mounted() {
   await this.initiateCarousel();
},methods: {
  async initiateCarousel() {
    if (process.client) {
        const gallery = this.$refs.gallery;
        const carousel = this.$refs.carousel;
        console.log(carousel);

        const { default: Flickity } = await import(/* webpackChunkName: "flickity" */ 'Flickity');

        var flkty = new Flickity( carousel,{
            cellAlign: 'left',lazyLoad: 3,contain: true,pageDots: false,prevNextButtons: false
        });
    }
  }
}