marcbelletre
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by marcbelletre
-
-
Hi Cassie!
Thank you for taking the time to propose a solution.
Unfortunately I also tried this but it does not fix the import issue.
import { ScrollTrigger } from "gsap/ScrollTrigger.js"; ^^^^^^^^^^^^^ SyntaxError: Named export 'ScrollTrigger' not found. The requested module 'gsap/ScrollTrigger.js' is a CommonJS module, which may not support all module.exports as named exports
The problem seems to be related to the import rather than the registerPlugin function.I'm using Vite by the way.
I'm going to try posting this on the Laracasts forum.
Thanks!
-
Hello there,
I'm working on a Laravel/Inertia.js app that uses GSAP and ScrollTrigger for multiple components. Everything works perfectly fine until I start the SSR server.
Inertia.js comes with a command that launches a
ssr.js
script on the server to render the pages server-side.php artisan inertia:start-ssr
Right after running this command the SSR server starts and shows the following:
Starting SSR server on port 13714... Inertia SSR server started.
The problem is that as soon as the SSR server is running I'm starting to get errors from GSAP.
Here is what I tried so far:
1. Using ES modules
<script> import { gsap } from 'gsap' import { ScrollTrigger } from 'gsap/ScrollTrigger' gsap.registerPlugin(ScrollTrigger) export default { mounted() { gsap.to(...) } } </script>
This works fine in the browser but the SSR server shows the following error:
import { ScrollTrigger } from "gsap/ScrollTrigger.js"; ^^^^^^^^^^^^^ SyntaxError: Named export 'ScrollTrigger' not found. The requested module 'gsap/ScrollTrigger.js' is a CommonJS module, which may not support all module.exports as named exports.
2. Using CommonJS modules
import { gsap } from 'gsap/dist/gsap' import { ScrollTrigger } from 'gsap/dist/ScrollTrigger' gsap.registerPlugin(ScrollTrigger)
The SSR server doesn't show any errors but the animations don't work anymore on the page and the browser's console shows the following error:
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'registerPlugin')
3. Using a slightly different syntax (removing the curly braces from the GSAP import
import gsap from 'gsap/dist/gsap' import { ScrollTrigger } from 'gsap/dist/ScrollTrigger' gsap.registerPlugin(ScrollTrigger)
Now the animations work in the browser but the SSR server shows the following error:
TypeError: gsap.registerPlugin is not a function
4. Importing GSAP using ES module and ScrollTrigger using CommonJS (yes I tried everything)
import { gsap } from 'gsap' import { ScrollTrigger } from 'gsap/dist/ScrollTrigger' gsap.registerPlugin(ScrollTrigger)
No error from the SSR server but not working from client side with the following error:
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'name') at Ap (app-5bcb6a14.js:95:11885) at app-5bcb6a14.js:95:46479 at Array.forEach (<anonymous>) at Object.registerPlugin (app-5bcb6a14.js:95:46452) at Durabilite-74610e63.js:1:143
I can't find a way to make it work on both sides (client and server) at the same time. Any idea?
I can create a repository with a minimal demo if needed.
Thanks!
-
1
-
GSAP + ScrollTrigger not working with Inertia.js / SSR
in GSAP
Posted
Hi Rodrigo,
Thank you for your answer.
I'm not using vite-plugin-ssr as Inertia.js already comes with an SSR feature.
I ended up moving my GSAP/ScrollTrigger imports to the main
app.js
file and injecting them using the Vueprovide()
function.In the
ssr.js
file I only imported GSAP without ScrollTrigger.Then everytime I need to use GSAP I just inject it inside my component.
Whenever I need to use a standalone
ScrollTrigger
instance I inject it with a default value set to null and check if it exists before using it. This way it works in the browser but it is ignored by the server.Again thank you for your time
Cheers!