ScrollToPlugin does not work with rollup bundle

[MJONAI]

Hello.

The code that was working before has stopped working and we are investigating the cause.
The process itself can be reproduced with a simple code, which is as follows

 

HTML

<div style="height:1000vh; background-color:#333;background-image:repeating-linear-gradient(#0002,#0002 100px,#0004 100px,#0004 200px);"></div>
<a href="#" id="anchor" style="position:fixed;right:10px;bottom:10px;">LINK</a>

 

Javascript

import { gsap } from "gsap"
import { ScrollToPlugin } from "./ScrollToPlugin.js"
gsap.registerPlugin(ScrollToPlugin)

console.log(ScrollToPlugin.version)

document.getElementById("anchor").addEventListener("click", (e) => {
  e.preventDefault()
  gsap.to(window, { duration: 1, scrollTo: "max" })
})

 

When I click on the "LINK" I get the following error

Uncaught TypeError: ((_plugins[property] && _plugins[property].get) || getter) is not a function

 

The strange thing is that when I load GSAP from CDN without using rollup, it works fine.
Here is a Pen I created in the same way and it works fine.

 

What is even stranger is that when the scrolling is performed on a scrollable element other than a window, it works fine.

 

gsap.to("#SOME_ELEMENT", { duration: 1, scrollTo: "max" })

 

Is there anything else I can try?

See the Pen dywjwbW by mjonai (@mjonai) on CodePen

Edited October 1, 2023 by MJONAI
I had to send it before I could finish it

[GreenSock]

I can't reproduce the problem - can you please provide very detailed instructions about how exactly we can see the problem? 

 

https://stackblitz.com/edit/react-gcfytk?file=src%2Findex.js,public%2Findex.html

 

Also, this looked odd to me: 

import { ScrollToPlugin } from "./ScrollToPlugin.js"

Didn't you mean to do this?: 

import ScrollToPlugin from "gsap/ScrollToPlugin";

 

[MJONAI]

21 hours ago, GreenSock said:

Also, this looked odd to me: 

import { ScrollToPlugin } from "./ScrollToPlugin.js"

Didn't you mean to do this?: 

import ScrollToPlugin from "gsap/ScrollToPlugin";

You are right! This was test code, sorry.

 

Quote

I can't reproduce the problem - can you please provide very detailed instructions about how exactly we can see the problem?

I have prepared a code that can reproduce the problem.

 

https://stackblitz.com/edit/stackblitz-starters-h7q6is?file=src%2Findex.js

 

You can see the error in DevTools by clicking on "LINK A".

Uncaught TypeError: ((_plugins[property] && _plugins[property].get) || getter) is not a function

 

On the other hand, if you click on "LINK B" it works fine because it does not target the window.

 

I would like to know if there is a solution to this problem.

[GreenSock]

Oh, that certainly seems like a problem with your build system - it's leaking ALL of the local variables inside GSAP into the global space! No bueno. I can't imagine why Rollup would even do that. Like..if you inspect the "window" object, you'll see a ton of stuff on there that's actually supposed to be only scoped to inside GSAP's core. Fix that and the error will go away. 

 

In other words...

// inside gsap.js: 
let _local = "blah";
//...
export gsap as default;

Rollup (or whatever you're using) is putting _local in the GLOBAL scope (on the window). It's not treating the GSAP module as a sealed ES Module of sorts. It's leaking everything into the global scope. 

 

I'm not an expert in Rollup or build tools, but this question certainly seems like it belongs in a Rollup forum, not GSAP. I wish I had more to offer, but this is definitely the problem. 

[MJONAI]

I see! I understand.
I am relieved to hear that it is a Rollup issue.
Because I like and trust GSAP very much!

 

I am going to ask this question in the Rollup forum.
Thanks for your help!

[MJONAI]

I seem to have identified the cause of my problem.
At least ScrollToPlugin is now working.

As it turns out, it had nothing to do with GSAP, but I'll leave my solution in this forum for anyone else facing the same problem.

 

The cause was the lack of output.format:'iife' in my rollup config.

 

Here is my final rollup.config.mjs code.

import { dirname, resolve } from 'path';
import { nodeResolve } from '@rollup/plugin-node-resolve';

export default {
  input: [
    resolve(dirname(new URL(import.meta.url).pathname), './src/index.js'),
  ],
  output: {
    entryFileNames: '[name].js',
    dir: 'public',
    format: 'iife',
  },
  plugins: [
    nodeResolve({
      extensions: ['.js'],
    }),
  ],
};

 

Finally, thanks again to @GreenSock for the advice!

[GreenSock]

Excellent, thanks for reporting back with your findings/solution. 🥳