ReferenceError: окно не определено. vuepress

Question

Я использую canvas-nest.js в vuepress (импорт CanvasNest из 'canvas-nest.js') это работает, когда я использую yarn dev; но выдает ошибку при использовании yarn build:

Rendering static HTML...
Rendering page: / FAIL  Error rendering /:ReferenceError: window is not defined
    at Object.<anonymous> (node_modules/canvas-nest.js/lib/utils.js:11:0)
    at __webpack_require__ (webpack/bootstrap:25:0)
    at Object.module.exports.Object.defineProperty.value (node_modules/canvas-nest.
js/lib/CanvasNest.js:16:0)
    at __webpack_require__ (webpack/bootstrap:25:0)
    at Object.module.exports.Object.defineProperty.value (node_modules/canvas-nest.
js/lib/index.js:7:0)
    at __webpack_require__ (webpack/bootstrap:25:0)

Как я могу решить это?

Answer 1

У меня была такая же проблема с импортом scrollmagic. Я решил, что компонент не импортирует скрипты с import ScrollMagic из 'scrollmagic', как обычно, но использует const ScrollMagic = require('scrollmagic') в функции методов, запрошенных через установленный крючок. например.

<script>
import { TweenMax, TimelineMax, Sine } from 'gsap'
DO NOT MAKE WINDOW IMPORT REQUESTS HERE
// import ScrollMagic from 'scrollmagic'
// import 'animation.gsap'

export default {
  data() {
    return {
     box:'.box'
     };
  },
methods: { 
    animate(){
      const ScrollMagic = require('scrollmagic') 
      const animationGsap = require('@dk-animationGsap') 

      const controller = new ScrollMagic.Controller();
        let tween = new TimelineMax ()
            .add([
          TweenMax.staggerFromTo(this.box, 0.5, {autoAlpha:0,y:-200,scale:0.9}, {autoAlpha:1,y:100,scale:1,ease: Back.easeOut.config(1.75)}, 1)
         ]);

      const scene = new ScrollMagic.Scene({
        triggerHook: 'onEnter',
          duration: 400,    
          offset: 0
        })
        .setTween(tween)
        .addTo(controller);
    }
  },
  mounted() { 
   this.animate()
  },

}
</script>