Share Posted June 30, 2022 I'm confused about how to import ScrollTrigger into my svelte app. I tried: <script> import gsap from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; And I'm seeing: 500 Cannot use import statement outside a module C:\User\node\gsap\node_modules\gsap\ScrollTrigger.js:12 import { Observer, _getTarget, _vertical, _horizontal, _scrollers, _proxies, _getScrollFunc, _getProxyProp, _getVelocityProp } from "./Observer.js"; Thanks for advice Link to comment Share on other sites More sharing options...
Share Posted June 30, 2022 Are you running that in the browser? If so, browsers require that you declare type="module" in the script tag, and I think you also need to use a relative path to the module files, like you could start with "./" assuming it's in the same folder: <script type="module"> import gsap from './gsap.js'; import { ScrollTrigger } from './gsap/ScrollTrigger.js'; ... </script> This has nothing to do with GSAP - it's just how all browsers work with any JavaScript module. It's pretty uncommon to load the uncompressed ES Module files like that in the browser, though. Typically you'd want to just load the minified UMD files and then you don't need imports at all, you get universal compatibility, and faster load times. Just load the files that end in ".min.js" (in the minified folder of the download zip, or just link to the CDN files). https://greensock.com/install Link to comment Share on other sites More sharing options...
Author Share Posted June 30, 2022 9 minutes ago, GreenSock said: Thanks for the reply but this causes a bunch of different errors. If I use the CDN version, I'll also get errors because those things won't be defined (gsap / ScrollTrigger) I think I might need to wait for a Svelte user to weigh in on this, but can you confirm that this is the right way to import ScrollTrigger in Reavt/Vue ? Link to comment Share on other sites More sharing options...
Share Posted June 30, 2022 Yes, the original way you had it is the typical way to import GSAP and ScrollTrigger in a React project (or anything that is Node-based). EXCEPT that it's not in a <script> tag like that. Usually React projects have a build tool driving everything, so you just write normal import statements and the build tool handles compiling all that down into a JS file that gets injected via a <script> tag, often compiled into non-module code (ES5) for compatibility. None of that has anything to do with GSAP. Here's a starter template: https://codesandbox.io/s/gsap-svelte-starter-cbvtv If you're still having trouble, please fork that template and recreate the issue so we can see it in context. Link to comment Share on other sites More sharing options...
Author Share Posted July 1, 2022 Thanks for that, the codesandbox code works but it breaks as soon as I add ScrollTrigger. It works in codesandbox and breaks locally. I think I'm going to give up on Svelte. Link to comment Share on other sites More sharing options...
Share Posted July 1, 2022 Did you register the plugin? Seems to work fine: https://codesandbox.io/s/wonderful-panini-49uzep?file=/App.svelte Am I missing something? Link to comment Share on other sites More sharing options...
Author Share Posted July 1, 2022 20 minutes ago, GreenSock said: Yeah, it works in codesandbox but I get that error locally. I'm giving up on Svelte if you want to close this one. Link to comment Share on other sites More sharing options...
Share Posted July 1, 2022 Maybe this would help? 🤷♂️ https://svelte-recipes.netlify.app/build-setup/ Did you try importing from the /dist/ directory? Maybe that'd work if you're not transpiling. import gsap from "gsap/dist/gsap"; import ScrollTrigger from "gsap/dist/ScrollTrigger"; And make sure you gsap.registerPlugin(ScrollTrigger); Link to comment Share on other sites More sharing options...
Share Posted July 5, 2022 On 7/1/2022 at 4:29 AM, GreenSock said: Maybe this would help? 🤷♂️ https://svelte-recipes.netlify.app/build-setup/ Did you try importing from the /dist/ directory? Maybe that'd work if you're not transpiling. import gsap from "gsap/dist/gsap"; import ScrollTrigger from "gsap/dist/ScrollTrigger"; And make sure you gsap.registerPlugin(ScrollTrigger); When building using SvelteKit's static adapter in combination with typescript this throws the following error: Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/usr/src/app/node_modules/gsap/dist/ScrollTrigger' imported from /usr/src/app/.svelte-kit/output/server/entries/pages/__layout.svelte.js Did you mean to import gsap/dist/ScrollTrigger.js? The gsap import using import gsap from 'gsap'; seems to work fine. Importing the .js file directly conflicts with typescript: Could not find a declaration file for module 'gsap/dist/ScrollTrigger.js'. '/Users/roelvanhintum/Sites/ace-placeholder/app/node_modules/gsap/dist/ScrollTrigger.js' implicitly has an 'any' type. If the 'gsap' package actually exposes this module, try adding a new declaration (.d.ts) file containing `declare module 'gsap/dist/ScrollTrigger.js';`ts(7016) Link to comment Share on other sites More sharing options...
Share Posted July 5, 2022 5 hours ago, Born05 said: When building using SvelteKit's static adapter in combination with typescript this throws the following error: Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/usr/src/app/node_modules/gsap/dist/ScrollTrigger' imported from /usr/src/app/.svelte-kit/output/server/entries/pages/__layout.svelte.js Did you mean to import gsap/dist/ScrollTrigger.js? Ah, it sounds like your build system is looking for ES Modules, so there's no need to use the /dist/ directory in that case. Link to comment Share on other sites More sharing options...
Share Posted July 6, 2022 Importing gsap/ScrollTrigger.js throws the folliwing error: Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension. app_1 | (Use `node --trace-warnings ...` to show where the warning was created) app_1 | Cannot use import statement outside a module app_1 | /usr/src/app/node_modules/gsap/ScrollTrigger.js:12 app_1 | import { Observer, _getTarget, _vertical, _horizontal, _scrollers, _proxies, _getScrollFunc, _getProxyProp, _getVelocityProp } from "./Observer.js"; app_1 | ^^^^^^ app_1 | app_1 | SyntaxError: Cannot use import statement outside a module app_1 | at Object.compileFunction (node:vm:353:18) app_1 | at wrapSafe (node:internal/modules/cjs/loader:1040:15) app_1 | at Module._compile (node:internal/modules/cjs/loader:1076:27) app_1 | at Module._extensions..js (node:internal/modules/cjs/loader:1166:10) app_1 | at Module.load (node:internal/modules/cjs/loader:988:32) app_1 | at Module._load (node:internal/modules/cjs/loader:834:12) app_1 | at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:170:29) app_1 | at ModuleJob.run (node:internal/modules/esm/module_job:198:25) app_1 | at async Promise.all (index 0) app_1 | at async ESMLoader.import (node:internal/modules/esm/loader:409:24) Importing gsap/ScrollTrigger results in the following: Cannot use import statement outside a module app_1 | /usr/src/app/node_modules/gsap/ScrollTrigger.js:12 app_1 | import { Observer, _getTarget, _vertical, _horizontal, _scrollers, _proxies, _getScrollFunc, _getProxyProp, _getVelocityProp } from "./Observer.js"; app_1 | ^^^^^^ app_1 | app_1 | SyntaxError: Cannot use import statement outside a module app_1 | at Object.compileFunction (node:vm:353:18) app_1 | at wrapSafe (node:internal/modules/cjs/loader:1040:15) app_1 | at Module._compile (node:internal/modules/cjs/loader:1076:27) app_1 | at Module._extensions..js (node:internal/modules/cjs/loader:1166:10) app_1 | at Module.load (node:internal/modules/cjs/loader:988:32) app_1 | at Module._load (node:internal/modules/cjs/loader:834:12) app_1 | at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:170:29) app_1 | at ModuleJob.run (node:internal/modules/esm/module_job:198:25) app_1 | at async Promise.all (index 0) app_1 | at async ESMLoader.import (node:internal/modules/esm/loader:409:24) Link to comment Share on other sites More sharing options...
Share Posted July 6, 2022 Solution turns out to be: import { gsap } from 'gsap'; import { ScrollTrigger } from 'gsap/dist/ScrollTrigger.js'; Works in latest version of SvelteKit/vite. 3 Link to comment Share on other sites More sharing options...
Share Posted February 20 On 6/30/2022 at 12:12 AM, pguardiario said: import { ScrollTrigger } from 'gsap/ScrollTrigger'; Link to comment Share on other sites More sharing options...
Share Posted April 30 I'm also having problems with this in my sveltekit appliation. It was working just fine without /dist/ or whatever. I had a need to delete my node_modules folder for another reason.. I went to reinstall gsap and followed the same instructions I had a few weeks ago when I bought it... now i'm getting this: (node:59380) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension. 4:41:43 PM [vite] Error when evaluating SSR module /src/lib/components/Hero.svelte: failed to import "gsap/ScrollTrigger" |- C:\Users\ryzen\Documents\WoNdErLaNd\Personal\creative-briefer\peachy_brief\node_modules\gsap\ScrollTrigger.js:12 import { Observer, _getTarget, _vertical, _horizontal, _scrollers, _proxies, _getScrollFunc, _getProxyProp, _getVelocityProp } from "./Observer.js"; ^^^^^^ SyntaxError: Cannot use import statement outside a module 4:41:43 PM [vite] Error when evaluating SSR module /src/routes/+page.svelte: failed to import "/src/lib/components/Hero.svelte" |- C:\Users\ryzen\Documents\WoNdErLaNd\Personal\creative-briefer\peachy_brief\node_modules\gsap\ScrollTrigger.js:12 import { Observer, _getTarget, _vertical, _horizontal, _scrollers, _proxies, _getScrollFunc, _getProxyProp, _getVelocityProp } from "./Observer.js"; ^^^^^^ SyntaxError: Cannot use import statement outside a module C:\Users\ryzen\Documents\WoNdErLaNd\Personal\creative-briefer\peachy_brief\node_modules\gsap\ScrollTrigger.js:12 import { Observer, _getTarget, _vertical, _horizontal, _scrollers, _proxies, _getScrollFunc, _getProxyProp, _getVelocityProp } from "./Observer.js"; ^^^^^^ .............. Again, what the OP asked about and what I'm asking about aren't for us to "fix" with "module" because that's just not something you do or handle in svelte.... and it shouldn't be necessary. It wasn't necessary for me just a few hours ago until I broke it somehow. So, the question is.. what the heck happened and why can I not just reinstall the gsap-bonus tar like I did last time? Sigh It was working so well, too. Link to comment Share on other sites More sharing options...
Share Posted May 2 Hi @zadamg, Sorry about the inconveniences 😞 I just checked in Svelte's discord channel and I'll await an official word from them regarding this issue. It seems that the issue happens when you import any GSAP plugin in a SvelteKit app. I just created a new app using: npm create svelte@latest my-app Then I added the custom GSAP stuff to the .npmrc file (the first two lines are added by SvelteKit): engine-strict=true resolution-mode=highest registry=https://npm.greensock.com @gsap:registry=https://npm.greensock.com //npm.greensock.com/:_authToken=<your-token-here> And then in my home page I added this: import { onMount } from 'svelte'; import gsap from 'gsap'; import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'; import '../styles.css'; if (typeof window !== 'undefined') { gsap.registerPlugin(ScrollTrigger); } onMount(() => { const ctx = gsap.context(() => { ScrollTrigger.create({ trigger: '.content', start: 'top top', end: '+=100%', pin: true, markers: true }); }); return () => ctx.revert(); }); And everything is working as expected in development and the build preview as well. If possible create a minimal demo using the SvelteKit template installing the GSAP Trial package if you want to add some bonus elements, but using the regular GSAP package should be enough: https://stackblitz.com/?starters=fullstack Hopefully this helps. Happy Tweening! 1 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