import problem for Physics2D plugin in Vue

[cgorton]

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?

[OSUblake]

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

 

[cgorton]

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?
 

[GreenSock]

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? 

[cgorton]

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.

[cgorton]

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!

[GreenSock]

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!