Jump to content
GreenSock

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

[v3] Webpack importing error, module not found 'gsap/gsap'

Recommended Posts

Hi!

 

Love all the new features in v3 but having a heck of a time upgrading.

 

I noticed that I'm getting an error when importing per the docs. 

// Import per the docs
import { gsap } from 'gsap';
// Module not found: Error: Can't resolve 'gsap/gsap' in '/Users/my/project/path'

// This works
import { gsap } from 'gsap/all';

// So does this
import { gsap } from 'gsap/index';

I'm not sure why it isn't finding index.js by default when importing from 'gsap'. Webpack seems to want the file name to match the folder name. I'm not a package author so out of my element there. Have a pretty standard webpack config...

 

Renaming gsap/index.js to gsap/gsap.js works with import { gsap } from 'gsap'.

 

It also works if I alias it in webpack:

...
alias: {
  gsap: path.resolve('./node_modules/gsap/index'),
}

 

Thanks in advance for any insight!

Share this post


Link to post
Share on other sites

That's pretty weird indeed - worked fine in our Webpack tests. 

 

Have you tried simply: 

import gsap from "gsap";

?

 

And you're sure you don't have "gsap/gsap" referenced somewhere in an import? Perhaps in a different file? Because yeah, that'd explain the error being thrown, as that file doesn't exist. 

  • Like 1

Share this post


Link to post
Share on other sites

Weird indeed.

 

Importing as a default vs. named works, but it doesn't get everything for the backwards compatibility, so I have to then do:

// This gets gsap but not all the other backwards compatible goodies.
import gsap from 'gsap';
// So then need to import them out of gsap/all anyway
// This is before refactoring to new syntax, tweens are still same format as v2
import { TweenMax, TimelineMax, Power2 } from 'gsap/all';

Confirmed i'm not importing gsap/gsap anywhere.

 

Once I refactored the animations to the new syntax, the default import works.

 

Thanks so much!

Share this post


Link to post
Share on other sites

Hm, any chance you could provide a reduced test case? The less code the better. Just the bare minimum to generate that error. Perhaps a Github project you could shoot over to me or stackblitz or whatever? 

Share this post


Link to post
Share on other sites

Sure thing. https://js-rg982s.stackblitz.io

 

I'm guessing this is correct behavior actually...

 

EDIT - actually - just noticed something, in case anyone else has this issue.

// This breaks tree shaking and imports everything
import gsap from 'gsap';

// So does this
import { gsap } from 'gsap/all';

// This respects tree shaking, pulls in only what you ask for
import { gsap } from 'gsap/index';

 

Share this post


Link to post
Share on other sites

I'm just seeing an error about your code referencing TweenMax (which is a valid error from what I can tell, since you didn't import it). 

 

The stackblitz link didn't give me access to the raw code or anything - is there a different link I need to go to for that? It's almost like that was a debug view. 

 

As for tree shaking, I'd really need to see your build system setup. It really sounds like something is odd on your end but it's tough to say. 

Share this post


Link to post
Share on other sites

Yeah, I apologize for creating some noise here. 

 

