FLIP in Next.js does not work (GSAP works fine in Next.js)

[null]

I am a club GreenSock member and have been using GSAP inside Next.js with great results.

 

However, when I try to use the Flip plug  I get the following error:

 

C:\dev\web-app-frontend\node_modules\gsap\Flip.js:12
import { getGlobalMatrix, _getDocScrollTop, _getDocScrollLeft, Matrix2D, _setDoc, _isFixed, _getCTM } from "./utils/matrix.js";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:992:16)
    at Module._compile (internal/modules/cjs/loader.js:1040:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
    at Module.load (internal/modules/cjs/loader.js:941:32)
    at Function.Module._load (internal/modules/cjs/loader.js:782:14)
    at Module.require (internal/modules/cjs/loader.js:965:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.gsap/Flip (C:\dev\web-app-frontend\.next\server\pages\_app.js:1183:18)
    at __webpack_require__ (C:\dev\web-app-frontend\.next\server\pages\_app.js:23:31)
    at Module../src/components/sidedrawer/sidedrawer.tsx (C:\dev\web-app-frontend\.next\server\pages\_app.js:912:67)
    at __webpack_require__ (C:\dev\web-app-frontend\.next\server\pages\_app.js:23:31)
    at Module../src/components/layout/layout.tsx (C:\dev\web-app-frontend\.next\server\pages\_app.js:433:95)
    at __webpack_require__ (C:\dev\web-app-frontend\.next\server\pages\_app.js:23:31)
    at Module../src/pages/_app.tsx (C:\dev\web-app-frontend\.next\server\pages\_app.js:1058:87)
    at __webpack_require__ (C:\dev\web-app-frontend\.next\server\pages\_app.js:23:31)
    at Object.0 (C:\dev\web-app-frontend\.next\server\pages\_app.js:1160:18)
 

I am importing Flip as follows:

 

import { gsap } from 'gsap';

import { Flip } from 'gsap/Flip';

gsap.registerPlugin(Flip);

 

What am I doing wrong?

[OSUblake]

Hi @null

 

Next.js does not support ES Modules, hence the error about import not being valid. You need to import the UMD files from the dist folder.

import { Flip } from 'gsap/dist/Flip';

 

[null]

Hi @OSUblake

 

Thank you for the speedy response.

 

It worked!

 

[MichaelSmith00]

Thanks a lot for information