Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
cgorton

import problem for Physics2D plugin in Vue

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

Me again ?. My boss and I have been having trouble importing the Physics2D plugin into our Vue application. I added it the the gsap/node_modules folder and tried to import it as seen in the image. I keep getting an error that says
"This dependency was not found:

* TweenLite in ./node_modules/gsap/Physics2DPlugin.js

To install it, you can run: npm install --save TweenLite"

But I can import TweenLite and it is also in the gsap/node_modules folder so I am not sure how to resolve it. I was able to import the ColorPropsPlugin just fine but cannot get the Physics one to load. Any suggestions?

Screen Shot 2018-08-28 at 2.52.45 PM.jpg

Link to comment
Share on other sites

Make sure you put the file from the bonus-files-for-npm-users folder. It shouldn't be looking for a relative module like

../TweenLite.js

 

The correct file will look for

gsap/TweenLite.js

 

  • Like 3
Link to comment
Share on other sites

Well I thought that fixed the problem. I did go back and add the one from the bonus-files-for-npm-users and stopped getting errors but now when I open the page it is completely blank. If I take the import 'gsap/Physics2dPlugin' out then I can see my template and styles again. I don't see any console errors or build errors so I am not sure why it is causing my screen to go completely blank when I add that import in. Anyone seen this problem before?
 

Link to comment
Share on other sites

Hm, can you share a reduced test case @cgorton

 

And by the way, you had a lowercase "d" incorrectly in that import statement. It's Physics2DPlugin. You had it right in your screen shot though.

 

Are you using the latest version of everything? 

 

Oh, and if you're doing tree shaking with your bundler, it may be dropping the plugins because you're not referencing them anywhere. The solution is to reference it somehow, like in a variable declaration:

 

var gsapPlugins = [Physics2DPlugin, ColorPropsPlugin]; 

 

Which also means you need to name your imports. Instead of simply "import 'gsap/Physics2DPlugin'" you'd need to do "import Physics2DPlugin from 'gsap/Physics2DPlugin'". Did you put the Physics2DPlugin.js file from "bonus-files-for-npm-users" into your node_modules/gsap folder? 

  • Like 3
Link to comment
Share on other sites

  • 3 weeks later...

Coming back to this in case anyone has any other suggestions. Initially we changed the tech we were using again so I stopped worrying about this plugin but now I need to use it again and am having the same problems. I have done all that was suggested above and still just get errors or a blank page. My boss gave me a few more things to try. We tried using a require statement in our main.js folder after I added the Physics2DPlugin.min.js to our plugins folder so I called it like this

require('./pluginsPhysics2dPlugin.min.js')
When I did I got this error again.
" This dependency was not found:
TweenLite in ./src/plugins/Physics2DPlugin.min.js "

So I tried requiring the uncompressed Physics2DPlugin and once again I got now errors but my screen was completely blank and nothing worked.

Next he suggested I try adding the plugin code to our own Amazon S3 bucket and calling it in the head of our index.html file. This didn't do anything either.

I'm at a loss on how to get these bonus plugins to work.
I am not sure how to provide a reduced test case. I didn't set up our existing project that was done by other engineers I am just going in and adding the animations.

Link to comment
Share on other sites

Ok so I got it to work. It ended up being a dumb mistake. I never went back and checked what version of GSAP we were using. It was like 1.2 something. I updated it and tried this way
Which also means you need to name your imports. Instead of simply "import 'gsap/Physics2DPlugin'" you'd need to do "import Physics2DPlugin from 'gsap/Physics2DPlugin'". Did you put the Physics2DPlugin.js file from "bonus-files-for-npm-users" into your node_modules/gsap folder? 

And now it works!

  • Like 1
Link to comment
Share on other sites

Thanks for letting us know you resolved it, @cgorton! Yeah, version 2.x is a bit easier for build systems to consume. 

 

Let us know if you need anything else at all. Happy tweening!

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