'window is not defined' 导入非 vue 包（如 Flickity）时 Nuxt.js 中的错误 - 尽管使用客户端模式并检查 process.client

Question

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

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

<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>

nuxt.config.js

中的插件数组

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

],

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

import Flickity from 'flickity';

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

Answer 1

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

另一种方法是使用 await import 为您的 Flickity 创建一个 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
        });
    }
  }
}

'window is not defined' 导入非 vue 包（如 Flickity）时 Nuxt.js 中的错误 - 尽管使用客户端模式并检查 process.client

'window is not defined' error in Nuxt.js when importing a non-vue package such as Flickity - despite using client mode and checking process.client

vue.js

npm

nuxt.js

flickity

npm-package

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

nuxt.config.js

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