Jump to content
Search Community

DrawSVG build failed (Gatsby)

Loopspeed test
Moderator Tag

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

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

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.
×
×
  • Create New...