Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
mango-nyc

Plugin issue with GSAP3 NPM and Nuxt.js

Recommended Posts

I'm having a problem getting GSAP3 PlugIns to work in a Nuxt(2.10.2) project.

 

To make sure it wasn't something else I had installed within my existing project, I created a new base nuxt project and I installed GSAP with the .tgz file from the "npm-install-this" directory.

 

If I add the the base gsap as in 

import { gsap } from "gsap";

it works fine, I ran a small tween to test. 

 

However, when I try to introduce a plugin, as suggested, and refresh the browser- not even using the plugin, just importing it.

import { PixiPlugin } from "gsap/PixiPlugin.js";
gsap.registerPlugin(PixiPlugin);

 

I get an syntax error stating "Unexpected token export" (pic attached)

 

In my troubleshooting, I went back and created a base Vue CLI(v 4.0.5) Project to test, and installed GSAP with the same methods suggested on the site here,  and using the same code as above, and everything works fine. I imported the CustomWiggle plugin and it works fine.

 

So I believe the issue is with Nuxt somehow. I do need to use a Custom Plugin, and I've already started to rewrite my animation in the new format, so I'd hate to go backwards if not necessary.

 

Thanks

 

GSAP3:NuxtIssue.png

Share this post


Link to post
Share on other sites

I don't think nuxt supports es-modules. I think nuxt is importing the umd file when you do this.

 

import { gsap } from "gsap";

// It's probably importing this.
import { gsap } from "gsap/dist/gsap";

 

So try importing umd files like this.

 

import { gsap } from "gsap/dist/gsap";
import { PixiPlugin } from "gsap/dist/PixiPlugin.js";
gsap.registerPlugin(PixiPlugin);

 

And if PixiJS is not global, you'll need to register it.

https://greensock.com/docs/v3/Plugins/PixiPlugin/static.registerPIXI()

 

cc @GreenSock @ZachSaucier The installation docs should probably mention that frameworks that do SSR, like nuxt, will probably need to use the umd files.

  • Like 3
  • Thanks 1

Share this post


Link to post
Share on other sites

Thanks! That worked perfectly.

Really appreciate it.

Share this post


Link to post
Share on other sites
1 hour ago, OSUblake said:

cc @GreenSock @ZachSaucier The installation docs should probably mention that frameworks that do SSR, like nuxt, will probably need to use the umd files.

 

And mention that if a user sees an error like unexpected token import or unexpected token export, that they probably need to use the umd files.

 

Also, add yarn installation instructions.

 

yarn add gsap
yarn add ./gsap-bonus.tgz

 

Sorry, I'm not comfortable editing the docs. I don't know what I'm doing, and if I'll mess something up.

  • Like 2

Share this post


Link to post
Share on other sites

Thanks @OSUblake, this works fine using the normal NPM install, and using the "transpile" in build. 

This is even cleaner for me than using the /dist/.

Thanks again for the great solution.

  • Like 2

Share this post


Link to post
Share on other sites

Hi @OSUblake and @mango-nyc,

 

I've been going in circles, I hope you can help. I'm also trying to get the plugins working inside Nuxt.

GSAP3 itself runs just fine as a normal import, however when trying to get the premium plugins working I'm getting stuck.

 

I've added gsap to Nuxt via Yarn (./gsap-bonus.tgz), and imported gsap and MorphSVG from the folder.

 

If I try import from the non-dist folder (with build / transpile setting as above in the nuxt config ), I get an error :

_toArray is not a function

 

If I import from the dist folder (UMD?), as above, I get a window error. I've encountered this before and understand it's because the SSR side doesn't have a window. If I then wrap the imports in the (process.client) check (to force client side), and convert them to requires instead, I still get a window error.

 

Cannot assign to read only property 'window' of object

 

I've created a CodeSandbox with the zip inside to demonstrate, I will happily paste the link if that's okay.

It'd be great to get a definitive boilerplate setup for these issues. I feel like I've tried all the advice I've seen, but am still getting stuck.

 

Thanks for the support.

 

Edited by kith+kin
Duplicated wording

Share this post


Link to post
Share on other sites
3 minutes ago, kith+kin said:

I've created a CodeSandbox with the zip inside to demonstrate, I will happily paste the link if that's okay.

 

Yes!

Share this post


Link to post
Share on other sites

Ok, without doing transpile: ["gsap"], I got it to work like this. Using require, it imports an object. 

 

let gsap, Back, MorphSVGPlugin;

if (process.client) {
  const gsapModule = require("gsap/dist/gsap");
  gsap = gsapModule.default;
  Back = gsapModule.Back;
  MorphSVGPlugin = require("gsap/dist/MorphSVGPlugin.js").default;
  gsap.registerPlugin(MorphSVGPlugin);
}

 

