Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
mdf

Vue Server Side Rendering and DrawSVGPlugin

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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. 

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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

 

  • Like 1
Link to comment
Share on other sites

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

 

Happy tweening!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×