Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
pguardiario

Problems importing ScrollTrigger

Recommended Posts

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

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

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

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

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.

image.png.ef2051bfe0dd24f9244762a1b1c33577.png

Link to comment
Share on other sites

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

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

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

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

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

Solution turns out to be:

import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/dist/ScrollTrigger.js';

Works in latest version of SvelteKit/vite.

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