Jump to content
Search Community

How do you work with Next.js ???

Elindo test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

This codepen is working great...

 

But I am trying to move it to a website using Next.js and it isn't working anymore.....   Would anybody know how to fix this working with Next.js?

 

It is giving me this error:

Server Error

TypeError: Cannot read properties of undefined (reading 'querySelectorAll')

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source

pages\interactive.js (12:2) @ Interactive

  10 |   let isButtonBDisabled = true;
  11 | 
> 12 |   gsap.set("#A1, #A2, #B1, #B2, #P, #Solb, #Sola", { opacity: 0 });
     |  ^
  13 |   gsap.set("#A, #B, #Stop, #Start", { opacity: 0.7 });
  14 | 
  15 |   function stagea1() {

 

 

The previous REACT-app (which was working just fine) code is here:

https://github.com/Elindo586/techunion/blob/main/client/src/pages/Interactive.js

 

The current not working code for Next.js is here:

https://github.com/Elindo586/nextprojecta/blob/main/pages/interactive.js

 

 

TypeError: Cannot read properties of undefined (reading 'querySelectorAll')
    at toArray (C:\Users\Edgar\Desktop\Stuff\Acode\nextprojecta\node_modules\gsap\dist\gsap.js:621:106)
    at new Tween (C:\Users\Edgar\Desktop\Stuff\Acode\nextprojecta\node_modules\gsap\dist\gsap.js:2911:130)
    at Object.set (C:\Users\Edgar\Desktop\Stuff\Acode\nextprojecta\node_modules\gsap\dist\gsap.js:3325:14)
    at Interactive (webpack-internal:///./pages/interactive.js:26:49)
    at renderWithHooks (C:\Users\Edgar\Desktop\Stuff\Acode\nextprojecta\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5471:16)
    at renderIndeterminateComponent (C:\Users\Edgar\Desktop\Stuff\Acode\nextprojecta\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5544:15) 
    at renderElement (C:\Users\Edgar\Desktop\Stuff\Acode\nextprojecta\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5759:7)
    at renderNodeDestructive (C:\Users\Edgar\Desktop\Stuff\Acode\nextprojecta\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5898:11)        
    at renderNode (C:\Users\Edgar\Desktop\Stuff\Acode\nextprojecta\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6030:12)
    at renderChildrenArray (C:\Users\Edgar\Desktop\Stuff\Acode\nextprojecta\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5986:7)
error - TypeError: Cannot read properties of undefined (reading 'querySelectorAll')
TypeError: Cannot read properties of undefined (reading 'querySelectorAll')
    at toArray (C:\Users\Edgar\Desktop\Stuff\Acode\nextprojecta\node_modules\gsap\dist\gsap.js:621:106)
    at new Tween (C:\Users\Edgar\Desktop\Stuff\Acode\nextprojecta\node_modules\gsap\dist\gsap.js:2911:130)
    at Object.set (C:\Users\Edgar\Desktop\Stuff\Acode\nextprojecta\node_modules\gsap\dist\gsap.js:3325:14)
    at Interactive (webpack-internal:///./pages/interactive.js:26:49)
    at renderWithHooks (C:\Users\Edgar\Desktop\Stuff\Acode\nextprojecta\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5471:16)
    at renderIndeterminateComponent (C:\Users\Edgar\Desktop\Stuff\Acode\nextprojecta\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5544:15) 
    at renderElement (C:\Users\Edgar\Desktop\Stuff\Acode\nextprojecta\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5759:7)
    at renderNodeDestructive (C:\Users\Edgar\Desktop\Stuff\Acode\nextprojecta\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5898:11)        
    at renderNode (C:\Users\Edgar\Desktop\Stuff\Acode\nextprojecta\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6030:12)
    at renderChildrenArray (C:\Users\Edgar\Desktop\Stuff\Acode\nextprojecta\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5986:7)
error - TypeError: Cannot read properties of undefined (reading 'querySelectorAll')

 

 

See the Pen ZEyOJOg by Elindo586 (@Elindo586) on CodePen

Link to comment
Share on other sites

Hi Elindo,

 

Please check out our React guide. GSAP is not going to be able to find any elements before the component has rendered. All GSAP code needs be inside an effect or some other function is called after the component has been rendered.

 

 

  • Like 1
Link to comment
Share on other sites

I'm not sure what you mean, but those gsap.set calls are 100% wrong in React, and Next.js is just React. The error might be a little different in next.js because it uses SSR, so there is no document when those calls are made.  Put those calls inside an effect, just like the guide shows, and you should be good. If not, please provide a minimal demo of the issue. You can use Codesandbox for next.js.

Link to comment
Share on other sites

I think....  the problem is that I am calling part of the working logics before the entire SVG gets to be render...

 

Being a not so great coding guy, I need learn/digest/ the UseEffect and the links you gave me...

 

HOWEVER, with Nextjs there might be (I think) quicker solution other than adding more code...

 

Maybe I can get away with just using "next/script" tags...  if it happens to work, the logics would come after the SVG is loaded. 

 

I would let know about this next failure? 

 

__________________________________________

 

On the other hand the short code problem so I think is that next.js doesnt know what "gsap" is in the code..

 

const GreenSock = () => {

The green sock logics

return( the svg stuff)

};

 export default GreenSock;

 

The problem comes right as soon as you call gsap in here:

 

import React from "react";
import gsap from "gsap";


const GreenSock = () => {
  let animation;
  let isButtonADisabled = true;
  let isButtonBDisabled = true;

  gsap.set("#A1, #A2, #B1, #B2, #P, #Solb, #Sola", { opacity: 0 });
  // ^^^   problem right there

 

 


 

 

 

 

 

 

Link to comment
Share on other sites

Hey!

 

So I got all of the javascript from GS in an UseEffect like this:

Const = GreenSock = () => {

useEffect (() => {

"here goes all of the GS javascript}),

[];

^^^ With this I get no more errors from the javascript part....

 

But how do I fix something liKe "btnstop is not defined"  calling a function from the javascript inside the SVG?

 

"btnstop" is a function from the javascript which is included in the useEffect section above.

 

Now I continue to the return part to include the SVG and all the text divs... 

 

return (

<div> 

all of the SVG stuff go in here..

line 938  <g id="Stop" onClick={btnstop}>

... more stuff 

</div>

)

}; 

 

 

 

Link to comment
Share on other sites

The minimum demo would be this:

 

 

<g id="Stop" onClick={btnstop}

 

^^^ this is now going into the SVG document inside the return()   section of the component creation in next.js

 

Tje error is btnstop is not defined

Link to comment
Share on other sites

When Blake requests a minimal demo, he doesn't mean a copy/paste of one line of code - he means a CodePen or CodeSandbox that illustrates the problem in context (so we can see the error being thrown). The issue could be caused by markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best.

 

Here's a React starter template

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

Link to comment
Share on other sites

Ok... I am trying to use the codesandbox template.

 

Link here:

objective-torvalds-tw3k9k - CodeSandbox

 

Would you happen to now why I am getting a syntax error? 

 

Basically what I did was this on the template:

 

 

import React, { useEffect, useRef } from "react";
import { gsap } from "gsap";
import "./styles.css";
 
export default function App() {
const boxRef = useRef();
 
useEffect(() => {
gsap.to(boxRef.current, { All the logics goes here });
});
 
return (
<div className="app">
<div className="col-md-6" ref={boxRef}>
Here goes the SVG stuff
</div>
</div>
);
}

 

 

 

 

 

 

Link to comment
Share on other sites

You have invalid JavaScript right on the very first line.

 

image.png

 

And if you're trying to calling to that btnstop function in the onClick, that will not work. That's just basic JavaScript. You cannot call a nested function.

 

function outer() {
  function inner() {
    console.log("hello");
  }
}

inner(); // error

 

And please go through that React guide. This is not recommended.

 

useEffect(() => {
  ...
});

 

 

 

Link to comment
Share on other sites

Well...

 

That was the GSAP template from here 

https://codesandbox.io/s/gsap-react-starter-ut42t?file=/src/App.js:0-368

 

import React, { useEffect, useRef } from "react";
import { gsap } from "gsap";
import "./styles.css";
 
export default function App() {
const boxRef = useRef();
 
useEffect(() => {
gsap.to(boxRef.current, { rotation: "+=360" });
}, []);
 
return (
<div className="app">
<div className="box" ref={boxRef}>
Hello
</div>
</div>
);
}

 

 

Now... I just got the entire logics inside the template and replaced "rotation..." wtih "let animation;" which is the first line of the entire code...

 

I think.... I am going to use the useEffect specifically on the problems items... 

 

Link to comment
Share on other sites

  • Solution
13 minutes ago, Elindo said:

Well...

 

That was the GSAP template from here 

 

Your effect did not have an empty array at the end. 

 

15 minutes ago, Elindo said:

I think.... I am going to use the useEffect specifically on the problems items... 

 

Please, just go through the React guide. 

 

  • Haha 1
Link to comment
Share on other sites

This was solved by simply wrapping this section in a useEffect() like this.

 

useEffect(() => {
    gsap.set("#A1, #A2, #B1, #B2, #P, #Solb, #Sola", { opacity: 0 });
    gsap.set("#A, #B, #Stop, #Start", { opacity: 0.7 });
  }, []);

 

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.
×
×
  • Create New...