Jump to content
Search Community

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

radiator test
Moderator Tag

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!

Link to comment
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
Link to comment
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!

Link to comment
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';

 

Link to comment
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. 

Link to comment
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!

Link to comment
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
Link to comment
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!

Link to comment
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!

Link to comment
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
Link to comment
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
Link to comment
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
Link to comment
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
Link to comment
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
Link to comment
Share on other sites

  • 2 years later...

Hey,

Driving me nuts for past day. Everything works perfectly fine testing and building the site local. When I push the update to build the site on Netlify, it cannot resolve any GSAP modules.

 

Any idea?

 

 

Link to comment
Share on other sites

Nope, using npm. It is an older project, I am upgrading to webpack 5. I just managed a failed build without the import errors from GSAP. My netlify.toml had and older npm version set in the build.environment. Since I upgraded it to 8.5.0, no GSAP errors but scrollMagic is playing up now. Joy of upgrading old projects. Will remove it anyway in favour for ScrollTrigger.

  • Like 1
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.
×
×
  • Create New...