Problem with Razzle and GSAP

[andrea_pergola 0 Likes (Newbie)]

Hi,

I found problems installing GSAP in a Razzle project. I think the problem is relative to SSR, because this is the only difference between a "create-react-app" and "create-razzle-app".

When i do "npm start":

 

/Users/alessandrobuoscio/dude_website_razzle/node_modules/gsap/all.js:1
import gsap from "./gsap-core.js";
       ^^^^

SyntaxError: Unexpected identifier
    at Module._compile (internal/modules/cjs/loader.js:721:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:690:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.gsap/all (/Users/alessandrobuoscio/dude_website_razzle/external "gsap/all":1:1)
    at __webpack_require__ (/Users/alessandrobuoscio/dude_website_razzle/build/webpack:/webpack/bootstrap:685:1)
    at fn (/Users/alessandrobuoscio/dude_website_razzle/build/webpack:/webpack/bootstrap:59:1)

 

How can i resolve this?

[OSUblake 13,905 Likes (Superhero)]

For SSR, you'll probably need to use the UMD/CommonJS files in the dist folder like this. There is no all.js file.

 

import { gsap } from "gsap/dist/gsap";
import { MotionPathPlugin } from "gsap/dist/MotionPathPlugin";

gsap.registerPlugin(MotionPathPlugin);

 

[andrea_pergola 0 Likes (Newbie)]

5 minutes ago, OSUblake said:

For SSR, you'll need to use the UMD/CommonJS files in the dist folder like this. There is no all.js file.

 

import { gsap } from "gsap/dist/gsap";
import { MotionPathPlugin } from "gsap/dist/MotionPathPlugin";

gsap.registerPlugin(MotionPathPlugin);

 

 

Thank you for the response. How can i import TweenMax and TimelineLite? There aren't in "dist" directory.

[OSUblake 13,905 Likes (Superhero)]

TweenMax and TimelineLite are just aliases for the new gsap.* syntax.

gsap.to(foo, {}); // Same as doing TweenMax.to(foo, 0.5, {});
gsap.timeline().to(foo, {}); // Same as doing new TimelineLite().to(foo, 0.5, {});

 

If you need them for backwards compatibility, just import them like this.

import { TweenMax, TimelineLite } from "gsap/dist/gsap";

 

[andrea_pergola 0 Likes (Newbie)]

Ok, now it works. Thank you!