xoxoxoxo Posted November 24, 2020 Share Posted November 24, 2020 I'm using NextJS and I want to utilize it's treeshaking capabilities. What would be the proper to way to import gsap? Inside the docs I see exampes but I have questions: I import gsap like this: import gsap from 'gsap'; import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'; if (process.browser) { gsap.registerPlugin(ScrollTrigger); } My bundle sizes seems large doing it this way. I see diff ways to import gsap though and not sure which one to follow: import { gsap } from 'gsap'; import gsap from 'gsap'; import gsap from 'gsap/all' Link to comment Share on other sites More sharing options...
Rodrigo Posted November 24, 2020 Share Posted November 24, 2020 I always use this approach and it works fine: import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; if (typeof window !== "undefined") { gsap.registerPlugin(ScrollTrigger); } Keep in mind that process.browser is an environmental variable from webpack, not NextJS, so you shouldn't rely on it for production. You can check other ways to do that in this article: https://dev.to/vvo/how-to-solve-window-is-not-defined-errors-in-react-and-next-js-5f97 Happy Tweening!!! 5 1 Link to comment Share on other sites More sharing options...
xoxoxoxo Posted November 24, 2020 Author Share Posted November 24, 2020 @Rodrigo When I do that I get the following error: Is this related to transpiling modules? export var ScrollTrigger = /*#__PURE__*/function () { SyntaxError: Unexpected token export Link to comment Share on other sites More sharing options...
GreenSock Posted November 24, 2020 Share Posted November 24, 2020 That typically means you're using the ES Modules but your build system doesn't understand modules. So just use the ES5 files from the /dist/ directory like you were doing originally: // ES Modules: import { ScrollTrigger } from "gsap/ScrollTrigger"; // ES5 non-module files import { ScrollTrigger } from "gsap/dist/ScrollTrigger"; But try Rodrigo's conditional logic instead of process.browser. 2 Link to comment Share on other sites More sharing options...
xoxoxoxo Posted November 25, 2020 Author Share Posted November 25, 2020 Do you mean ES modules on the server side with NextJS? Cause I've exported other libraries and it seems to work fine those kind of imports. Link to comment Share on other sites More sharing options...
GreenSock Posted November 25, 2020 Share Posted November 25, 2020 1 minute ago, nullhook said: Do you mean ES modules on the server side with NextJS? I just mean ES modules period - I'm totally unfamiliar with NextJS. I just meant that when someone gets a message like "SyntaxError: Unexpected token export", it means they're using ES modules in an environment that doesn't understand them. 3 minutes ago, nullhook said: I've exported other libraries and it seems to work fine those kind of imports. What do you mean you've "exported other libraries"? Do you mean you imported them? Or you ran them through your bundler? Are you saying those libraries were built as modern ES Modules (like GSAP Is) and they worked? Link to comment Share on other sites More sharing options...
xoxoxoxo Posted November 25, 2020 Author Share Posted November 25, 2020 Yes, I meant "export". Looks like NextJS excludes everything inside node_modules from being transpiled through babel. Anyone who comes across this issue has to use next-transpile plugin which transpiles all node_modules. I will use the provided non-module ScrollTrigger plugin as workaround. Does this mean webpack won't treeshake gsap or scrolltrigger? Link to comment Share on other sites More sharing options...
GreenSock Posted November 25, 2020 Share Posted November 25, 2020 12 hours ago, nullhook said: Does this mean webpack won't treeshake gsap or scrolltrigger? When you say "treeshake GSAP or ScrollTrigger", do you mean drop it completely if you're not using it? Probably, but that's more of a Webpack question and these forums are for GSAP-specific questions. Beware, though, that GSAP itself (and ScrollTrigger) are highly integrated systems that don't have a lot of unused "fluff". So there isn't much tree shaking that can happen internally (if any). It must be ready to animate just about anything and there's no way to build it to, for example, dump all the CSS-related capabilities if you don't happen to have a CSS-related tween in your code. 1 Link to comment Share on other sites More sharing options...
xoxoxoxo Posted November 26, 2020 Author Share Posted November 26, 2020 makes sense. thanks! 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