Can't resolve 'gsap/ScrollTrigger'

sage
1

Hi there :wave:

I’m working on a project where i would like to make use of gsap and scrolltrigger. gsap is not the problem, but when i’m importing ScrollTrigger the issue’s occur.

Did you mean 'ScrollTrigger.js'?
BREAKING CHANGE: The request 'gsap/ScrollTrigger' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

… Error details This error was thrown by the webpack compiler itself. It is not the same as a syntax error. It is likely a missing or unresolvable build dependency.

☰ Stack trace
Did you mean 'ScrollTrigger.js'?
BREAKING CHANGE: The request 'gsap/ScrollTrigger' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.

I’ve worked with gsap and scrolltrigger before, not on sage10 but there should be no difference in setting it up. My app.js looks as follows

import domReady from '@roots/sage/client/dom-ready';

import {gsap} from 'gsap';
import {ScrollTrigger} from 'gsap/ScrollTrigger';
import Lenis from '@studio-freight/lenis';

gsap.registerPlugin(ScrollTrigger);
/**
 * Application entrypoint
 */
domReady(async () => {
  const lenis = new Lenis();

  lenis.on('scroll', (e) => {
    console.log(e);
  });

  function raf(time) {
    lenis.raf(time);
    requestAnimationFrame(raf);
  }

  requestAnimationFrame(raf);

  lenis.on('scroll', ScrollTrigger.update);

  gsap.ticker.add((time) => {
    lenis.raf(time * 1000);
  });
});

/**
 * @see {@link https://webpack.js.org/api/hot-module-replacement/}
 */
import.meta.webpackHot?.accept(console.error);

I’ve also tried to put the gsap.registerPlugin(ScrollTrigger); inside of the domReady, changing my bud versions from 6.8.0 to 6.12.0 both without any success.

Does someone know what i’m doing wrong, or what is going on here?

2

Not trying to be rude, but did you read the error message and try what it suggested?

3

Hello, I had the same problem and what I did was import it as follows

import { gsap } from ‘gsap’ ;
import { ScrollTrigger } from ‘gsap/ScrollTrigger.js’;

1 Like