Jump to content
GreenSock

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

DrawSVG with webpack

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

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

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 3 months later...

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

Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

  • 1 year later...

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. 

Link to comment
Share on other sites

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!

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