gaggo Posted July 30, 2020 Share Posted July 30, 2020 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 More sharing options...
GreenSock Posted July 30, 2020 Share Posted July 30, 2020 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'; 1 Link to comment Share on other sites More sharing options...
gaggo Posted July 30, 2020 Author Share Posted July 30, 2020 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. 1 1 Link to comment Share on other sites More sharing options...
GreenSock Posted July 30, 2020 Share Posted July 30, 2020 Thanks for letting us know, @gaggo! Someone else may run into the same issue in the future and be able to reference this. 🙌 Link to comment Share on other sites More sharing options...
gaggo Posted July 30, 2020 Author Share Posted July 30, 2020 For future reference: I posted an issue over at the parcel bundler github page: https://github.com/parcel-bundler/parcel/issues/4956 Link to comment Share on other sites More sharing options...
OSUblake Posted July 30, 2020 Share Posted July 30, 2020 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? Link to comment Share on other sites More sharing options...
gaggo Posted July 31, 2020 Author Share Posted July 31, 2020 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 More sharing options...
OSUblake Posted July 31, 2020 Share Posted July 31, 2020 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. 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now