Jump to content
GreenSock

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

Getting error `Cannot use import statement outside a module` when importing Flip

Recommended Posts

 

 
import gsap from "gsap";
import Flip from "gsap/Flip";
gsap.registerPlugin(Flip);

 

500
Cannot use import statement outside a module
project_path/node_modules/.pnpm/@gsap+business@3.8.0/node_modules/@gsap/business/Flip.js:12
import { getGlobalMatrix, _getDocScrollTop, _getDocScrollLeft, Matrix2D, _setDoc, _isFixed, _getCTM } from "./utils/matrix.js";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1031:15)
    at Module._compile (node:internal/modules/cjs/loader:1065:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:94:18)
    at nodeRequire (/project_path/node_modules/.pnpm/vite@2.6.7/node_modules/vite/dist/node/chunks/dep-713b45e1.js:66487:17)
    at ssrImport (/project_path/node_modules/.pnpm/vite@2.6.7/node_modules/vite/dist/node/chunks/dep-713b45e1.js:66429:20)
Link to comment
Share on other sites

Welcome the forums @chanced

 

That means whatever tool/framework you are using doesn't support ES Modules, so you would need to import the UMD files. This is a common issue for frameworks that do SSR because of past limited support for ES Modules in a node environment.

 

import Flip from "gsap/dist/Flip";

 

  • Like 1
Link to comment
Share on other sites

I'm using Vite which supports ESM. 

Link to comment
Share on other sites

import Flip from "gsap/dist/Flip";

resolved it though. Thanks!

  • Like 1
Link to comment
Share on other sites

11 hours ago, chanced said:

I'm using Vite which supports ESM. 

 

It doesn't look like it supports ESM with SSR. This issue says that it uses require, which isn't compatible with ESM.

https://github.com/vitejs/vite/issues/4569

 

Regardless, the dist files will work with almost any build tool.

 

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.
×