MJONAI Posted October 1, 2023 Share Posted October 1, 2023 (edited) 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 Link to comment Share on other sites More sharing options...
GreenSock Posted October 1, 2023 Share Posted October 1, 2023 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"; Link to comment Share on other sites More sharing options...
MJONAI Posted October 2, 2023 Author Share Posted October 2, 2023 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. Link to comment Share on other sites More sharing options...
GreenSock Posted October 2, 2023 Share Posted October 2, 2023 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. 1 Link to comment Share on other sites More sharing options...
MJONAI Posted October 2, 2023 Author Share Posted October 2, 2023 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! Link to comment Share on other sites More sharing options...
Solution MJONAI Posted October 2, 2023 Author Solution Share Posted October 2, 2023 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! 2 2 Link to comment Share on other sites More sharing options...
GreenSock Posted October 2, 2023 Share Posted October 2, 2023 Excellent, thanks for reporting back with your findings/solution. 🥳 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