Jump to content
Search Community

Couldn't import "Draggable" plugin into a Next.js 12 project

jxy test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

I installed the zip file by running "npm install ./gsap-bonus.tgz", then tried to import the "Draggable" plugin but failed.

 

If I import like this:

import { gsap } from "gsap";
import { Draggable } from "gsap/Draggable";

gsap.registerPlugin(Draggable);

... I get this error:

357230369_Screenshot2021-11-15at12_37_34PM.png.bd6629931c25860be72c95c8459f5da6.png

 

 

If I import like this:

 

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

gsap.registerPlugin(Draggable);

... I get this error:

453516987_Screenshot2021-11-15at12_37_12PM.png.8dae439804eb942377dba88dfb754187.png

 

 

PS: I successfully installed and imported the plugin into a "create-react-app" boilerplate project. So there must be compatibility issues with Next.js 12 and gsap....?

Link to comment
Share on other sites

  • Solution

I believe Next doesn't understand ES Modules, so you just need to import from the /dist/ directory like: 

import gsap from "gsap/dist/gsap";
import Draggable from "gsap/dist/Draggable";

And the error about "style" being unreadable, that's most likely because you're trying to gsap.registerPlugin() or animate BEFORE the window/document are available. Make sure you only interact with GSAP when the window and document are defined. 

  • Like 1
Link to comment
Share on other sites

41 minutes ago, GreenSock said:

I believe Next doesn't understand ES Modules, so you just need to import from the /dist/ directory like: 

import gsap from "gsap/dist/gsap";
import Draggable from "gsap/dist/Draggable";

And the error about "style" being unreadable, that's most likely because you're trying to gsap.registerPlugin() or animate BEFORE the window/document are available. Make sure you only interact with GSAP when the window and document are defined. 

Thanks for your reply!

 

I was trying to import gsap and Draggable into an empty create-next-app (no animation code at all). I placed  gsap.registerPlugin(Draggable) right below where I import gsap and Draggable. It didn't work:

 

triangle.js:

import React from "react";
import { gsap } from "gsap/dist/gsap";
import Draggable  from "gsap/dist/Draggable";

gsap.registerPlugin(Draggable);

function Triangle() {

  return (
   
   <></>
  );
}

export default Triangle;

 

index.js:

import Triangle from '../components/triangle';

export default function Home() {
  <Triangle />
}

 

Where else should I place the gsap.registerPlugin(Draggable); code then? 

 

Thank you!

Link to comment
Share on other sites

5 hours ago, GreenSock said:

I believe Next doesn't understand ES Modules, so you just need to import from the /dist/ directory like: 

import gsap from "gsap/dist/gsap";
import Draggable from "gsap/dist/Draggable";

And the error about "style" being unreadable, that's most likely because you're trying to gsap.registerPlugin() or animate BEFORE the window/document are available. Make sure you only interact with GSAP when the window and document are defined. 

I fixed this! You are so right! Simply placing gsap.registerPlugin(Draggable); inside of useEffect hook fixed this! Thank you so much!! So far my experience with Greensock has been awesome! 

 

Something like this:

 

import React, { useEffect } from "react";
import { gsap } from "gsap/dist/gsap";
import Draggable from "gsap/dist/Draggable";

export default function Component() {
  
  useEffect(() => {
    gsap.registerPlugin(Draggable);

    Draggable.create('#draggablediv', {
    
    });
    
    //...


  }, []);


  return (
    // ...
    
      );
}

 

  • Like 1
Link to comment
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.
×
×
  • Create New...