Jump to content
Search Community

Errors with node update: Draggable.js & ThrowPropsPlugin.js

elrojo test

By elrojo
in GSAP

Moderator Tag
 Share

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

elrojo test

elrojo

Posted
Posted

I recently updated my gsap node module and keep receiving the following errors with the new update. This is happening with both draggable and throwPropsPlugin js files. Any thoughts on a work around?

 

my js file: 

import * as TweenLite from "gsap/umd/TweenLite";

import * as TweenMax from "gsap/umd/TweenMax";

import * as Modifiers from "gsap/umd/ModifiersPlugin"; 

import * as Draggable from "gsap/umd/Draggable";

import * as ThrowPropsPlugin from "gsap/umd/ThrowPropsPlugin";

 

......

 

 

 

 

Erros:

 

WebpackError: navigator is not defined

  - Draggable.js:391 Function.<anonymous>
    ~/gsap/umd/Draggable.js:391:51

  - TweenLite.js:107 Definition.check
    ~/gsap/umd/TweenLite.js:107:1

  - TweenLite.js:130 new Definition
    ~/gsap/umd/TweenLite.js:130:1

  - TweenLite.js:135 window._gsDefine
    ~/gsap/umd/TweenLite.js:135:1

  - Draggable.js:19
    ~/gsap/umd/Draggable.js:19:1

  - Draggable.js:2477 Object._gsScope
    ~/gsap/umd/Draggable.js:2477:30

  - Slider.js:4 Object._exports
    src/components/Slider.js:4:1

  - index.js:5 Object.exports.__esModule
    src/pages/index.js:5:1

 

Link to comment
Share on other sites
GreenSock test

GreenSock

Posted
Posted

Hm, it sounds like you might be running code outside the browser - is this server-side rendering or something? That error says it's looking for "navigator" (and failing), but that'd be present in the browser. 

 

Your imports look a bit odd to me - I'm curious what'd happen if you did it like:

  

import Draggable from "gsap/Draggable";

 

Or if you really need the UMD version, that's fine: 

  

import Draggable from "gsap/umd/Draggable";

 

If you're still having trouble, please provide a reduced test case so we can see what's going on. 

 

  • Like 2
Link to comment
Share on other sites
elrojo test

elrojo

Posted
  • Author
Posted

Hey Jack,

 

 

Thanks for getting back to me. If I comment out "Draggable and Throwprops" I can get the build to run.

 

My stack includes Gatsby and Netlify Cms also.

 

I had all this working until I ran updates. I changed all the imports.

 

import TweenLite from "gsap/umd/TweenLite";
import TweenMax from "gsap/umd/TweenMax";
import Modifiers from "gsap/umd/ModifiersPlugin";
import Draggable from "gsap/umd/Draggable";
import ThrowPropsPlugin from "gsap/umd/ThrowPropsPlugin";

 

Receiving the error below: 

See our docs page on debugging HTML builds for help https://goo.gl/yL9lND

  389 |                 return !!(_SVGElement && typeof(e.getBBox) === "function" && e.getCTM && (!e.parentNode || (e.parentNode.getBBox && e.parentNode.getCTM)));
  390 |             },
