Missing gsap import not generating compile time error

[frankmcpolin]

Hi, so I have a typescript/pixi project that I just upgraded from gsap 2 to gsap 3. I am using the gsap-bonus.tgz and npm install.

Everything is working ok if, as instructed I have the import in the classes I want to use it in:

import gsap from 'gsap';

However, the problem I have is that this is not generating a compile time error if it has mistakenly not been imported. Even worse, Webstorm seems perfectly ok with me autocomnpleting a gsap. bit of code without doing the import. Even worse yet is that the runtime error only fires at the point in which my game attempts to use the gsap item in the class with the missing import!

This is a QA disaster waiting to happen!

 

Can anyone suggest a way to get this to generate a compile time error?

 

Thanks.

[ZachSaucier]

Hey frankmcpolin and welcome to the GreenSock forums. 

 

Also what error are you getting? What compilation steps are you taking?

[frankmcpolin]

Hi, thanks for replying Zach! I get the Uncaught TypeError: gsap.to is not a function error at runtime, which I guess is to be expected because the import is not included in the class attempting to run this tween. If I add the import it works just fine.

new webpack.ProvidePlugin({
    gsap: 'gsap'
}),

I tried the above in webpack plugins section, but no joy... to be honest I'm guessing at stuff here though!

 

The compilation is just a gulp script I run, written by someone who understands that side of things a whole lot better than I do!

[ZachSaucier]

That's definitely not a GSAP issue and is more of a question for Webstorm or the person "who understands that side of things a whole lot better than [you] do". I know that I can get VS Code to show errors when writing GSAP related code by following these steps. I think it's similar for Webstorm.

[frankmcpolin]

Haha, well unfortunately that person is having the exact same issue and already spent 4 hours trying to fix it today - and he's using VS Code. Just to be clear, the code hinting and autocompletion is fine for both, the issue is that I am getting gsap.whatever is not a function errors at runtime when the import is not there, yet surely I should be getting compile errors if the import is missing? The best way to describe it is that it's kinda like my dev environment thinks it's global, but the runtime doesn't! Does this make sense?

[ZachSaucier]

That's definitely an editor-level issue. I'm not sure if there is a work around. It's likely happening because the editors are using the package.json to see what you've imported and using the Type definitions on a project-level basis, not a file level basis. So you might have to choose between either having no hinting for GSAP or not having a warning about the failure to import. But again, code editors are not my specialty  It probably makes more sense to ask about this situation in a VS Code or Webstorm forum.

[frankmcpolin]

OK, thanks for your input Zach - I mean it does seem a bit too much of a coincidence that 2 developers on different machines, with different editors are experiencing identical issues to be purely IDE related.  I will prepare a sample repo, see if the problem persists and share it here if it does! Cheers!

[ZachSaucier]

Do other imported libraries that you have autocomplete support with not have a similar issue? 

 

I was trying to say that it seems like an issue/limitation with the IDEs themselves, not with any imported library.

[frankmcpolin]

Hi, sorry for the delay, but maybe the following project will explain better:

 

https://github.com/Endemol/typescript-pixi-boilerplate (node 11, run bash setup-project.sh or setup-project.bat)

 

You will see that the alpha fade tween will generate an error at runtime, but there is no indication either in the class or during the compile that I am missing the gsap import.

 

I can't believe this can be right as it will require all my developers to actively remember to manually add the import every time they want to use a gsap feature, which, as mentioned in the OP is an accident waiting to happen!

 

[GreenSock]

@frankmcpolin it looks like that URL goes to a 404 error.

 

Side note: I'm curious because you mentioned the bonus.tgz as well as "all my developers..." - I don't see any Club GreenSock memberships associated with your account or anyone from a similar domain. Maybe it's time to get a multi-developer "Business Green" one so that your team could have legal access to all the bonus plugins and the proper commercial license? 

 

4 hours ago, frankmcpolin said:

I can't believe this can be right as it will require all my developers to actively remember to manually add the import every time they want to use a gsap feature, which, as mentioned in the OP is an accident waiting to happen!

Yeah, that sounds like it'd be quite a bummer indeed but wouldn't this be an issue with your build setup (not GSAP)? I mean, it's not like there's anything specific about GSAP that's different than any other library that uses ES Modules, right? And you're totally welcome to use the regular UMD/ES5 files if you prefer - we provide 3 sets of files in various formats so that our users can tap into whichever one fits their needs best. 

[frankmcpolin]

Thanks @GreenSock - yes it is a bummer, and yes I am quite certain it is a config/setup issue, not at all suggesting it is a problem with the gsap package itself, but was hoping someone else had experienced this and had suggestions re webpack/tsconfig/some other magic bullet that would resolve it.

 

On the licence point, to clarify, I don't think I need one just yet, I am using the downloaded members package because I wanted to experiment with CustomEase. My project is still a long way from being releasable so is not commercialised yet (ie. end users aren't paying because there aren't any yet), and 'my developers' should probably read 'my future developers' - although I do have a freelancer help me from time to time so not sure if that counts, but I'm confused about this multi-developer point because I don't see reference to it on your licensing page.

 

(Repo may have been private, should work now.)

[OSUblake]

On 12/8/2020 at 1:15 PM, frankmcpolin said:

However, the problem I have is that this is not generating a compile time error if it has mistakenly not been imported.

 

GSAP will be global during development, so that could be why. Once you do a production build, the globals go away due to tree shaking. It's working as designed, which might cause problems for module users, but not everyone uses modules.

 

[OSUblake]

On 12/8/2020 at 1:15 PM, frankmcpolin said:

Even worse, Webstorm seems perfectly ok with me autocomnpleting a gsap. bit of code without doing the import.

 

The definitions are essentially global so they can be used by people who don't use modules.

 

[OSUblake]

On 12/13/2020 at 11:52 AM, frankmcpolin said:

I can't believe this can be right as it will require all my developers to actively remember to manually add the import every time they want to use a gsap feature, which, as mentioned in the OP is an accident waiting to happen!

 

GSAP can also be installed globally, so you only have to import it once.

gsap.install(window);

 

[danrostron]

I also had this problem, and solved it by using eslint no-restricted-globals rule, specifying 'gsap'.

ie. 

 

"no-restricted-globals": ["gsap"]

Sometimes, you don't want to allow the gsap into global scope in case of conflicts.

[ligr]

On 12/16/2020 at 5:25 AM, OSUblake said:

 

GSAP will be global during development, so that could be why. Once you do a production build, the globals go away due to tree shaking. It's working as designed, which might cause problems for module users, but not everyone uses modules.

 

Is there any recommended workaround to this for module users?

[OSUblake]

A workaround to do what? 

[ligr]

Disregard, our production build had type checking disabled and that allowed some missing TimelineMax errors to sneak through.