Jump to content


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

Recommended Posts


import gsap from "gsap";
import Flip from "gsap/Flip";


Cannot use import statement outside a module
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 3
  • Thanks 2
Link to comment
Share on other sites

import Flip from "gsap/dist/Flip";

resolved it though. Thanks!

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



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.