marcbelletre

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 Vue provide() function. import { createSSRApp, h } from 'vue' import { createInertiaApp } from '@inertiajs/vue3' import { gsap } from 'gsap' import { ScrollTrigger } from 'gsap/ScrollTrigger' gsap.registerPlugin(ScrollTrigger) createInertiaApp({ setup({ el, App, props, plugin }) { const app = createSSRApp({ render: () => h(App, props) }) .use(plugin) .provide('gsap', gsap) .provide('ScrollTrigger', ScrollTrigger) app.mount(el) }, }) In the ssr.js file I only imported GSAP without ScrollTrigger. import { createSSRApp, h } from 'vue' import { createInertiaApp, Link, Head } from '@inertiajs/vue3' import createServer from '@inertiajs/vue3/server' import { gsap } from 'gsap' createServer(page => createInertiaApp({ setup({ App, props, plugin }) { return createSSRApp({ render: () => h(App, props) }) .use(plugin) .provide('gsap', gsap) }, }), ) Then everytime I need to use GSAP I just inject it inside my component. <script setup> import { inject, nextTick, onMounted } from 'vue' const gsap = inject('gsap') onMounted(() => { nextTick(() => { gsap.to(...) }) }) </script> 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. <script setup> import { inject, nextTick, onMounted } from 'vue' const gsap = inject('gsap') const ScrollTrigger = inject('ScrollTrigger', null) onMounted(() => { nextTick(() => { if (ScrollTrigger) { ScrollTrigger.create(...) } }) }) </script> Again thank you for your time Cheers!

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!