> 391 |             _isIE10orBelow = (((/MSIE ([0-9]{1,}[\.0-9]{0,})/).exec(navigator.userAgent) || (/Trident\/.*rv:([0-9]{1,}[\.0-9]{0,})/).exec(navigator.userAgent)) && parseFloat( RegExp.$1 ) < 11), //Ideally we'd avoid user agent sniffing, but there doesn't seem to be a way to feature-detect and sense a border-related bug that only affects IE10 and IE9.
      |                                                            ^
  392 |             _tempTransforms = [],
  393 |             _tempElements = [],
  394 |             _getSVGOffsets = function(e) { //SVG elements don't always report offsetTop/offsetLeft/offsetParent at all (I'm looking at you, Firefox 29 and Android), so we have to do some work to manufacture those values. You can pass any SVG element and it'll spit back an object with offsetTop, offsetLeft, offsetParent, scaleX, and scaleY properties. We need the scaleX and scaleY to handle the way SVG can resize itself based on the container.


  WebpackError: navigator is not defined

  - Draggable.js:391 Function.<anonymous>
    ~/gsap/umd/Draggable.js:391:51

  - TweenLite.js:107 Definition.check
    ~/gsap/umd/TweenLite.js:107:1

  - TweenLite.js:130 new Definition
    ~/gsap/umd/TweenLite.js:130:1

  - TweenLite.js:135 window._gsDefine
    ~/gsap/umd/TweenLite.js:135:1

  - Draggable.js:19
    ~/gsap/umd/Draggable.js:19:1

  - Draggable.js:2477 Object._gsScope
    ~/gsap/umd/Draggable.js:2477:30

  - Slider.js:4 Object._exports
    src/components/Slider.js:4:1

  - index.js:5 Object.exports.__esModule
    src/pages/index.js:5:1


 

Package.json:

 

...

"dependencies": {
"@babel/runtime": "^7.0.0-beta.56",
"babel-runtime": "^6.26.0",
"bulma": "^0.7.1",
"classnames": "^2.2.6",
"gatsby": "^1.9.277",
"gatsby-cli": "^1.1.58",
"gatsby-link": "^1.6.46",
"gatsby-plugin-netlify": "^1.0.21",
"gatsby-plugin-netlify-cms": "^3.0.0-beta.1",
"gatsby-plugin-react-helmet": "^2.0.11",
"gatsby-plugin-sass": "^1.0.26",
"gatsby-plugin-sharp": "^1.6.48",
"gatsby-remark-images": "^1.5.67",
"gatsby-source-filesystem": "^1.5.39",
"gatsby-transformer-remark": "^1.7.44",
"gatsby-transformer-sharp": "^1.6.27",
"gsap": "^2.0.1",
"history": "^4.7.2",
"lodash": "^4.17.10",
"lodash-webpack-plugin": "^0.11.5",
"netlify-cms": "^2.0.9",
"prop-types": "^15.6.2",
"react": "^16.4.2",
"react-helmet": "^5.2.0",
"react-redux": "^5.0.7",
"react-router-dom": "^4.3.1",
"react-router-redux": "^4.0.8",
"redux": "^4.0.0",
"redux-logger": "^3.0.6",
"rellax": "^1.6.2",
"uuid": "^3.3.2"
},

 

 

 

 

Link to comment
Share on other sites
OSUblake test

OSUblake

Posted
Posted

Did you click on the link in your error? It looks like Gatsby does server side rendering.

https://www.gatsbyjs.org/docs/debugging-html-builds/

 

I don't know why it worked before, but those errors should be expected when loading the Draggable file without a browser.

 

You can always create dummy objects for missing stuff.

  

var window = {};
var navigator = { userAgent: "" };
var dummyElement = { style: {}, getElementsByTagName: function() { return [] } };
var document = { createElement: function() { return dummyElement } };

 

  • Like 2
Link to comment
Share on other sites
elrojo test

elrojo

Posted
  • Author
Posted

Hey Jack,

 

 

Thanks for getting back to me. If I comment out "Draggable and Throwprops" I can get the build to run.

 

My stack includes Gatsby and Netlify Cms also.

 

I had all this working until I ran updates. I changed all the imports.

 

import TweenLite from "gsap/umd/TweenLite";
import TweenMax from "gsap/umd/TweenMax";
import Modifiers from "gsap/umd/ModifiersPlugin";
import Draggable from "gsap/umd/Draggable";
import ThrowPropsPlugin from "gsap/umd/ThrowPropsPlugin";

 

Receiving the error below: 

See our docs page on debugging HTML builds for help https://goo.gl/yL9lND

  389 |                 return !!(_SVGElement && typeof(e.getBBox) === "function" && e.getCTM && (!e.parentNode || (e.parentNode.getBBox && e.parentNode.getCTM)));
  390 |             },
