Problems bundling with Rekit

[dadiaar 3 Likes (Newbie)]

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

[OSUblake 9,990 Likes (Superhero)]

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

import "gsap/MorphSVGPlugin";

 

[dadiaar 3 Likes (Newbie)]

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.