Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
dehlix

GSAP with Nuxt.js | ERROR  Cannot read property 'querySelectorAll' of undefined  

Recommended Posts

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

 

  • Like 3
Link to comment
Share on other sites


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

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

@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

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.

  • Like 2
Link to comment
Share on other sites

@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

@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

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(...)
}

 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

@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

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

 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

@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

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.

 

  • Like 2
Link to comment
Share on other sites

@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!
  • Like 1
Link to comment
Share on other sites

  • 1 year later...

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"
  });
})
  • Thanks 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×