Jump to content
Search Community

Issue with building my site - ThrowPropsPlugin.js

danboyle8637 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

I am building a GatsbyJS site which is essentially a React site that builds out to static files. 

 

In my build process, I am getting an error in my ThrowPropsPlugin.js

 

The specific error is: WebpackError: TypeError: Cannot read property 'defaultView' of undefined

 

Here's a screenshot of the part of code...

 

throwprops-error.thumb.jpg.725432f5205b405082e3e1ef2970bca3.jpg

 

In the actual file... this code is under the 

 

VelocityTracker section.

 

I'm guessing this error is happening because on the server side, the document doesn't exist and _doc is undefined. 

 

Is that thought correct?

 

Does anybody have experience with building with GatsbyJS? or how I can skip out of my Greensock plugin files during the build process?

 

Thanks!

Screen Shot 2019-03-03 at 5.43.29 PM.png

error-in-code.png

Link to comment
Share on other sites

Sorry to hear about the troubles, @danboyle8637. I wonder if you tried using the latest version of the ThrowPropsPlugin file - it looks like you're using an older one. 

 

And yeah, the tools rely on a "document" object being available, so if it's purely server-side code it may not work. But we did put something in place a little while ago that at least works around the initial errors related to "document" not being defined. Let us know if the latest files resolve things for ya. 

Link to comment
Share on other sites

  • 3 weeks later...

I encountered the same error with the DrawSVGPlugin since I also had to import the file locally. I see the same error whether I used the typical or UMD version of the plugin.

 

I, too, am using Gatsby. As mentioned earlier Gatsby's build script generates an isomorphic version hence the errors while it works fine for local dev builds. I'm not sure how @danboyle8637 managed to suppress the warning but I didn't feel comfortable attempting that in the event it fails in my build pipeline.

 

I opted to move the import into gatsby-browser.js and it worked that way. Any imports there get loaded regardless whether the page needs it or not so not ideal but at least it is an error-free resolution.

 

It would be great if in the future the _doc check for the plugins could be made to be SSG-friendly.

 

HTH anyone else coming here with the same issue.

 

  • Like 1
Link to comment
Share on other sites

4 hours ago, Fivetwelve said:

 

It would be great if in the future the _doc check for the plugins could be made to be SSG-friendly.

 

Hm, could you explain how exactly we'd make that "SSG-friendly"? I'm certainly open to suggestions. 

 

Also, is it not possible to use the ES Module flavor of the GSAP files? 

Link to comment
Share on other sites

14 hours ago, GreenSock said:

 

Hm, could you explain how exactly we'd make that "SSG-friendly"? I'm certainly open to suggestions. 

 

Hi, Jack—

 

I'm not an expert on server-side rendering but the crux is anytime a module is looking for document or window property, it will fail because those browser properties aren't available. A Gatsby doc discusses workarounds from the dev perspective but not actual solutions for the module creator: https://www.gatsbyjs.org/docs/debugging-html-builds/.

 

Honestly, the best way may be to reach to some other folks who may have dealt with this. Here's an example. On my project, I've had to add an image/slide carousel (I know, don't get me started...). I know there are a fair amount of libraries that work within a React framework but not on Gatsby for exactly the same issue (Flickity is a good case). However I came across Nuka, a React-opinionated carousel. I haven't had a chance to dig into why/how but that team managed to avoid the issue and it builds nicely in both local and server environments. Perhaps these folks might be open to answering your question. I wish I could be more help.

 

14 hours ago, GreenSock said:

 

Also, is it not possible to use the ES Module flavor of the GSAP files? 

 

If you're referring to the version in `bonus-files-for-npm-users` I find that both that and the one in `umd` subdirectory generated the same error.

Link to comment
Share on other sites

@Fivetwelve So here's what I did...

 

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  if (stage === 'build-html') {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /ThrowPropsPlugin/,
            use: loaders.null(),
          },
        ],
      },
    })
  }
}

 

I put this in my gatsby-node.js file. This tells webpack to ignore it... at least as far as I know. I'm no webpack expert... yet!

 

