Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
andrea_pergola

Problem with Razzle and GSAP

Recommended Posts

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?

Link to post
Share on other sites

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);

 

  • Like 2
Link to post
Share on other sites
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.

Link to post
Share on other sites

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";

 

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

×