GSAP with create-react-app webpack

[Thinkingbox Developer]

Hi everyone,

 

I've recently been on the process of migrating one of our existing projects to using create-react-app (CRA), and have been running into this issue (attached image).

 

When viewing the compiled version...

> 2546 | return Promise.all([gsap_promise__WEBPACK_IMPORTED_MODULE_3___default.a.fromTo(this.$outer, ANIM_TIME, {
  2547 |   y: '110%'                                                               ^
  2548 | }, {
  2549 |   y: "0%",

 

We're using the GSAP Promise wrapper gsap-promise, which was used on both projects. I've tried reverting the GSAP package version to the same one and the same issue still occurs, which leads me to think that this might be a Webpack configuration issue. I've ejected the CRA project, but haven't been able to figure out which webpack configuration I may need to change.

 

[GreenSock]

Welcome to the forums, @Thinkingbox Developer. Sorry, but it's really tough to troubleshoot blind and this doesn't really sound like a GSAP issue. I'm not a Webpack guy, nor do we support the 3rd party gsap-promise library, so I'm not quite sure how to help here. Oh, and by the way, I'd strongly recommend using the yPercent:110 instead of y:"110%" format to be explicit about percentage-based values. That's totally unrelated to the issue you posted about, of course. 

 

Are you using the latest version of GSAP? And did you install it from NPM? 

[Thinkingbox Developer]

1 minute ago, GreenSock said:

Welcome to the forums, @Thinkingbox Developer. Sorry, but it's really tough to troubleshoot blind and this doesn't really sound like a GSAP issue. I'm not a Webpack guy, nor do we support the 3rd party gsap-promise library, so I'm not quite sure how to help here. Oh, and by the way, I'd strongly recommend using the yPercent:110 instead of y:"110%" format to be explicit about percentage-based values. That's totally unrelated to the issue you posted about, of course. 

 

Are you using the latest version of GSAP? And did you install it from NPM? 

 

Thanks for your response. Our GSAP is indeed the latest version from NPM. Doing further investigation, I feel like this issue here seems to illustrate the problem I'm running into:

 

https://github.com/greensock/GreenSock-JS/issues/261

 

Looking into the 3rd party library, it doesn't seem like they're getting the full TweenMax object but rather, an empty object. 

[OSUblake]

On 6/28/2019 at 4:54 PM, Thinkingbox Developer said:

Looking into the 3rd party library, it doesn't seem like they're getting the full TweenMax object but rather, an empty object. 

 

For that to work, you might have to import the umd version of TweenMax. But that's just a guess.

 

Is there any particular need for that library? I would just use regular promises and async/await.

 

 

 

[Thinkingbox Developer]

21 hours ago, OSUblake said:

 

 For that to work, you might have to import the umd version of TweenMax. But that's just a guess.

 

 Is there any particular need for that library? I would just use regular promises and async/await.

 



 

 

 

Thanks for your response @OSUblake. 

 

We initially started using this library for the promise functionality, and since it's used so many times it'll be hard to just pull out to swap to just regular promises. On top of that, it seems like the importing issues are also happening for other libraries too so I feel like I'd have to get to the bottom of this webpack importing issue.

[OSUblake]

26 minutes ago, Thinkingbox Developer said:

On top of that, it seems like the importing issues are also happening for other libraries too so I feel like I'd have to get to the bottom of this webpack importing issue.

 

The only thing I can tell you is to try using version 3 of webpack. Later versions handle require and import statements differently.

[Thinkingbox Developer]

3 minutes ago, OSUblake said:

 

The only thing I can tell you is to try using version 3 of webpack. Later versions handle require and import statements differently.

 

I shall try that next. Thanks.