> 391 |             _isIE10orBelow = (((/MSIE ([0-9]{1,}[\.0-9]{0,})/).exec(navigator.userAgent) || (/Trident\/.*rv:([0-9]{1,}[\.0-9]{0,})/).exec(navigator.userAgent)) && parseFloat( RegExp.$1 ) < 11), //Ideally we'd avoid user agent sniffing, but there doesn't seem to be a way to feature-detect and sense a border-related bug that only affects IE10 and IE9.
      |                                                            ^
  392 |             _tempTransforms = [],
  393 |             _tempElements = [],
  394 |             _getSVGOffsets = function(e) { //SVG elements don't always report offsetTop/offsetLeft/offsetParent at all (I'm looking at you, Firefox 29 and Android), so we have to do some work to manufacture those values. You can pass any SVG element and it'll spit back an object with offsetTop, offsetLeft, offsetParent, scaleX, and scaleY properties. We need the scaleX and scaleY to handle the way SVG can resize itself based on the container.


  WebpackError: navigator is not defined

  - Draggable.js:391 Function.<anonymous>
    ~/gsap/umd/Draggable.js:391:51

  - TweenLite.js:107 Definition.check
    ~/gsap/umd/TweenLite.js:107:1

  - TweenLite.js:130 new Definition
    ~/gsap/umd/TweenLite.js:130:1

  - TweenLite.js:135 window._gsDefine
    ~/gsap/umd/TweenLite.js:135:1

  - Draggable.js:19
    ~/gsap/umd/Draggable.js:19:1

  - Draggable.js:2477 Object._gsScope
    ~/gsap/umd/Draggable.js:2477:30

  - Slider.js:4 Object._exports
    src/components/Slider.js:4:1

  - index.js:5 Object.exports.__esModule
    src/pages/index.js:5:1


 

Package.json:

 

...

"dependencies": {
"@babel/runtime": "^7.0.0-beta.56",
"babel-runtime": "^6.26.0",
"bulma": "^0.7.1",
"classnames": "^2.2.6",
"gatsby": "^1.9.277",
"gatsby-cli": "^1.1.58",
"gatsby-link": "^1.6.46",
"gatsby-plugin-netlify": "^1.0.21",
"gatsby-plugin-netlify-cms": "^3.0.0-beta.1",
"gatsby-plugin-react-helmet": "^2.0.11",
"gatsby-plugin-sass": "^1.0.26",
"gatsby-plugin-sharp": "^1.6.48",
"gatsby-remark-images": "^1.5.67",
"gatsby-source-filesystem": "^1.5.39",
"gatsby-transformer-remark": "^1.7.44",
"gatsby-transformer-sharp": "^1.6.27",
"gsap": "^2.0.1",
"history": "^4.7.2",
"lodash": "^4.17.10",
"lodash-webpack-plugin": "^0.11.5",
"netlify-cms": "^2.0.9",
"prop-types": "^15.6.2",
"react": "^16.4.2",
"react-helmet": "^5.2.0",
"react-redux": "^5.0.7",
"react-router-dom": "^4.3.1",
"react-router-redux": "^4.0.8",
"redux": "^4.0.0",
"redux-logger": "^3.0.6",
"rellax": "^1.6.2",
"uuid": "^3.3.2"
},

 

 

 

 

Link to comment
Share on other sites
OSUblake test

OSUblake

Posted
Posted

Not sure if you meant to post the same thing again.

 

Try adding this code to prevent errors during server rendering.

  

if (typeof window === "undefined") {

  var dummyElement = { 
    style: {}, 
    appendChild: function() {},
    removeChild: function() {} 
  };
    
  global.window = {};
  global.navigator = { userAgent: "" };
  global.document = { createElement: function() { return dummyElement } };
}

 

 

I just ran that in node without any errors. The "GSAP encountered missing dependency: plugins.CSSPlugin" message can be ignored as that is displayed before it loads TweenLite and the CSSPlugin.

 

K92xkef.jpg

 

 

  • Like 3
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
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...