DrawSVG with webpack

[kevinbaes 0 Likes (Newbie)]

Hi everyone,
 
I try to import DrawSVG with webpack but I have an error. 

 

ERROR in ./resources/assets/js/plugins/DrawSVGPlugin.js

Module not found: Error: Can't resolve 'TweenLite' in

import {  TweenMax,  TimelineMax } from "gsap";
import DrawSVGPlugin from './plugins/DrawSVGPlugin';
import Draggable from 'gsap/Draggable';

 

 

For informations, Draggable works well.
The DrawSVGPlugin version is the last : 0.1.2.

Thank's

[GreenSock 18,577 Likes (Superhero)]

Are you using NPM? If so, it uses a flat directory structure and you can simply grab the DrawSVGPlugin.js file from the "commonjs-flat" folder of the download zip and drop it into your "gsap" directory in node_modules. There are other ways to solve this as well, but that's probably the simplest. 

[kevinbaes 0 Likes (Newbie)]

Yes we're using NPM, we could grab this file and drop it in GSAP folder but our deployment flow would be broken.

For now I changed the define 'TweenLite' to '.TweenLite' and copied Tweenlite.js in my directory... not the best option I guess.

[cmal 10 Likes (Newbie)]

Same issue here. Using npm for all non-Club Greensock imports.

[cmal 10 Likes (Newbie)]

Actually, appears I was able to resolve this just by importing DrawSVGPlugin.js from the commonjs-flat directory instead of uncompressed.

[Robbert89 5 Likes (Newbie)]

Maybe you can prevent this by using the imports loader.

The imports loader allows you to use modules that depend on specific global variables.

 

In your project install the imports-loader (yarn is used in this example) 

yarn add imports-loader

 

once this is installed you can import the drawSVGPlugin 

import 'imports-loader?define=>false!gsap/uncompressed/plugins/DrawSVGPlugin';

check if you have the correct path... in my case the path is gsap/uncompressed/plugins because i downloaded the files from Greensock and putted the map directly into my node modules. 

 

Thought it might be helpfull for anyone who runs into this. 

[GreenSock 18,577 Likes (Superhero)]

Thanks for posting your solution, @Robbert89!

 

Also, there's a "bonus-files-for-npm-users" folder in the download zip that might make this even simpler. They're in ES modules by default, but there's also a "umd" folder with that format as well. 

 

Happy tweening!