Jump to content
Search Community

node_modules/gsap/all.js does not export 'gsap' with tree shaking enabled

gaggo test
Moderator Tag

Recommended Posts

Hi there! I'm not sure if it's a problem with my bundler (parcel) or with gsap – I can't get parcel's scopeHoisting ( = tree shaking ) to work with gsap. It works just fine with all other libraries I use. This is what I do in my script:

// GSAP in with bundler, as seen here: https://www.youtube.com/watch?v=znVi89_gazE
import { gsap, CustomEase, ScrollToPlugin, Power4, Linear } from 'gsap/all';
gsap.registerPlugin(CustomEase, ScrollToPlugin);
gsap.registerEase(Linear, Power4);

If I bundle this without tree shaking, I get no errors. But as soon as I enable it, I get this error in my console:

 

../node_modules/gsap/all.js does not export 'gsap'

I am using the latest club gsap, with npm and gsap-bonus.tgz 

 

Any ideas?

Link to comment
Share on other sites

Hm, you can check the file and see for yourself that it does indeed export "gsap", so I'm not sure what to tell you. Definitely sounds like a question for the Parcel folks. I wish I had a magic bullet for ya. 

 

You could just import things from their various individual files instead of using "gsap/all". For example: 

import { gsap, Power4, Linear } from 'gsap';
import { CustomEase } from 'gsap/CustomEase';
import { ScrollToPlugin } from 'gsap/ScrollToPlugin';

 

  • Like 1
Link to comment
Share on other sites

Hi Jack,

 

Thanks so much for your quick feedback!

 

The issue was caused by my setup. I had a main index.js file, that's only purpose was to imported the main app.js, some scss and had a bit of bundler-specific code:

 

// app code
import './js/app/index';
// app scss
import './scss/app.scss';
// some bundler-specific stuff
if( module.hot ) {
  module.hot.accept(() => {
    window.location.reload();
  })
}

With the above setup, I kept getting the mentioned error when scopeHosting was enabled. I've spent an hour to get to the bottom of this, and it turns out it was due to the Side Effects Only import of the ./js/app/index file 🤯. So fixing it was as simple as that:

 

// Named import of app.js to support scopeHoisting
import App from './js/app/index';
// app scss
import './scss/app.scss';
// bundler related stuff
if( module.hot ) {
  module.hot.accept(() => {
    window.location.reload();
  })
}

The weird thing is, that it worked just fine with all my other node_modules. I will post at the parcel issue tracker, maybe we can find out more about it there.

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

8 hours ago, OSUblake said:

I wouldn't expect importing as a side effect to work once you do a production build... but maybe parcel does something different. 🤷‍♂️ 

 

What's it do... add the imports to the window or something?

 

From MDN:

Quote

Import an entire module for side effects only, without importing anything. This runs the module's global code, but doesn't actually import any values.

Since in my ./js/app/index file I have the main class and also call it from there, I thought this would be exactly what I wanted...

Link to comment
Share on other sites

Side effects are usually for global stuff, and gsap modules aren't global. They might seem global during development, but tree shaking usually drops all the gsap globals for production builds.

 

But I don't know anything about parcel or how you are consuming gsap. 

  • Like 2
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...