Using transpile: ["gsap"], this worked for me.

import { gsap, Back } from "gsap";
import { MorphSVGPlugin } from "gsap/MorphSVGPlugin";

if (process.client) {
  gsap.registerPlugin(MorphSVGPlugin);
}

 

Not sure why the transpile option was causing a problem. Well, at least on codesandbox it was.

 

I'm importing Back because you are using it, but you don't need to if you use the string syntax.  And your morphSVG syntax is wrong. If you're using shapeIndex, you need to use an object.

 

timeline.to(line, {
  duration: 1,
  ease: "back.inOut(1.4)",
  transformOrigin: "center center",
  morphSVG: {
    shape: triangle,
    shapeIndex: 4
  }
});

 

You might need to restart the server because of the hot module stuff.

 

And you can delete your sandbox link if this solves your problem.

  • Like 2

Share this post


Link to post
Share on other sites

Ahah! That's great thanks Blake.


So I'm positive I did it the same as what you did (via the transpile method), although I think what might have been breaking it is I used code from GSAP 2, which as you've pointed out wasn't right.

 

I've just ported this over to my in-development site and it's worked.

Really appreciate the assistance.

  • Like 1

Share this post


Link to post
Share on other sites

Most of the code from v2 will still work, but you will have to import it. ex.

 

import { gsap, TweenMax, TimelineMax, Power2 } from "gsap";

 

Also, there's a file called all where you can import everything from it. 

 

import { gsap, TweenMax, TimelineMax, MorphSVGPlugin, Draggable } from "gsap/all";

 

  • Like 1

Share this post


Link to post
Share on other sites
1 minute ago, OSUblake said:

Most of the code from v2 will still work, but you will have to import it. ex.

 


import { gsap, TweenMax, TimelineMax, Power2 } from "gsap";

 

Also, there's a file called all where you can import everything from it. 

 


import { gsap, TweenMax, TimelineMax, MorphSVGPlugin, Draggable } from "gsap/all";

 

It's weird - I don't have an example to hand, but I basically dropped in some (non-plugin based) GSAP2 code I had previously used in to a new Nuxt project the other day, which worked great on local but after being compiled through the 'generate' command just wouldn't work, that was both transpiling and not.

 

I changed the code to the new syntax, and it started working. I probably should have done the same thing here rather than just assuming.

Is it a better idea to use gsap/all? Is it more useful because everything can be imported from it? are there other benefits?

 

Thank you for your help again.

Share this post


Link to post
Share on other sites
On 11/27/2019 at 11:12 AM, kith+kin said:

worked great on local but after being compiled through the 'generate' command just wouldn't work, that was both transpiling and not.

 

Sounds like some stuff might have been dropped due tree shaking. That's what gsap.registerPlugin helps prevent, but I don't know if that was the issue.

 

On 11/27/2019 at 11:12 AM, kith+kin said:

Is it a better idea to use gsap/all? Is it more useful because everything can be imported from it? are there other benefits?

 

There's no benefit other than there is less code for you to write.

import { gsap, TweenMax, TimelineMax, MorphSVGPlugin, Draggable } from "gsap/all";

// vs
import { gsap, TweenMax, TimelineMax } from "gsap";
import { MorphSVGPlugin } from "gsap/MorphSVGPlugin";
import { Draggable } from "gsap/Draggable";

 

 

  • Like 1

Share this post


Link to post
Share on other sites
On 11/27/2019 at 5:12 PM, kith+kin said:

It's weird - I don't have an example to hand, but I basically dropped in some (non-plugin based) GSAP2 code I had previously used in to a new Nuxt project the other day, which worked great on local but after being compiled through the 'generate' command just wouldn't work, that was both transpiling and not.

I had similar problem after upgrade gsap to v3 on my next.js project, when run yarn build all animations stopped working (any errors, console was clear just site was broken). In yarn dev mode everything works quite smooth. I had to update timelines to new syntax to make it working fine after yarn build

 

From:

import { TimelineMax } from 'gsap'
...
this.linksTween = new TimelineMax({ paused: true })
...
componentDidMount() {
  this.linksTween.to(
      this.refText.current,
      0.5,
      {
          fill: "#ffffff"
      },
  )
}

To:

import gsap from 'gsap'
...
this.linksTween = gsap.timeline({ paused: true })
...
componentDidMount() {
    this.linksTween.to(
        this.refText.current,
        {
            fill: "#ffffff",
            duration: 0.5
        },
    )
}

 

Share this post


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.

×