dehlix Posted July 24, 2020 Share Posted July 24, 2020 Good morning! In my Nuxt.js App I install GSAP by downloading the files in UMD/CommonJS mode and installed the the gsap-bonus.tgz. it looks fine so far that the page renders with the animation. however the CMS crashed with "Uncaught error: mainImage is not defined”. Above all I'm getting this error in the Terminal: ERROR Cannot read property 'querySelectorAll' of undefined 10:01:49 at toArray (node_modules/gsap/dist/gsap.js:606:95) at new Tween (node_modules/gsap/dist/gsap.js:2778:104) at Object.to (node_modules/gsap/dist/gsap.js:3097:14) at VueComponent.startAnimation (pages/index.js:116:59) at pages/index.js:107:14 at runMicrotasks (<anonymous>) at processTicksAndRejections (internal/process/task_queues.js:93:5) Any idea? thank you! Link to comment Share on other sites More sharing options...
OSUblake Posted July 24, 2020 Share Posted July 24, 2020 3 Link to comment Share on other sites More sharing options...
dehlix Posted July 24, 2020 Author Share Posted July 24, 2020 @OSUblake thank you! I'm going to look into this thread 👍 Link to comment Share on other sites More sharing options...
dehlix Posted July 24, 2020 Author Share Posted July 24, 2020 Hi @OSUblake! by following the suggestions I'm now importing GSAP in Nuxt this way:index.vue import { gsap } from 'gsap' import { TextPlugin } from 'gsap/TextPlugin' import { ScrollTrigger } from 'gsap/ScrollTrigger' if (process.client) { gsap.registerPlugin(TextPlugin, ScrollTrigger) } nuxt.config.js build: { transpile: ['gsap'], }, The page renders well and I have the animation working. Still in the terminal I get this error: ERROR Cannot read property 'querySelectorAll' of undefined 15:04:45 at toArray (pages/index.js:2537:95) at new Tween (pages/index.js:4710:104) at Object.to (pages/index.js:5029:14) at VueComponent.startAnimation (pages/index.js:116:49) at pages/index.js:107:14 at processTicksAndRejections (internal/process/task_queues.js:93:5) Thank you for your help! Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 24, 2020 Share Posted July 24, 2020 Please share the entire relevant portion of your code with us as it's impossible for us to help blindly. A minimal demo using something like CodeSandbox would be greatly appreciated and likely help you get a faster response. Link to comment Share on other sites More sharing options...
dehlix Posted July 24, 2020 Author Share Posted July 24, 2020 @ZachSaucier thank you for your suggestion! Actually I have already connected the project to a headless CMS and I'm also querying data. So the code it's already to complex. Your suggestion gives me the hint to first install GSAP on a fresh Nuxt.js installation and then after connect the rest and so on. That way it will be easier also for me maybe to understand and as well to create a Sandbox example eventually. I'll proceed this way! Thank YOU! Link to comment Share on other sites More sharing options...
OSUblake Posted July 24, 2020 Share Posted July 24, 2020 That error means you're probably executing an animation on the server with SSR. Need to make sure process.client is available before running any anmations. 2 Link to comment Share on other sites More sharing options...
dehlix Posted July 24, 2020 Author Share Posted July 24, 2020 @OSUblake Thank you for this! this is very helpful! but it's still unclear to me if (process.client) { gsap.registerPlugin(TextPlugin, ScrollTrigger) } if the above code serve to specify that I want to import a resource only on the client-side. Would you know what else should I do to make sure that process.client is available? Thank you! Link to comment Share on other sites More sharing options...
dehlix Posted July 24, 2020 Author Share Posted July 24, 2020 @OSUblake following your hint I found now the following in Nuxt Docs. Probably this is the way to go? Name conventional plugin If plugin is assumed to be run only in client or server side, .client.js or .server.js can be applied as extension of plugin file, the file will be automatically included in corresponding side. Example: nuxt.config.js: export default { plugins: [ '~/plugins/foo.client.js', // only in client side '~/plugins/bar.server.js', // only in server side '~/plugins/baz.js' // both client & server ] } Object syntax You can also use the object syntax with the mode property ('client' or 'server') in plugins. Example: nuxt.config.js: export default { plugins: [ { src: '~/plugins/both-sides.js' }, { src: '~/plugins/client-only.js', mode: 'client' }, // only on client side { src: '~/plugins/server-only.js', mode: 'server' } // only on server side ] } Link to comment Share on other sites More sharing options...
OSUblake Posted July 24, 2020 Share Posted July 24, 2020 8 minutes ago, dehlix said: @OSUblake following your hint I found now the following in Nuxt Docs. Probably this is the way to go? No, plugins are typically for doing stuff with Vue. You need to make sure the client is available before running an animation. someMethod() { if (!process.client) return; gsap.to(...) } 1 1 Link to comment Share on other sites More sharing options...
dehlix Posted July 24, 2020 Author Share Posted July 24, 2020 @OSUblake oh great! thank you for the quick reply. So I'll rewind what I was trying out and go this way! thank you! Link to comment Share on other sites More sharing options...
OSUblake Posted July 24, 2020 Share Posted July 24, 2020 And you should use refs instead of selectors. // bad <div id="someElement"></div> gsap.to("#someElement", {...}) // good <div ref="someElement"></div> gsap.to(this.$refs.someElement, {...}) See the Pen 3c4edfeed36f900232b9d8c8a54aa2cc by osublake (@osublake) on CodePen 3 1 Link to comment Share on other sites More sharing options...
dehlix Posted July 24, 2020 Author Share Posted July 24, 2020 @OSUblake cool! thank you very much! Link to comment Share on other sites More sharing options...
dehlix Posted July 24, 2020 Author Share Posted July 24, 2020 @OSUblake thank you! in your example I don't find a method where you specify the if(!process.client) return; someMethod() { if (!process.client) return; gsap.to(...) } I know that in Vue is not needed, right? ...that it's precisely the Nuxt issue. however I try with that and refs instead of selectors, that probably will make the final difference. Thank you! Link to comment Share on other sites More sharing options...
dehlix Posted July 24, 2020 Author Share Posted July 24, 2020 cool! 🎉 it's working! thank you very much @OSUblake ! Link to comment Share on other sites More sharing options...
OSUblake Posted July 24, 2020 Share Posted July 24, 2020 1 hour ago, dehlix said: I know that in Vue is not needed, right? ...that it's precisely the Nuxt issue. Yeah, it's just part of Nuxt, and you only need those checks if mode in your nuxt.config is set to universal. In spa mode is doesn't matter. 2 Link to comment Share on other sites More sharing options...
dehlix Posted July 24, 2020 Author Share Posted July 24, 2020 @OSUblake wonderful! yes, I'm aware of that. The reason why I'm using Nuxt it's precisely to get universal mode's advantages . So I made a universal mode installation. However I plan to deploy with generating a static project npm run generate . And I just did a test and it works perfectly also once it's deployed without server side! Thank you so much for your help! 1 Link to comment Share on other sites More sharing options...
dgknca Posted October 30, 2021 Share Posted October 30, 2021 If you're using svelte, wrap your code with onMount hook. import {onMount} from 'svelte' onMount(() => { gsap.to(".title", { duration: 5, ease: "none", x: "+=500" }); }) 1 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