Once I made the repro ( https://stackblitz.com/edit/js-rg982s ) I was like, duh yeah of course you need to import the legacy stuff. 

 

I'd love to get some eyes on our repo to see if there is anything funky going on in build but unfortunately its not something I can share. 

 

In any event, I've successfully updated to v3 across our entire codebase today and with the exception of the issue where the display property gets added to end of tween instead of beginning ( we do a lot of hide/show stuff with that ), it was pretty smooth once I got the imports to work in our build.

 

Im using: 

import { gsap } from 'gsap/index'

and everything is tree shaking and working great. Not sure why just 'gsap' isn't working for us but obviously it is for others.

 

Was able to reduce our bundle size quite a bit with this v3 update! Appreciate all the work you all put into it!

Share this post


Link to post
Share on other sites
2 minutes ago, radiator said:

I'd love to get some eyes on our repo to see if there is anything funky going on in build but unfortunately its not something I can share. 

 

We don't need to see your project. Just recreate the issue in another repo. Everything you've said goes against every webpack test I've done, and we'd like to see what the issue is so we can fix it.

  • Like 2

Share this post


Link to post
Share on other sites

You only need to do this in your stackblitz demo.

 

import { gsap, TweenMax } from 'gsap';

 

  • Like 1

Share this post


Link to post
Share on other sites

Sure thing. It might take me a while to extract it out to its simplest forms. I'm in a production project with a lot of moving parts, but the webpack bits that deal with JS bundling is pretty straightforward, so will definitely post it once I strip it down.

 

Thanks again for GSAP!

Share this post


Link to post
Share on other sites
1 minute ago, OSUblake said:

You only need to do this in your stackblitz demo.

 


import { gsap, TweenMax } from 'gsap';

 

Yep, I noticed that right away. It was obvious in the repro but not so much in the file i was working in at the time. Thanks!

Share this post


Link to post
Share on other sites
Just now, radiator said:

Sure thing. It might take me a while to extract it out to its simplest forms. I'm in a production project with a lot of moving parts, but the webpack bits that deal with JS bundling is pretty straightforward, so will definitely post it once I strip it down.

 

Thanks. We'd appreciate it.

 

Also wanted to point out that there really shouldn't be anything to tree shake when importing from 'gsap' or 'gsap/index'. At least not that I can think of.

 

2 hours ago, radiator said:

EDIT - actually - just noticed something, in case anyone else has this issue.


// This breaks tree shaking and imports everything
import gsap from 'gsap';

// So does this
import { gsap } from 'gsap/all';

// This respects tree shaking, pulls in only what you ask for
import { gsap } from 'gsap/index';

 

 

  • Like 1

Share this post


Link to post
Share on other sites

It could be related to my importing issue. 

 

Also totally and maybe even more likely probable that there is an issue our Webpack itself. On version 4.1.1 and latest is 4.41.2

 

// In my build, this brings in everything, all the plugins, the whole shebang
import gsap from 'gsap';

// So does this. 
import { gsap } from 'gsap/all';

// In gsap/all.js not sure how webpack deals with these exports that arent named..
// For me they all come in
//...
export * from "./Draggable.js";
export * from "./CSSRulePlugin.js";
export * from "./EaselPlugin.js";
//...

Hopefully when I go to do the repro I can pin it down more. Thanks again!

  • Like 1

Share this post


Link to post
Share on other sites
2 minutes ago, radiator said:

 


// In gsap/all.js not sure how webpack deals with these exports that arent named..
// For me they all come in
//...
export * from "./Draggable.js";
export * from "./CSSRulePlugin.js";
export * from "./EaselPlugin.js";
//...

 

 

During development, gsap/all will import everything. When you do a production build, it should drop any exports that you don't use.

  • Like 2

Share this post


Link to post
Share on other sites

Also, I would avoid mixing different import sources. So don't import from "gsap" in one file, and import from "gsap/all" in another file. Use one or the other.

Share this post


Link to post
Share on other sites
1 hour ago, OSUblake said:

Also, I would avoid mixing different import sources. So don't import from "gsap" in one file, and import from "gsap/all" in another file. Use one or the other.

Totally. I just finished the migration from v2 to v3 on our entire codebase and I have to say it went pretty smooth, just a little rough start, probably of our own doing. 

 

My only bugaboo is the original issue - where I can't import from 'gsap', need to use 'gsap/index' for whatever reason ( fair to say after some testing now this is most likely local to my Webpack config ).

 

Everything is importing, trees are shaking and my total gsap footprint is down about 60% from v2 ( I also was able to remove and simply some stuff like staggers and keyframes )! All smiles over here!

 

Thanks again!

 

image.thumb.png.1a48f415bd6b97160ec2d090bc1d07da.png

Edited by radiator
Adding an image reference of bundle
  • Like 2

Share this post


Link to post
Share on other sites
6 minutes ago, radiator said:

My only bugaboo is the original issue - where I can't import from 'gsap', need to use 'gsap/index' for whatever reason ( fair to say after some testing now this is most likely local to my Webpack config ).

 

Definitely sounds like some sort of module resolution issue with your setup. By default, 'gsap' should automatically resolve to 'gsap/index' or technicialy './node_modules/gsap/index.js'.

 

6 minutes ago, radiator said:

Everything is importing, trees are shaking and my total gsap footprint is down about 60% from v2 ( I also was able to remove and simply some stuff like staggers and keyframes )! All smiles over here!

 

That's awesome! 

  • Like 2

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×