Vue Server Side Rendering and DrawSVGPlugin

[mdf]

Hi, all. When I try to import the DrawSVGPlugin to a NuxtJS project, I get the following error:

TypeError: Cannot read property 'defaultView' of undefined
    at /Users/mdf/Sites/nuxtproject/node_modules/gsap/DrawSVGPlugin.js:19:27
    at Object.<anonymous> (/Users/mdf/Sites/nuxtproject/node_modules/gsap/DrawSVGPlugin.js:202:54)
    at Module._compile (module.js:569:30)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at r (/Users/mdf/Sites/nuxtproject/node_modules/vue-server-renderer/build.js:5812:16)
    at Object.<anonymous> (webpack:/external "gsap/DrawSVGPlugin":1:0)
    at __webpack_require__ (webpack:/webpack/bootstrap 8aad739dc52752aa5015:25:0)
    at Object.70 (2.server-bundle.js:123:77)
    at __webpack_require__ (webpack:/webpack/bootstrap 8aad739dc52752aa5015:25:0)
    at Object.61 (pages/index.vue:7:0)
    at __webpack_require__ (webpack:/webpack/bootstrap 8aad739dc52752aa5015:25:0)

The error is related to the call to `_doc.defaultView` and only happens when the page is server rendered, not when it is client rendered. I'm not sure if there is an issue with the vue-server-renderer package or if I'm not importing the plugin correctly. I've tried importing the plugin from the assets folder

 

import TweenLite from 'gsap';
import '~/assets/DrawSVGPlugin';

 

as well as copying it into the gsap folder in node_modules 

 

import TweenLite from 'gsap';
import 'gsap/DrawSVGPlugin';

 

Both produce the same error. The error is also not Nuxt-specific but happens whenever Vue server-side rendering is used. 

 

I put together a bare-bones example to illustrate the problem here https://github.com/michaeldfoley/vue-ssr-drawsvgplugin-error. Any help would be appreciated. 

[GreenSock]

First of all, welcome to the forums (and GSAP), @mdf

 

Hm, that error is not terribly surprising. GSAP has to do a lot of things under the hood to test compatibility, work around browser bugs, etc. and in the case of DrawSVGPlugin, it needs some stuff from the browser, like defaultView's getComputedStyle() method. I'm not terribly familiar with the various server-side (headless) renderers, but if the one you're using doesn't support that, I wouldn't really expect DrawSVGPlugin to work. I'd actually be curious to hear why you'd want to use it in a headless environment anyway (not that it's "wrong" - I'm genuinely curious). 

[mdf]

Chalk this up to needing to take a step back. You're right, I did not need to be using during the headless render. I should have been adding it when the server-side code is hydrated with the client-side code. 

 

If anyone comes across a similar problem, I was able to load the plugin successfully by adding the following to my nuxt.config file:

 

build: {
  extend (config, ctx) {
    if (ctx.isClient) {
      config.entry.app = ['gsap','~plugins/DrawSVGPlugin', config.entry.app];
    }
  }
}

 

[GreenSock]

Great, thanks for coming back and letting us know, @mdf

 

Happy tweening!