But I don't get any warnings or build fails anymore. I have not tried to rebuild since the updated plugin. I'll try that this weekend. 

 

I am currently hosting my site using Netlify and my site builds fine every time. My throwprops work great.

 

I hope this can be of help. If I learn anything new, I'll report back here. I am starting to build a new site in the next week so I will be tackling many of these issues looking for better solutions if possible.

 

  • Like 4
Link to comment
Share on other sites

Hey, @danboyle8637, thanks for the follow-up. I eventually saw your approach in the Gatsby debugging section. I, too, am using Netlify so I'm very pleased to hear it's working great for you. I will try that as well. I do hope that we'll be able to get a point where this exception is not necessary.

 

I think GSAP and React are both amazing frameworks. There's much better integration than when I first tried using them together a few years ago.

  • Like 1
Link to comment
Share on other sites

Just by chance, I ran into this exact same problem today.  Unfortunately, I'm not able to get everything to work correctly and was hoping someone, perhaps @danboyle8637 would have a suggestion.

 

My gatsby site works fine in development mode.  When trying to build, it threw errors that GSAP was causing.  The errors were similar to what Dan had.   I tried Dan's gatsby-node.js solution and it will now build.   Here my gatsby-node.js file.

 

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  if (stage === 'build-html') {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /gsap/,
            use: loaders.null(),
          },
        ],
      },
    })
  }
}

 

 

Although my site builds now without errors.  It has lost GSAP functionality.  In particular, I cannot throw props and tweens don't seem to be working.  Interestingly enough, I can still drag objects via Gsap draggable.  

 

Can anyone offer any advice on what I can do?   I'm pretty frustrated with GSAP at the moment and have run out of ideas.  (Please note, I'm somewhat new to Gatsby/React).

 

Thanks,

Rick

 

 

 

  • Like 1
Link to comment
Share on other sites

@Rick May I'm not the total expert... yet... but I noticed you excluding all of /gsap/ from webpack.

 

If you look at the code I used, I only told Webpack to ignore (I'm not sure if that's the right word) the throwpropsplugin because it was using _doc which is only available on the window... and window is not available on the server because there is no window. 

 

What error message were you getting specifically?

 

If it had something to do with the throwpropsplugin... I would replace /gsap/ with /ThrowPropsPlugin/ and everything should work.

 

Try that and see what happens.

  • Thanks 1
Link to comment
Share on other sites

If you're losing functionality, it sounds like maybe your build system is tree shaking things out like CSSPlugin or ThrowPropsPlugin, so maybe try referencing those in your code somewhere kinda like:

 

const plugins = [CSSPlugin, ThrowPropsPlugin]; //just to keep them from getting dumped by tree shaking in your build process.

 

Does that help?

  • Thanks 1
Link to comment
Share on other sites

4 hours later and I figured out my problem.  I'll post what mistakes I made and how I fixed it just in case someone else has something similar.

 

1) Ignoring ThrowPropsPlugin via gastby-node.js was indeed needed as @danboyle8637 had to do.

2) My site was then able to build without errors, but was not functioning like it did under development.

 

 

A-  When I first starting setting up this site weeks ago, I used NPM to install GSAP and imported into my jsx with the following...

import { TweenLite, TimelineLite, Draggable } from 'gsap/all';

 

B- As someone who was new to Gatsby, React, and even NPM, I made a naive mistake back when I started this project.  After downloading ThrowPropsPlugin, I dropped it into my node-modules/gsap directory.  ThrowProps was imported from within all.js.

C- This worked fine in development, but as soon as I would build, ThrowProps was lost.

D- I've now moved ThrowPropsPlugin.js to a directory in my project instead of having it live within node-modules/gsap.

E- Everything builds fine (after ignoring ThrowPropsPlugin with gatsby-node.js as described above) now and the built site functions as it should.

 

 

I only discovered this was the problem when I used NPM to update to the latest GSAP this morning to eliminate that as an issue.  During the update, ThrowPropsPlugin was wiped from the directory and my development site suddenly stopped functioning  in exactly the same way the built site was not functioning.

 

 

Whew..  At least it works now.

 

 

Thanks!!

 

Rick

 

 

 

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