Невозможно построить проект Gridsome: модальные причины: ошибка «окно не определено» - PullRequest
Новая
       5

Невозможно построить проект Gridsome: модальные причины: ошибка «окно не определено»

0 голосов
/ 13 февраля 2020

Мой проект работает нормально в режиме разработки, но не работает в режиме сборки. Полная ошибка: 

ReferenceError: window is not defined
at Object.<anonymous> (node_modules/vue-js-modal/dist/index.js:1:210)
at __webpack_require__ (webpack/bootstrap:25:0)
at Module.<anonymous> (assets/js/app.a0a1f9b3.js:5157:12)
at __webpack_require__ (webpack/bootstrap:25:0)
at Object.<anonymous> (assets/js/app.a0a1f9b3.js:2785:18)
at __webpack_require__ (webpack/bootstrap:25:0)
at assets/js/app.a0a1f9b3.js:118:18
at Object.<anonymous> (assets/js/app.a0a1f9b3.js:121:10)
at o (/home/nestor/progs/gridsome_blog/node_modules/vue-server-renderer/build.prod.js:1:77545)
at /home/nestor/progs/gridsome_blog/node_modules/vue-server-renderer/build.prod.js:1:78138

Единственная подсказка, которая дает мне это модальный плагин. Я читал, что это из-за рендеринга на стороне клиента, но не понимаю, как это исправить в этом случае. В main.js я импортирую и устанавливаю плагин с: 

import VModal from 'vue-js-modal'
// other things
Vue.use(VModal, { dynamic: true , dynamicDefaults: { clickToClose: true }, injectModalsContainer: true})

и использую его в файле vue в качестве модального динамического c, поэтому при нажатии кнопки модальный создается метод, определенный в словаре экспорта: 

export default {
     // other things
     methods:{ show_modal(title_,company_,url_,text_){
          this.$modal.show({
            template: `
            <div id="modal_div" style="padding: 0px; overflow: auto;">
              <h4 id="#modal_title" style="margin:15px;">{{title}}</h4>
              <a target="_blank" :href="url"> <h5 id="#modal_subtitle" style="margin:15px;">{{company}}</h5></a>
              <p id="#modal_text" style="margin:15px;font-family:Muli;text-align:justify">{{text}}</p>
            </div>
              `,
              props: ['title','company','url','text']
            }, {
              title: title_,
              company: 'With: ' + company_,
              url: url_,
              text: text_
            }, {
              height: 'auto',
              adaptive: true,
              draggable: true
            }, {
              'before-close': (event) => { console.log('modal closed'); }
            })
    }
}

Я новичок в Vue, любая помощь приветствуется.

1 Ответ

1 голос
/ 13 февраля 2020

Вы правы, это потому, что SSR - во время сборки нет window. Одним из способов является использование тегов <ClientOnly> в вашем шаблоне и создание всего этого в mounted() при экспорте.

В данном конкретном случае вам повезло: для вашего компонента есть плагин . Библиотека плагинов Gridsome содержит множество оболочек для vue компонентов, поэтому вы можете использовать их проще.

...