Jump to content
GreenSock

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 2
  • Thanks 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.

 

  • Like 1
Link to comment
Share on other sites

  • 7 months later...

In case this might help someone else, I am using Nuxt and I'm adding GSAP to global mixins, and this helped: added the following inside my 'nuxt.config.js' file...

 

build: {
transpile: ['gsap'],
}
  • Like 1
Link to comment
Share on other sites

  • 1 month later...

This error can happen in different cases depending on whether you're working with JavaScript on the server-side with Node.js , or client-side in the browser. There are several reasons behind "Cannot use import statement outside a module"  error, and the solution depends on how you call the module or script tag.

 

Add type="module" inside the script tag

 

When working with ECMAScript modules and JavaScript module import statements in the browser, you'll need to explicitly tell the browser that a script is module. To do this, you have to add type="module" onto any ‹script› tags that point to a JavaScript module. Once you do this you can import that module without issues.

 

<script type="module" src="./index.js"></script>

 

If you are working on Node.js or react applications and using import statements instead of require to load the modules, then ensure your package.json has a property "type": "module" as shown below.

 

{
  // ...
  "type": "module",
  // ...
}


 

  • Like 2
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.
×