Jump to content
GreenSock

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

DrawSVG build failed (Gatsby)

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 everyone,

 

I've successfully built with GSAP and Gatsby before, but not with the DrawSVGPlugin.

It's throwing this error:

 

Quote

success Building production JavaScript and CSS bundles  3.648 s

error Building static HTML failed

See our docs page on debugging HTML builds for help https://gatsby.dev/debug-html

  19 |     typeof window !== "undefined"
  20 |       ? window
> 21 |       : _doc.defaultView || { getComputedStyle: function() {} },
     |              ^
  22 |   _getComputedStyle = function(e) {
  23 |     return _computedStyleScope.getComputedStyle(e) //to avoid errors in Microsoft Edge, we need to call getComputedStyle() from a specific scope, typically window.
  24 |   },


  WebpackError: TypeError: Cannot read property 'defaultView' of undefined
  
  - DrawSVGPlugin.js:21 Module../src/resources/animation/DrawSVGPlugin.js

 

 

This seems to be a Gatsby build problem as it works fine with React. 

 

Any ideas?

Any suggestions would be hugely appreciated. 

 

I've referenced the plugins like so: 

const gsapPlugins = [DrawSVG, CSSPlugin, TweenLite]

 

Thanks,

 

Matt

Link to comment
Share on other sites

Of course it's a Gatsby issue. Did you see the error you just posted above? 

See our docs page on debugging HTML builds for help https://gatsby.dev/debug-html

 

That's what happens you load client side scripts on the server. Consider using dynamic imports as it looks like is already configured for that.

https://github.com/gatsbyjs/gatsby/issues/11090

  • Like 1
Link to comment
Share on other sites

Thanks for the quick response!

I've seen your work, it's really impressive. Loving the grid with IO. 

 

I've followed the Gatsby instructions for 'Fixing third-party modules' with no luck. 

 

I'll see if I can get it to work with a conditional import.

Link to comment
Share on other sites

If the dynamic import doesn't work, I remember testing this out using require statements, but I guess you can't mix and match import and require with webpack 4.

 

 

  • Like 2
Link to comment
Share on other sites

Cheers Blake it worked =]]

 

For anyone else with the issue, this did the job:

 

  async componentDidMount() {
    if (typeof window !== "undefined") {
      import("../resources/animation/DrawSVGPlugin")
      import("pepjs")
    }
  }
  • Like 2
Link to comment
Share on other sites

  • 1 year later...

Hey @Loopspeed, where should I paste this code fragment? I get syntax error highlights wherever I put this inside of component function or outside of it.

 

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