chanced Posted October 15, 2021 Share Posted October 15, 2021 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) 1 Link to comment Share on other sites More sharing options...
OSUblake Posted October 15, 2021 Share Posted October 15, 2021 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"; 6 4 Link to comment Share on other sites More sharing options...
chanced Posted October 15, 2021 Author Share Posted October 15, 2021 I'm using Vite which supports ESM. Link to comment Share on other sites More sharing options...
chanced Posted October 15, 2021 Author Share Posted October 15, 2021 import Flip from "gsap/dist/Flip"; resolved it though. Thanks! 3 Link to comment Share on other sites More sharing options...
OSUblake Posted October 15, 2021 Share Posted October 15, 2021 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. 2 Link to comment Share on other sites More sharing options...
SJH Posted June 10, 2022 Share Posted June 10, 2022 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'], } 1 Link to comment Share on other sites More sharing options...
bradmacer Posted August 3, 2022 Share Posted August 3, 2022 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", // ... } 2 Link to comment Share on other sites More sharing options...
phyllisstein Posted August 20, 2023 Share Posted August 20, 2023 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', ], }, }) 2 3 Link to comment Share on other sites More sharing options...
Cassie Posted August 21, 2023 Share Posted August 21, 2023 We appreciate the bump. Thank you! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now