What is the proper way to import inside nexxtjs?

[xoxoxoxo]

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'

 

 

[Rodrigo]

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!!!

[xoxoxoxo]

@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

[GreenSock]

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. 

[xoxoxoxo]

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.

[GreenSock]

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?

[xoxoxoxo]

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? 

[GreenSock]

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. 

[xoxoxoxo]

makes sense. thanks!