Jump to content
Search Community

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

chanced test
Moderator Tag

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)
  • Like 1
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 6
  • Thanks 4
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

  • 1 year later...

Hate to bump an old thread, but in case anyone else is led here by Google, the trick is to exclude GSAP from Vite's SSR bundler. This was enabled by default in SvelteKit and gave me a greasy headache as well. Here's the fix:

 

// vite.config.ts

import {defineConfig} from 'vite'

export default defineConfig({
  // --- ✁ snip
  ssr: {
    noExternal: [
      'gsap',
      '@gsap/shockingly',
    ],
  },
})

 

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