Jump to content
GreenSock

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

Problems bundling with Rekit

Recommended Posts

Hello everyone.

 

I have been trying to use MorphSVGPlugin for the last  24 hours and I don't fine my way out.

 

I'm writing a react App, using rekit which is based on create-react-app. It includes Babel, Webpack 3 for bundling, React hot loader for hot module replacement and so on.

 

So following other threads from this forum, I installed gsap by npm and then copied the membership plugins for npm users into node_modules/gsap, and then I can write

 

import  { TweenLite, TweenMax, MorphSVGPlugin } from 'gsap'

...
TweenMax.to("#start", 0.5, {morphSVG:"#end"})

 

When I try to use it I get "invalid morphSVG tween value: #end"

 

From what I've read it means MorphSVGPlugin is actually not added. To confirm I tried:

 

console.log(TweenLite)
console.log(TweenMax)
console.log(MorphSVGPlugin)

 

An only the last one shows undefined

 

The problem I think it's that MorphSVGPlugin is marked as unused and not added to bundle.js.

 

As I'm not familiar with the bundling process, I've trying to Google how to change the webpack config file or forcing the compiler to add it, but no luck so far.

 

I hosted it in https://s3.amazonaws.com/gsap-forum/index.html just for reference, but I think it's not necessary.

 

Can you please help?

 

Thanks in advance.

build.js

package.json

Link to comment
Share on other sites

If it's in your node_modules folder, you should be able to do this.

import "gsap/MorphSVGPlugin";

 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

STATUS: SOLVED

 

Thanks, I tried that before but I got the next error:
 

Module not found: Can't resolve 'TweenLite' in '/home/user/Websites/test/node_modules/gsap'

 

So I didn't think that way was the right one.

 

Because you suggested it, I took a closer look, and I found the problem was not in bundling but in react hot loader. yarn build works, and restarting the full project gives the hot loader the chance to work properly.

 

Have a nice day.

 

  • 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
  • Recently Browsing   0 members

    • No registered users viewing this page.
×