Блог

Я прочитал все другие сообщения, которые я могу найти по этой теме о переполнении стека (которых много). Но из того, что я могу собрать, все они предлагают одни и те же потенциальные исправления, такие как обертывание кода if(process.client) тегами или обертывание компонента <client-only> тегами, а также добавление mode:"client" или добавление client суффикса к плагину в nuxt.config.js файле. К сожалению, ни одно из этих решений не сработало для меня. Похоже, что файл пакета (flickity.js ) все еще выполняется на стороне сервера, вызывая ошибки. Я пробовал заменить импорт требованием и обернуть его в if (process.client) условное условие, но это тоже не сработало. Ошибка, которую я получаю, если я не включаю эту import Flickity from 'flickity'; строку, как и следовало ожидать Flickity is undefined . Когда я включаю его, как показано ниже, я получаю window is not defined - flickity.js , знает ли кто-нибудь какие-либо другие требования для предотвращения запуска этого пакета на стороне сервера, которые я пропустил?

Компонент, который использует 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; в этот файл, но это привело к тем же ошибкам сервера

С помощью плагина nuxt вы будете импортировать Flickity на каждую страницу.

Альтернативой является динамический импорт вашего Flickity с await import помощью , и только для текущей страницы nuxt в mounted событии, следующим образом:

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